常用的一种js脚本实现图层模块拖动特效,可自己添加图层数量,直接用鼠标拖动图层即可,方便实用。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren"> <meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种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) {//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) 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; } } }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) </script> <a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr> <!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。--> <script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script> <script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script> <div id="www_wuming_ren_1" style="left:10px;top:40px;">武鸣人一号图层</div> <div id="www_wuming_ren_2" style="left:120px;top:40px;background-color : #f3d9ff">武鸣人二号图层</div> <div id="www_wuming_ren_3" style="left:230px;top:40px;background-color : #c3ffff">武鸣人三号图层</div> <div id="www_wuming_ren_4" style="left:10px;top:150px;background-color : #c3d944">武鸣人四号图层</div> <div id="www_wuming_ren_5" style="left:120px;top:150px;background-color : #f3d944">越努力越幸运,越自律越优秀</a> </div> <div id="www_wuming_ren_6" style="left:230px;top:150px;background-color : #e3f944;width:200px;">越努力越幸运,越自律越优秀! </div> <script> drag("www_wuming_ren_1"); drag("www_wuming_ren_2"); drag("www_wuming_ren_3"); drag("www_wuming_ren_4",1); drag("www_wuming_ren_5",1); drag("www_wuming_ren_6",1); </script> </body> </hrml>
本文来自武鸣人网站,转载请注明出处