咨询热线：020-82315523　18988993510　18988993505
网站空间和建站QQ923109991服务器租用QQ16764407 登录注册付款方式
服务中心
文章中心>建站知识>文章详情

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

文章来源：迅恒云计算2020-07-03 16:40:20浏览次数：

虚拟主机 服务器租用 服务器托管 企业建站 域名注册 云服务器

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

<!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{
        widthpx;
        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>

上一篇>>一个网络人员的必备的素质 下一篇>>网站推广前的准备工作要做好
迅恒运营的IDC数据中心机房介绍
机房名称 机房介绍 是否推荐
广州较场西路机房 中国电信5星级机房,华南骨干出口,广州市中心机房,交通便利,总带宽200G,为华南骨干出口。
广州人民中路机房 中国电信3星级机房,超高速的20Gx2主备双线路带宽直接接入ChinaNET骨干层。
广州天河科技园机房 天河软件园建中路4号,中国互联网应急中心机房,国家政府机关直属。多线接入骨干BGP线路。
电子商务部广州机房 天河软件建业路上(科韵路)的国际电子商务中心大厦甲级写字楼内,机房环境一流。多线接入骨干BGP线路。
广州电信加速器机房 位于广州市萝岗区开源大道1号企业加速器B1栋一楼,按照国际T3+及国标B+级标准建造，机房环境一流。多线接入骨干网。
广州移动旗锐机房 广州科学城南翔二路1号旗锐数字科技园区内，属于第三方私立机房,现由移动运营，从粤西汇聚节点直连CMNET骨干网。
广州移动南方基地机房 中国移动广州南方基地机房位于广州市天河软件园高塘大道333号,用于移动骨干网线路，是移动服务器托管优质机房。
东莞电信道滘机房 中国电信4星级机房,总带宽320G,可提供电信和多线BGP线路,华南骨干机房,稳定高速,性价比高。
东莞电信东城机房 中国电信4星级机房,总带宽320G,性价比高,可提供电信和多线BGP线路和200G集群硬件防火墙VIP防护。
东莞电信樟木头机房 中国电信4星级机房,总带宽320G,可提供电信和多线BGP线路和100G集群硬件防火墙企业级防护。
深圳互联港湾机房 深圳南山高新区中区软件大厦四楼，电信3星级机房，20G带宽接入骨干网络。
深圳南山科兴机房 位于深圳市南山区科技园科苑路15号科兴科学园，3星级机房，可提供双线接入等业务。
深圳百旺信机房 深圳市南山区西丽松白公路百旺信工业区A区(一区)一栋属于第三方机房，可提供双线接入等业务。
佛山电信信息大厦机房 佛山市汾江南路35号电信佛山分公司信息大厦8-9层,是中国电信3星级机房,可提供双线接入等业务。
中山电信火炬机房 机房位于中山市火炬区康乐大道47号电信3楼,是中国电信3星级机房,可提供双线接入等业务。
江苏徐州电信机房 机房位于江苏徐州市新城区镜泊东路4号,徐州市档案馆东侧，是中国电信3星级机房,可提供双线接入等业务。
江苏常州电信机房 机房位于江苏省常州市清凉路108号常州信息港，是中国电信4星级机房,可提供双线接入等业务。
香港TKO机房 机房靠近香港交易所的数据中心位置和香港商业中心，拥有PCCW、GTT、Cogent、Telia、TATA、CT、CN2、CU线路。
香港将军澳机房 机房在香港新界將軍澳工業邨駿昌街22號，与阿里云香港机房同属一栋楼，拥有多种线路接入。
香港新世界机房 香港新世界机房的海底电缆系统遍布全球，能直接连接多个国家，免备案，服务器租用、云服务器等业务。
香港NTT机房 香港NTT电讯机房，是一座专用数据中心，在香港大埔，免备案，提供服务器租用、VPS云服务器等业务。
美国洛杉矶机房 位于美国洛杉矶，直连全球，是全球带宽最集中的地方，是外贸企业首选，该机房只提供服务器租用业务。
美国加州DCS机房 位于美国加州，直连全球，是美国的华人机房，是外贸企业首选，该机房只提供服务器租用业务。
美国圣何塞机房 位于美国圣何塞，紧邻科技中心-硅谷，直连全球，是外贸企业首选，该机房只提供服务器租用业务。
韩国首尔KT机房 韩国首尔的江南区道谷洞数据中心，光纤直连电信(CN2)、移动、PCCW、NTT等网络核心骨干。
台湾中华电信机房 台湾中华电信机房位于台湾台北市114内湖区瑞光路68号3楼，是台湾对外最重要的电信枢纽之一。
菲律宾PLDT机房 菲律宾PLDT机房拥有PCCW、TATA、CT、CN2等线路接入，优化线路到中国大陆速度快，延迟低，网络稳定。
迅恒十多年IT企业和IDC运维经验为您提供优质服务
迅恒专注网站建设10多年，几十人技术团队，品质卓越，服务有保障！
  • 云虚拟主机

    ¥99元/年起 网站空间 原价：199元

  • 独立物理服务器

    ¥488/月起 物理机 原价：699元

  • 网站建设

    ¥580起 企业建站 原价：1999元起

    迅恒建站·ABOUT US

    迅恒专注于企业建站，海量精美网站风格模板供您选择！

迅恒是一家充满朝气蓬勃的互联网公司，坐落于羊城广州，拥有先进的管理理念，专业的技术团队。专注网站建设，为广大企业提供一站式企业建站服务。

01
全网品牌建站

帮您塑造行业品牌/企业品牌/产品品牌，快速缔造品牌美誉度

02
快速广泛传播

通过营销策划传播，快速提升网络知名度及曝光度

03
充分信任于你

通过对企业平台软硬实力深度包装，塑造公信力，让客户更信任你

04
高效转化成交

完善网站业务逻辑及在线客服沟通体系，快速提升询盘率及成交转化率

广州网站设计公司哪家好

    建站流程·PROCEDURE

    网络营销推广的第一步就是做一个属于自己的网站

  • 沟通联系

    提出需求，咨询报价

  • 达成协议

    交流达成详细建站协议

  • 支付费用

    支付建站相关费用

  • 建站开发

    根据客户需求，制作网站

  • 验收

    客户验收网站

  • 提交上线

    验收合格，解析域名上线

  • 售后服务

    一对一的售后服务客服

      • 我们的优势·OUR STRENGTHS

      做网站，为什么要选迅恒建站？

  • 技术团队

    专业的设计团队、技术团队，为客户提供专业的技术服务支持

  • 源码交付

    客户查验合格，提供源码交付/FTP信息。网站商业授权，避免产权纠纷

  • 四合一建站多终端展示

    网站能够在CP+平板+手机+小程序 完美响应展示。

  • 无隐形收费

    所有收费项公开透明，正规签订合同，合同清楚明确

  • 高端设计

    提供网站个性化定制设计，拒绝千篇一律

  • 安全稳定

    我司与华为云/腾讯云长期合作，采用安全稳定服务器，保障网站安全稳定运行

    • 迅恒累计为上万网站稳定运行 100000000秒
    机房接入电信带宽400G、联通带宽200G、移动带宽100G，直连核心骨干网络；
    所有重要网络节点和核心设备均采用华为电信级交换设备，网络总体交换能力高达684G，网络联通率达到99.99%，
    并且多点冗余备份，提高网络性能，避免单点故障。
  • 快速导航
  • 域名注册
  • 独立服务器租用
  • 网站空间
  • 云服务器
  • 企业网站建设
  • 广州迅恒信息科技有限公司：
  • 增值电信业务经营许可证和ICP备案 粤B2-20061054
    •
  • 公司业务咨询电话：
  • 020-82315523
    •
  • 公司企业QQ/商务QQ：
  • 923109991 16764407 20300996
    •
  • 销售经理：18988993510 13533213185
  • 备案咨询和售后服务电话：18988993505
    •
    专注广州服务器托管
    请加销售经理微信
    Copyright 2005-2020 迅恒 版权所有 　 公司地址:广州市天河区中山大道中路77号　 广州机房:较长西路21号广州电信超级信息港 香港机房:香港新界葵涌葵丰街钟意恒胜中心　 粤公网安备44010602002183