div 跟着鼠标移动

DIV跟着鼠标移动

div跟着鼠标移动，主要是更加movemove确定当前鼠标的位置，然后计算当前的div的位置，由于div是绝对布局，不占用文档的空间，只根据父布局来动态的变化，由这个我们就可以处理了。

创建一个跟着动的div，也可以使用动态创建div

<div style="background-color: red;width: 50;height:50px;position:absolute;left:0px;top:0px" id="mouse"><span>跟着动</span></div>

然后就是绑定鼠标移动的事件，这里还要计算一下滚动条的高度，这样就可以计算当前的移动div的left and top的值

 <script type="text/javascript">window.onload = function () {var div1 = document.getElementById("mouse");function getXY(eve) {var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;return {x : scrollLeft + eve.clientX,y : scrollTop + eve.clientY };}document.onmousemove = function (ev) {var oEvent = ev || event;var pos = getXY(oEvent);div1.style.left = pos.x + "px";;div1.style.top = pos.y + "px";}; document.oncontextmenu = function(){return false};     //禁止鼠标右键菜单显示document.onmouseup = function(e){     //在body里点击触发事件if(e.button===2){       //如果button=1（鼠标中键），button=2（鼠标右键），button=0（规定鼠标左键）alert("点击右键")}else if(e.button === 1){alert("点击了中键")}else if(e.button == 0){alert("点击左键")}} };</script>

代码

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>跟着鼠标移动</title><style type="text/css">body {width:2000px;height:2000px;}</style><script type="text/javascript">window.onload = function () {var div1 = document.getElementById("mouse");function getXY(eve) {var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;return {x : scrollLeft + eve.clientX,y : scrollTop + eve.clientY };}document.onmousemove = function (ev) {var oEvent = ev || event;var pos = getXY(oEvent);div1.style.left = pos.x + "px";;div1.style.top = pos.y + "px";}; document.oncontextmenu = function(){return false};     //禁止鼠标右键菜单显示document.onmouseup = function(e){     //在body里点击触发事件if(e.button===2){       //如果button=1（鼠标中键），button=2（鼠标右键），button=0（规定鼠标左键）alert("点击右键")}else if(e.button === 1){alert("点击了中键")}else if(e.button == 0){alert("点击左键")}} };</script>
</head>
<body><div style="background-color: red;width: 50;height:50px;position:absolute;left:0px;top:0px" id="mouse"><span>跟着动</span></div></body>
</html>

div 跟着鼠标移动相关推荐

鼠标事件案例--带有hover样式的导航栏、div跟着鼠标移动而移动
由于这两个案例都比较简单,因此就不去过多的进行叙述,我们直接上代码看结果一.实现hover效果 <script>//创建ul标签,并设置相关样式var ul = document.cre ...
让div跟着鼠标移动
朋友求助帖具体实现代码 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
JavaScript控制div的移动跟着鼠标一起移动div
这篇文章就是来展示一下js的几个事件,来完成根据aswd来控制diiv的移动,还可以跟着鼠标一起移动. 下面就是我的代码: <!DOCTYPE html> <html> < ...
html点击控制盒子左右移动,JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例...
本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动.分享给大家供大家参考,具体如下: 1. 盒子跟着鼠标移动 content="width=device-width, user- ...
鼠标拖拽盒子跟着鼠标在页面任意位置移动
注意: ● 我们让盒子跟着鼠标在页面上移动,这个移动事件绑在页面上,而不是绑在盒子上,也就是绑在document上,不能绑在div上,不然你只能鼠标在盒子身上移动,在页面上移动就没效果: ● 只有当你 ...
方块跟着鼠标移动的案例
在淘宝页面中经常会见到鼠标放上商品照片后照片会放大,并且移动鼠标,放大区域也会变化,今天我们来完成方块跟着鼠标移动的案例为了不占用页面位置,我们给方块设置为绝对位置 position:absolut ...
js实现页面上的图片跟着鼠标箭头移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Vue实现放大镜，但是放大图片跟着鼠标移动
Vue实现放大镜,但是放大图片跟着鼠标移动问题出现在:ref="big"放错位置,应该放在ing中 <template><div class="spe ...
jQuery实现图片跟着鼠标移动的效果
例子: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...
经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单效果图: 源码: <html><head> <meta charset="utf-8"> ...

div 跟着鼠标移动

DIV跟着鼠标移动

div 跟着鼠标移动相关推荐

最新文章

热门文章