多图层页面拖动js特效实例

9个月前 (02-29 19:52)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

常用的一种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>


0
0
收藏0

本文来自武鸣人网站,转载请注明出处

本文地址:https://www.wuming.ren/a/118.html

回帖

多图层页面拖动js特效实例 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息