标签：style blog class java ext color
支持图片移动，即左右上下移动，DEMO
<!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>
标签：style blog class java ext color
原文地址：http://www.cnblogs.com/lj915/p/3704436.html
