js实现鼠标拖动效果代码,java实现鼠标拖动

更新：2022-11-18 12:05

本文目录一览：

1、js代码实现鼠标移动到上面一个效果，鼠标离开效果保持
2、鼠标事件，js代码实现div移动功能
3、鼠标上下拖动网页的JS

js代码实现鼠标移动到上面一个效果，鼠标离开效果保持

eg: jquery实现方法 你要加的样式为.active ul--li实现tab

$(".li").on("mouseover", function() {
  $("li").removeClass("active");
  $(this).addClass("active");
});

ok!!

鼠标事件，js代码实现div移动功能

首先引入jquery框架，例如 jquery-1.7.1.js

// $("#div1")表示要移动的div
$("#div1").animate({ top: '+=200px' }, "slow"); // 向上移动200px
$("#div1").animate({ top: '-=200px' }, "slow"); // 向下移动200px，回到原来的位置

鼠标上下拖动网页的JS

写好了，注意禁止文本选择功能只兼容了IE，火狐下只禁止了鼠标右键，因为mousedown事件有冲突，你可以通过CSS来实现，达到完美兼容。CSS禁止文本选择网上有资料我就不写了。

<script type="text/javascript">
  document.onmousedown = function () {
    document.onmousemove = function (ev) {
      var oEvent = ev || event;
      window.scrollTo(oEvent.clientX, oEvent.clientY);
    };
    document.onmouseup = function () {
      document.onmouseup = null;
      document.onmousemove = null;
    };
  };
  document.oncontextmenu = function () {
    return false;
  };
  window.onload = function () {
    var oBody = document.getElementsByTagName('body');
    oBody[0].oncopy = function () {
      return false;
    };
    if (document.all) {
      document.onselectstart = function () {
        return false;
      };
    }
  };
</script>