在淘宝页面中经常会见到鼠标放上商品照片后照片会放大，并且移动鼠标，放大区域也会变化，今天我们来完成方块跟着鼠标移动的案例

为了不占用页面位置，我们给方块设置为绝对位置 position：absolute，然后利用鼠标点击获取位置的方法：e.pageX 与 e.pageY 来获取鼠标当前位置，事件不再使用 click ，而是用mouseover，只要鼠标移动距离超过1px，就会执行该事件

  var ele=document.querySelector('div');document.addEventListener('click',function(){  //先点击一次才会使方块显示ele.style.display='block';document.addEventListener('mouseover',function(e){  //事件为鼠标移动就触发var x=e.pageX;  //获取当前的x坐标var y=e.pageY;  //获取当前的y坐标ele.style.left= x-50+'px';  // x-50 使鼠标位于盒子正中心ele.style.top=y-50+'px';  // y-50 使鼠标位于盒子正中心})})

完整代码：

 <style>body{background-color: rgb(124, 124, 124);}div{position: absolute;width: 200px;height: 200px;background-color: rgb(229, 255, 0);display: none;}</style>
</head>
<body><div></div>
<script>var ele=document.querySelector('div');document.addEventListener('click',function(){ele.style.display='block';document.addEventListener('mouseover',function(e){var x=e.pageX;var y=e.pageY;ele.style.left= x-50+'px';ele.style.top=y-50+'px';})})</script>

方块跟着鼠标移动的案例相关推荐

鼠标事件案例--带有hover样式的导航栏、div跟着鼠标移动而移动
由于这两个案例都比较简单,因此就不去过多的进行叙述,我们直接上代码看结果一.实现hover效果 <script>//创建ul标签,并设置相关样式var ul = document.cre ...
773-780---DOM事件高级（常用鼠标事件，案例：跟随鼠标的天使，常用的键盘事件，案例：模拟京东按键输入内容，案例：模拟京东快递单号查询）
文章目录事件高级 7 常用的鼠标事件 7.1常用的鼠标事件 7.2 鼠标事件对象案例:跟随鼠标的天使 8 常用的键盘事件 8.1 常用的键盘事件 8.2 键盘事件对象 8.3 ASCII 表案例 ...
html导航怎么跟着往下滚动,javascript,html_导航要跟着鼠标滚动向下滚动，用了jquery插件但是报错，请问大牛是什么原因？，javascript,html - phpStudy...
导航要跟着鼠标滚动向下滚动,用了jquery插件但是报错,请问大牛是什么原因? 导航要跟着鼠标向下滚动,用了jquery插件但是报错,请问大牛是什么原因? 代码如下: 宝龙安信科技 logo宝龙安信 ...
html点击控制盒子左右移动,JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例...
本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动.分享给大家供大家参考,具体如下: 1. 盒子跟着鼠标移动 content="width=device-width, user- ...
鼠标拖拽盒子跟着鼠标在页面任意位置移动
注意: ● 我们让盒子跟着鼠标在页面上移动,这个移动事件绑在页面上,而不是绑在盒子上,也就是绑在document上,不能绑在div上,不然你只能鼠标在盒子身上移动,在页面上移动就没效果: ● 只有当你 ...
java 鼠标动眼睛动_java实现眼睛跟着鼠标转动的跟踪眼代码
import java.html" target="_blank">java.applet.Applet; import java.awt.Color; impor ...
java鼠标经过代码_一段眼睛跟着鼠标转动的跟踪眼代码
import java.applet.Applet; import java.awt.Color; import java.awt.Dimension; import java.awt.Font; i ...
瞧一瞧看一看啦“一段眼睛跟着鼠标转动的跟踪眼代码”
import java.applet.Applet; import java.awt.Color; import java.awt.Dimension; import java.awt.Font; i ...
JavaScript控制div的移动跟着鼠标一起移动div
这篇文章就是来展示一下js的几个事件,来完成根据aswd来控制diiv的移动,还可以跟着鼠标一起移动. 下面就是我的代码: <!DOCTYPE html> <html> < ...

方块跟着鼠标移动的案例

完整代码：

方块跟着鼠标移动的案例相关推荐

最新文章

热门文章