首页 > 网站素材 / 正文

js写的鼠标可拖动的层代码，可以用于图片展示等情况下

用于一些网站特效，做个性网站很不错的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM_text01</title>
<style type="text/css">
body,span,div,td{font-size:12px;line-height:1.5em;color:#849BCA;}
#bodyL{
        float:left;
        width:84px;
        margin-right:2px;
}
a.od{
        width:80px;
        height:25px;
        line-height:25px;
        text-align:center;
        font-weight:bold;
        border: 2px solid #849BCA;
        display:block;
        color:#547BC9;
        float:left;
        text-decoration:none;
        margin-top:2px;
}
a.od:link{
        background:#EEF1F8;
}
a.od:visited{
        background:#EEF1F8;
}
a.od:hover{
        background:#EEE;
}
a.od:active{
        background:#EEE;
}
#fd{
        width:500px;
        height:200px;
        background:#EDF1F8;
        border: 2px solid #849BCA;
        margin-top:2px;
        margin-left:2px;
        float:left;
        overflow:hidden;
        position:absolute;
        left:0px;
        top:0px;
        cursor:move;
        float:left;
        /*filter:alpha(opacity=50);*/

}
.content{
        padding:10px;
}
</style>
</head>
<body>
<div id="bodyL">
        <a href="#" class="od" onclick = "show('fd');return false;">
                [打开层]
        </a>
        <a href="#" class="od" onclick = "closeed('fd');return false;">
                [关闭层]
        </a>
</div>
<div id="fd" style="display:none;filter:alpha(opacity=100);opacity:1;">
        <div class="content">移动层</div>
</div>

<script type="text/javascript">
        var prox;
        var proy;
        var proxc;
        var proyc;
        function show(id){/*--打开--*/
                clearInterval(prox);
                clearInterval(proy);
                clearInterval(proxc);
                clearInterval(proyc);
                var o = document.getElementById(id);
                o.style.display = "block";
                o.style.width = "1px";
                o.style.height = "1px";
                prox = setInterval(function(){openx(o,500)},10);
        }
        function openx(o,x){/*--打开x--*/
                var cx = parseInt(o.style.width);
                if(cx < x)
                {
                        o.style.width = (cx + Math.ceil((x-cx)/5)) +"px";
                }
                else
                {
                        clearInterval(prox);
                        proy = setInterval(function(){openy(o,200)},10);
                }
        }
        function openy(o,y){/*--打开y--*/
                var cy = parseInt(o.style.height);
                if(cy < y)
                {
                        o.style.height = (cy + Math.ceil((y-cy)/5)) +"px";
                }
                else
                {
                        clearInterval(proy);
                }
        }
        function closeed(id){/*--关闭--*/
                clearInterval(prox);
                clearInterval(proy);
                clearInterval(proxc);
                clearInterval(proyc);
                var o = document.getElementById(id);
                if(o.style.display == "block")
                {
                        proyc = setInterval(function(){closey(o)},10);
                }
        }
        function closey(o){/*--打开y--*/
                var cy = parseInt(o.style.height);
                if(cy > 0)
                {
                        o.style.height = (cy - Math.ceil(cy/5)) +"px";
                }
                else
                {
                        clearInterval(proyc);
                        proxc = setInterval(function(){closex(o)},10);
                }
        }
        function closex(o){/*--打开x--*/
                var cx = parseInt(o.style.width);
                if(cx > 0)
                {
                        o.style.width = (cx - Math.ceil(cx/5)) +"px";
                }
                else
                {
                        clearInterval(proxc);
                        o.style.display = "none";
                }
        }


        /*-------------------------鼠标拖动---------------------*/
        var od = document.getElementById("fd");
        var dx,dy,mx,my,mouseD;
        var odrag;
        var isIE = document.all ? true : false;
        document.onmousedown = function(e){
                var e = e ? e : event;
                if(e.button == (document.all ? 1 : 0))
                {
                        mouseD = true;
                }
        }
        document.onmouseup = function(){
                mouseD = false;
                odrag = "";
                if(isIE)
                {
                        od.releaseCapture();
                        od.filters.alpha.opacity = 100;
                }
                else
                {
                        window.releaseEvents(od.MOUSEMOVE);
                        od.style.opacity = 1;
                }
        }


        //function readyMove(e){
        od.onmousedown = function(e){
                odrag = this;
                var e = e ? e : event;
                if(e.button == (document.all ? 1 : 0))
                {
                        mx = e.clientX;
                        my = e.clientY;
                        od.style.left = od.offsetLeft + "px";
                        od.style.top = od.offsetTop + "px";
                        if(isIE)
                        {
                                od.setCapture();
                                od.filters.alpha.opacity = 50;
                        }
                        else
                        {
                                window.captureEvents(Event.MOUSEMOVE);
                                od.style.opacity = 0.5;
                        }

                        //alert(mx);
                        //alert(my);

                }
        }
        document.onmousemove = function(e){
                var e = e ? e : event;

                //alert(mrx);
                //alert(e.button);
                if(mouseD==true && odrag)
                {
                        var mrx = e.clientX - mx;
                        var mry = e.clientY - my;
                        od.style.left = parseInt(od.style.left) +mrx + "px";
                        od.style.top = parseInt(od.style.top) + mry + "px";
                        mx = e.clientX;
                        my = e.clientY;

                }
        }


</script>
</body>
</html>

TAGS :

上一篇：帝国ECMS搜索结果提示信息修改的方法
下一篇：返回列表

标签列表

网站素材排行

1 帝国CMS内容ID从1开始、及清空栏目、内容、会员、附件关联和TAG标签数据，让内容ID从0开始！ 99999
2 去除帝国ECMS列表页简介及内容页过滤smalltext标签中的空格、换行等代码方法 88888
3 发网站外链的好地方 7777
4 CSS 背景 71
5 帝国cms清空后台登录操作日志方法技巧 28
6 帝国cms灵动标签常用的变量 17
7 帝国cms增加文章关键字时同步增加相同tags标签的方法 14
8 帝国cms如何给文章内容关键词自动加上内链链接 14
9 清除dns缓存(清除dns缓存的命令) 5
10 CSS 简介 3
11 CSS的创建 3
12 帝国cms简介截取字符时出现html的解决方法!(轻松去除HTML内容) 3
13 CSS 语法 2
14 CSS id 和 class的区别 2
15 帝国cms发布于10秒前 1周前 1个月前倒计时函数设置方法 2
16 帝国ecms网站复制粘贴微信公众号图片远程保存方法 1
17 帝国cms灵动标签调用标题图片没有图片时让其显示默认图片 1
18 帝国CMS灵动标签调用昨天、今天、某天、某天以前、某天以后发布的文章 0
19 帝国CMS如何设置安全防护设置更安全 0
20 帝国ecms系统设置站内搜索 0
21 帝国CMS下载最终页模板调用带图片的软件信息 0
22 帝国cms后台发布内容自动把内容图片的alt和title替换为文章标题 0
23 帝国cms自定义列表模板里调用当前自定义列表的ID 0
24 在帝国cms会员控制面板中调用好友的方法技巧 0
25 帝国cms记录没有搜索到结果的搜索关键字入数据库方法 0
26 帝国CMS后台添加信息报错Duplicate entry 'xx' for key 'PRIMARY 0
27 帝国CMS系统安全设置之防御黑客攻击加固方法 0
28 帝国cms灵动标签调用多表多模型调用文章的方法 0
29 帝国cms用万能的灵动标签SQL语句调用一级栏目分类 0
30 帝国cms灵动标签调用的信息带tag和搜索关键字 0