JavaScript练习（一）——跟随鼠标移动

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1 {width: 100px;height: 100px;background-color: blueviolet;/**开启绝对定位*/position: absolute;}</style><script>window.onload = function () {var div1 = document.getElementById("box1");//注意这里不能只绑定给颜色块，需要给整个DOM绑定，否则可能无法向上移动document.onmousemove = function (event) {event=event||window.event//clientX和clientY是相对于整个页面的坐标//pageX和pageY是相对于可见页面的坐标//一般这种区别在于有滚动条时，可保持鼠标和滑块的相对位置不变var left = event.clientX;var top = event.clientY;div1.style.left = left + "px";div1.style.top = top + "px";//由于需要处理兼容性问题//我们要获取滚动条的距离，横向纵向//chrome认为浏览器是body的，用body.scrollTop获取//火狐等浏览器认为是html的/*var left = event.clientX;var top = event.clientY;var st =document.body.scrollTop||document.documentElement.scrollTop;var sl=document.body.scrollLeft||document.documentElement.scrollLeft;div1.style.left = left + st+"px";div1.style.top = top +sl +"px";*/}}</script>
</head><body style="height: 1000px;"><div id="box1"></div>
</body></html>

该练习可以让一个对象跟随鼠标的移动而移动。

主要的问题：

1.给需要移动的标签对象添加绝对定位，否则不会移动

2.给整个窗口绑定鼠标移动事件，否则只能在标签块中获取移动事件

3.处理兼容性问题，获取参数时和获取坐标时需要处理兼容性，处理坐标时的兼容性需要获取滚动条移动的距离

4.处理滚动条移动时获取坐标的原点问题，page获取的是当前可见页面的坐标，而client获取的整个网页的坐标系坐标

JavaScript练习（一）——跟随鼠标移动相关推荐

javascript元素跟随鼠标在指定区域运动
元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中,下面是完整的Demo: <!DOCTYPE html> <html lang="en"> <h ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
html的盒子随页面动,JavaScript实现跟随鼠标移动的盒子
这篇文章主要为大家详细介绍了JavaScript实现跟随鼠标移动的盒子,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JavaScript实现跟随鼠 ...
JavaScript div跟随鼠标移动
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>di ...
JavaScript实现一串div跟随鼠标移动效果（幻影效果）
JavaScript实现一串div跟随鼠标移动效果上一篇博文我们说到了利用JavaScript实现div块跟随鼠标移动的效果.现在来讲一个进阶版,实现一串div跟随鼠标移动效果,鼠标幻影效果.如图: ...
JavaScript实现心形div块跟随鼠标移动(幻影效果)
JavaScript实现心形div块跟随鼠标移动(幻影效果) 上篇博客讲解了怎样利用JavaScript实现一串div块跟随鼠标指针移动,然后有轩辕问我,想给女朋友做一个好看的可不可以.现在我们来实现 ...
利用javaScript+css实现图片跟随鼠标联动效果页面
以前做小型的项目的时候总想着可以做一个很炫酷的主页面来,以前做过一个汽车销售管理系统的主页面,觉得很不错.虽然写这个的人不是我,但是我们觉得可以保存下来以便日后使用和参考.先看一下效果图!这个是可以跟 ...
javascript实现窗口随着鼠标移动且移动路径重现
现在实现一个挺有趣的示例,页面中出现一个窗口,鼠标在窗口指定位置区域内按下拖动,窗口会随着鼠标一起移动,松开鼠标,停止移动,点击"轨迹重现",窗口会自动走一遍移动路径.请看代码: ...
html浮动跟随鼠标,jQuery 图片跟随鼠标浮动
不知你有没注意到我的网站首页,上面浮动着一层雪花的背景,并且随着鼠标的移动也在移动着. 本文主要讲述了如何判断鼠标的位置,从而实现图片跟随鼠标进行浮动.为了方便查看和理解,在Demo的左下角把各个参数 ...
jQuery特效 | 导航底部横线跟随鼠标缓动
jQuery特效 | 导航底部横线跟随鼠标缓动 2月初,接收到了公众号读者的效果需求,希望能够讲解这样一个实例: 横排的导航,下边框是一条横线,随着鼠标移入某个导航,横线滑动到相应位置. 今天就针对该 ...

JavaScript练习（一）——跟随鼠标移动

JavaScript练习（一）——跟随鼠标移动相关推荐

最新文章

热门文章