121、可移动的多个图片

121、可移动的多个图片

脚本说明:

把如下代码加入<body>区域中:

<script language="JavaScript">

//Pre-load your images here.

imgs=new Array("p1.gif","p2.gif","p3.gif","p4.gif","p5.gif")

 

//Alter nothing past here!

load=new Array()

for(i=0; i < imgs.length; i++){

 load[i]=new Image();

 load[i].src=imgs[i];

}

var ns=(document.layers);

var ns6=(document.getElementById&&!document.all);

var ie=(document.all);

var n=imgs.length;

var y=null;

var x=null;

var z=null;

var w=null;//Alternate id. Not used for this script.

if (ns||ns6){

window.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);

document.releaseEvents(Event.MOUSEMOVE);

}

if (ns){window.onmousedown=down;window.onmouseup=up}

if (ie||document.getElementById){document.onmousedown=down;document.onmouseup=up}

function down(e){

if (ns){

 window.onmousemove=move;

 if (document.layers['pics'+e.target.name]){

 z=document.layers['pics'+e.target.name];

 y=e.layerY;

 x=e.layerX;

 document.layers['pics'+e.target.name].zIndex=n++;

 }

else {return true}

w=z.name.charAt(z.name.length-1);

}

if (ie && window.event.srcElement.parentElement){

 document.onmousemove=move;

 if  (window.event.srcElement.parentElement.id.indexOf("pics") != -1){

 z=window.event.srcElement.parentElement;

 y=window.event.offsetY;

 x=window.event.offsetX;

 w=window.event.srcElement.parentElement.id.charAt(window.event.srcElement.parentElement.id.length-1);

 window.event.srcElement.parentElement.style.zIndex=n++;

 }

}

if (ns6){

 document.onmousemove=move;

 if  (e.target.parentNode.id.indexOf("pics") != -1){

 z=e.target.parentNode.style;

 x=e.clientX - parseInt(z.left);

 y=e.clientY - parseInt(z.top);

 w=e.target.parentNode.id.charAt(e.target.parentNode.id.length-1);

 z.zIndex=n++; 

 }

}

return false;

}

function move(e){

if (ns && z){z.left=e.pageX-x;z.top=e.pageY-y;}

if (ns6 && z){z.top=parseInt(e.clientY)-y;z.left=parseInt(e.clientX)-x}

if (ie && z){z.style.posLeft=window.event.clientX-x;z.style.posTop=window.event.clientY-y}

return false;

}

function up(e){

if (ie||ns6)document.onmousemove=null;

if (ns)window.onmousemove=null;

z=null;

}

//-->

</script>

 

<div id="pics0" style="position:absolute;top:10px;left:10px;cursor:move">

<img src="p1.gif" name="0">

</div>

 

<div id="pics1" style="position:absolute;top:100px;left:10px;cursor:move">

<img src="p2.gif" name="1">

</div>

 

<div id="pics2" style="position:absolute;top:190px;left:10px;cursor:move">

<img src="p3.gif" name="2">

</div>

 

<div id="pics3" style="position:absolute;top:280px;left:10px;cursor:move">

<img src="p4.gif" name="3">

</div>

 

<div id="pics4" style="position:absolute;top:370px;left:10px;cursor:move">

<img src="p5.gif" name="4">

</div>

 

Write a comment

Comments: 0