zoukankan      html  css  js  c++  java
  • 用鼠标拖动图片的JS代码

    代码简介:

    用鼠标拖动一个图片移动,就像拖动一个层一样,这是一个JS拖动类代码,你可以无限制的增加图片,代码复用率比较高。

    代码内容:

    View Code
    <html>
    <HEAD>
    <title>用鼠标拖动图片的JS代码 - www.webdm.cn</title>
    <style type="text/css">
    <!--
    .dragme
    {position:relative;}
    -->
    </style>
    <script type="text/javascript">
    var ie=document.all;
    var nn6=document.getElementById && !document.all;
    var isdrag=false;
    var x,y;
    var dobj;

    function movemouse(e)
    {
    if (isdrag)
    {
    dobj.style.left
    = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top
    = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
    return false;
    }
    }

    function selectmouse(e)
    {
    var fobj = nn6 ? e.target : event.srcElement;
    var topelement = nn6 ? "HTML" : "BODY";
    while (fobj.tagName != topelement && fobj.className != "dragme")
    {
    fobj
    = nn6 ? fobj.parentNode : fobj.parentElement;
    }
    if (fobj.className=="dragme")
    {
    isdrag
    = true;
    dobj
    = fobj;
    tx
    = parseInt(dobj.style.left+0);
    ty
    = parseInt(dobj.style.top+0);
    x
    = nn6 ? e.clientX : event.clientX;
    y
    = nn6 ? e.clientY : event.clientY;
    document.onmousemove
    =movemouse;
    return false;
    }

    }
    document.onmousedown
    =selectmouse;
    document.onmouseup
    =new Function("isdrag=false");
    </script>
    </HEAD>
    <BODY>
    <div align="center"><img src="http://www.webdm.cn/images/wall1_s.jpg" class="dragme"></div>
    </body>
    </html>
    <br />
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!

    </p>

    代码来自http://www.webdm.cn/webcode/2eb66e07-29a5-493a-985f-01fe37ec1ca2.html

  • 相关阅读:
    python-study-08
    第一周代码整理
    python-study-阶段总结
    python-study-07
    二分查找数组中与目标数字(可以是浮点型)最近的数的位置
    寻找最大数
    零件分组(stick)
    走迷宫
    自然数的拆分问题 字典序
    素数环(回溯)
  • 原文地址:https://www.cnblogs.com/webdm/p/2314245.html
Copyright © 2011-2022 走看看