多图层页面拖动特效实例

作者:sky 点击:99 评论:0 发布时间:周六, 02/18/2012 - 14:47 所属分类:表格图层

常用的一种js脚本实现图层模块拖动特效，可自己添加图层数量。

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。以质量为核心，以实用为目的,全力打造一流网页特效站" /> <title>站长特效多图层页面拖动特效实例站长特效网</title> <style> body { font-size:12px; color:#333333; border : 0px solid blue; } div { position : absolute; background-color : #c3d9ff; margin : 0px; padding : 5px; border : 0px; width : 100px; height:100px; } </style> </head> <body> <script> function drag(o,s) {//欢迎来到站x长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 if (typeof o == "string") o = document.getElementById(o); o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; o.orig_y = parseInt(o.style.top) - document.body.scrollTop; o.orig_index = o.style.zIndex; o.onmousedown = function(a) { this.style.cursor = "move"; this.style.zIndex = 10000; var d=document; if(!a)a=window.event; var x = a.clientX+d.body.scrollLeft-o.offsetLeft; var y = a.clientY+d.body.scrollTop-o.offsetTop; //author: www.longbill.cn d.ondragstart = "return false;" d.onselectstart = "return false;" d.onselect = "document.selection.empty();" if(o.setCapture) o.setCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); d.onmousemove = function(a) { if(!a)a=window.event; o.style.left = a.clientX+document.body.scrollLeft-x; o.style.top = a.clientY+document.body.scrollTop-y; o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; o.orig_y = parseInt(o.style.top) - document.body.scrollTop; } d.onmouseup = function() { if(o.releaseCapture) o.releaseCapture(); else if(window.captureEvents) window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP); d.onmousemove = null; d.onmouseup = null; d.ondragstart = null; d.onselectstart = null; d.onselect = null; o.style.cursor = "normal"; o.style.zIndex = o.orig_index; } } if (s) { var orig_scroll = window.onscroll?window.onscroll:function (){}; window.onscroll = function () { orig_scroll(); o.style.left = o.orig_x + document.body.scrollLeft; o.style.top = o.orig_y + document.body.scrollTop; } } }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，.net打造靓站，还有许多广告代码下载。 </script> <a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> <div id="wwwzzjsnet_1" style="left:10px;top:40px;">站长特效网一号图层</div> <div id="wwwzzjsnet_2" style="left:120px;top:40px;background-color : #f3d9ff">站长特效二号图层</div> <div id="wwwzzjsnet_3" style="left:230px;top:40px;background-color : #c3ffff">站长特效三号图层</div> <div id="wwwzzjsnet_4" style="left:10px;top:150px;background-color : #c3d944">站长特效四号图层</div> <div id="wwwzzjsnet_5" style="left:120px;top:150px;background-color : #f3d944">以质量为核心，以实用为目的</a> </div> <div id="wwwzzjsnet_6" style="left:230px;top:150px;background-color : #e3f944;width:200px;">打造中国地区一流网页特效资源站点！ </div> <script> drag("wwwzzjsnet_1"); drag("wwwzzjsnet_2"); drag("wwwzzjsnet_3"); drag("wwwzzjsnet_4",1); drag("wwwzzjsnet_5",1); drag("wwwzzjsnet_6",1); </script> </body> </hrml>

提示：你可以先修改部分代码再运行。

顶一下

(0)

100%

踩一下

(0)

100%

标签: