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

  • 相关阅读:
    indexDB的用法
    append动态生成的元素,无法触发事件的原因及解决方案
    jquery中attr()和prop()的区别
    arguments.callee
    meter标签度量衡如何改变颜色
    Nginx入门
    linux中的权限管理
    python_面向对象
    ORM
    Flask入门
  • 原文地址:https://www.cnblogs.com/webdm/p/2314245.html
Copyright © 2011-2022 走看看