图片移动组件

时间：2014-05-06 00:35:29 收藏：0 阅读：428
支持图片移动，即左右上下移动，DEMO
bubuko.com,布布扣
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片移动</title>
<link rel="stylesheet" type="text/css" href="css/imgCss.css">
</head>
<body onload="init();" style="background-color:#BFC9DA">
<div style="margin:50px auto;width:500px;height:500px">
<div style="font-size:24px;color:red;padding: 10px 150px;">图片移动组件</div>
<div style="margin:10px"><input  type="text" id="picNumber" name="picNumber" value="1" style="width:40px"/><button type="button" onclick="addPic();">上传图片</button></div>
<div id="prodImg"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var imgArray = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg"];
function init(){	
	movePic.init();
}
function addPic(){
	var array = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg","img/9.jpg","img/10.jpg"];
	var number = parseInt($(‘#picNumber‘).val());
	var imgLength=imgArray.length;
	if((imgLength+number)>8){
		alert("最多只能上传八张图片！");
		return ;
	}
	for(var i = 0;i<number;i++){
		imgArray.push(array[Math.floor(Math.random()*10)]);
	}
	imgLength = imgArray.length;
	movePic.init();
}

var movePic={
	init:function(){
		var imgHtml = [],imgLength = imgArray.length;
		for(var i=0;i<imgLength;i++){
			var operateHtml = [];
			operateHtml.push(‘<div class="prodImg" id="prodImg‘+(i+1)+‘"><img id="img‘+(i+1)+‘" class="imgcss"><div class="operate" id="operate‘+(i+1)+‘">‘);
			operateHtml.push(‘<span class="toleft" id="toleft‘+(i+1)+‘">左移</span>‘);
			if(i<4){
				operateHtml.push(‘<span class="todown" id="todown‘+(i+1)+‘">下移</span>‘);
			}else{
				operateHtml.push(‘<span class="toup" id="toup‘+(i+1)+‘">上移</span>‘);
			}
			operateHtml.push(‘<span class="toright"id="toright‘+(i+1)+‘">右移</span>‘);
			operateHtml.push(‘<span class="del" id="del‘+(i+1)+‘">删除</span>‘);
			operateHtml.push(‘</div></div>‘);
			imgHtml.push(operateHtml.join(‘‘));
		}
		
		var prodImgHtml = [];
		prodImgHtml.push(‘<div style="width:480px;margin:5px;">‘);	
		for(var i=0;i<imgLength;i++){
			prodImgHtml.push(imgHtml[i]);
			if(i==3){
				prodImgHtml.push(‘</div><div style="width:480px;margin:5px;">‘);
			}
		}
		$(‘#prodImg‘).html(prodImgHtml.join(‘‘));
		
		$(‘#toleft1‘).hide();$(‘#toleft5‘).hide();
		$(‘#toright4‘).hide();$(‘#toright8‘).hide();
		
		for(var i=0;i<imgLength;i++){
			$(‘#todown‘+(i+1)).hide();$(‘#toright‘+(i+1)).hide();
			$(‘#todown‘+(i-3)).show();if(i!=0&&i!=4){$(‘#toright‘+i).show();}
		}
			
		for(var i=0;i<imgLength;i++){
			$(‘#img‘+(i+1)).attr("src",imgArray[i]);
			this.bindImg(i+1);this.bindLeft(i);
			this.bindRight(i);this.bindDel(i);
		}
		for(var i=0;i<4;i++){
			this.bindDown(i);this.bindUp(i);
		}
	},
	bindImg:function(i){$(‘#prodImg‘+i).mouseenter(function(){$(‘#operate‘+i).show();});$(‘#prodImg‘+i).mouseleave(function(){$(‘#operate‘+i).hide()})},
	bindLeft:function(i){$(‘#toleft‘+(i+2)).click(function(){movePic.changeArray(i)})},
	bindDown:function(i){$(‘#todown‘+(i+1)).click(function(){movePic.downArray(i+1)})},
	bindRight:function(i){$(‘#toright‘+(i+1)).click(function(){movePic.changeArray(i)})},
	bindUp:function(i){$(‘#toup‘+(i+5)).click(function(){upArray(i+5)})},
	bindDel:function(i){$(‘#del‘+(i+1)).click(function(){delArray(i+1)})},
	changeArray:function(num){var temp = imgArray[num];imgArray[num] = imgArray[num+1];imgArray[num+1] = temp;this.init()},
	downArray:function(num){
		var newImgArray = []; 
		var delImg = imgArray[num-1];
		imgArray.splice(num-1,1);
		for(var i = 0;i<imgArray.length;i++){
			newImgArray.push(imgArray[i]);
			if(i==num+2){
				newImgArray.push(delImg);
			}
			
		}
		imgArray = newImgArray;
		this.init();
	},
	upArray:function(num){
		var newImgArray = []; 
		var delImg = imgArray[num-1];
		imgArray.splice(num-1,1);
		for(var i = 0;i<imgArray.length;i++){
			if(i==num-5){
				newImgArray.push(delImg);
			}
			newImgArray.push(imgArray[i]);
		}
		imgArray = newImgArray;
		imgLength = imgArray.length;
		this.init();
	},
	delArray:function(num){ 
		imgArray.splice(num-1,1);
		imgLength = imgArray.length;
		this.init();
	}
}
</script>

</body>
</html>
图片移动组件,布布扣,bubuko.com