可以拖动的多张图片

站内搜索

热门关键字：表格超链接漂浮跟随旋转闪烁日期艺术字滚动点击关联菜单弹出随机

网页特效分类

网页特效分类 >> 图形特效

可以拖动的多张图片

[ 发布者：luwei | 来源：本站整理 | 时间：2005-10-25 | 浏览：人次 ]

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>网页特效|JcwCn.Com/Js|---　可以拖动的多张图片</title>
</head>

<body>

<script language="JavaScript">
//Pre-load your images here.
imgs=new Array("http://sc.jcwcn.com/tx/JsHtml/images/k0212.gif","http://sc.jcwcn.com/tx/JsHtml/images/PHOT046.JPG","images/c0407.jpg"/*tpa=http://sc.jcwcn.com/tx/JsHtml/images/c0407.jpg*/,"http://sc.jcwcn.com/tx/JsHtml/images/e.jpg","http://sc.jcwcn.com/tx/JsHtml/images/developer.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="javascript:if(confirm('http://sc.jcwcn.com/tx/JsHtml/images/k0212.gif  \n\nThis file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.  \n\nDo you want to open it from the server?'))window.location='http://sc.jcwcn.com/tx/JsHtml/images/k0212.gif'" tppabs="http://sc.jcwcn.com/tx/JsHtml/images/k0212.gif" name="0">
</div>

<div id="pics1" style="position:absolute;top:100px;left:10px;cursor:move">
<img src="javascript:if(confirm('http://sc.jcwcn.com/tx/JsHtml/images/PHOT046.JPG  \n\nThis file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.  \n\nDo you want to open it from the server?'))window.location='http://sc.jcwcn.com/tx/JsHtml/images/PHOT046.JPG'" tppabs="http://sc.jcwcn.com/tx/JsHtml/images/PHOT046.JPG" name="1">
</div>

<div id="pics2" style="position:absolute;top:190px;left:10px;cursor:move">
<img src="images/c0407.jpg" tppabs="http://sc.jcwcn.com/tx/JsHtml/images/c0407.jpg" name="2">
</div>

<div id="pics3" style="position:absolute;top:280px;left:10px;cursor:move">
<img src="javascript:if(confirm('http://sc.jcwcn.com/tx/JsHtml/images/e.jpg  \n\nThis file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.  \n\nDo you want to open it from the server?'))window.location='http://sc.jcwcn.com/tx/JsHtml/images/e.jpg'" tppabs="http://sc.jcwcn.com/tx/JsHtml/images/e.jpg" name="3">
</div>

<div id="pics4" style="position:absolute;top:370px;left:10px;cursor:move">
<img src="javascript:if(confirm('http://sc.jcwcn.com/tx/JsHtml/images/developer.gif  \n\nThis file was not retrieved by Teleport Pro, because the server reports that this file cannot be found.  \n\nDo you want to open it from the server?'))window.location='http://sc.jcwcn.com/tx/JsHtml/images/developer.gif'" tppabs="http://sc.jcwcn.com/tx/JsHtml/images/developer.gif" name="4">
</div>



 


</body>

</html>

本类相关特效