网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 js解决movebox移动问题
内容
    本文为大家分享了js解决movebox移动问题，并且取消图片默认拖动事件的相关操作，供大家参考，具体内容如下
    html:
    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
      <link href="../Content/StyleSheet5.css" rel="stylesheet" /> 
      <script src="../Scripts/JavaScript5.js"></script> 
      <title></title> 
      <meta charset="utf-8" /> 
    </head> 
    <body> 
      <div id="center"> 
        <div id="black"></div> 
        <div id="movebox"> 
          <img id="moveimg" src="../Images/b.jpg"/> 
        </div> 
        <img id="bigimg" src="../Images/b.jpg" /> 
      </div> 
    </body> 
    </html>
    js:
    var movebox; 
    window.onload = function () { 
      movebox = document.getElementById("movebox"); 
      movebox.addEventListener("mousedown", function (e) { 
        if (e.button > 0) { 
          fun2(); 
          return false; 
        } 
        e.preventDefault && e.preventDefault(); //明哥：去掉图片拖动响应 狠重要 
        gen.x = e.clientX; 
        gen.y = e.clientY; 
        gen._x = movebox.offsetLeft; 
        gen._y = movebox.offsetTop; 
        gen.dx = gen.x - gen._x; 
        gen.dy = gen.y - gen._y; 
        document.addEventListener("mousemove",fun1,false); 
        document.addEventListener("mouseup", fun2, false); 
      }, false); 
    }; 
    var fun1 = function (e) { 
      gen.L = e.clientX - gen.dx; 
      gen.T = e.clientY - gen.dy; 
      var timefun = function () { 
        window.getSelection().removeAllRanges(); 
        if (gen.L < 100) 
          gen.L = 100; 
        else if (gen.L > 200) 
          gen.L = 200; 
        if (gen.T < 125) 
          gen.T = 125; 
        else if (gen.T > 175) 
          gen.T = 175; 
        setLT(movebox, gen.L, gen.T); 
      }; 
      setTimeout(timefun, 2); 
    }; 
    var fun2 = function () { 
      document.removeEventListener("mousemove", fun1, false); 
      document.removeEventListener("mouseuo", fun2, false); 
    }; 
    var gen = { 
      x: null, 
      y: null, 
      _x: null, 
      _y: null, 
      dx: null, 
      dy: null, 
      L: null, 
      T:null, 
    }; 
    var setLT = function (dom, L, T) { 
      dom.style.left = L + "px"; 
      dom.style.top = T + "px"; 
    };
    css:
    body { 
      position:absolute; 
      margin:0; 
      padding:0; 
    } 
    #center{ 
      position:absolute; 
      top:200px; 
      left:300px; 
      width:400px; 
      height:400px; 
      background-color:#808080; 
    } 
    #black{ 
      position:absolute; 
      width:400px; 
      height:400px; 
      z-index:80; 
      background-color:#000; 
      opacity:0.6; 
    } 
    #bigimg{ 
      z-index:50; 
      position:absolute; 
      left:100px; 
      top:125px; 
    } 
    #movebox{ 
      z-index:100; 
      position:absolute; 
      width:100px; 
      height:100px; 
      left:150px; 
      top:150px; 
      overflow:hidden; 
      cursor:move; 
      background-color:#ff6a00; 
    } 
    #moveimg{ 
      position:absolute; 
      left:-50px; 
      top:-25px; 
    } 
    以上就是本文的全部内容，希望对大家的学习有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/21 21:20:55