几种实用的JavaScript鼠标特效,在我们平时网页设计中，鼠标特效可以说是常常会用到，那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效，希望对大家有用。......
2023-03-17 533 JAVASCRIPT 鼠标
如何设置div鼠标浮动效果
来源：互联网
2023-03-16 23:56:57 94
浏览一些网页时，曾经遇到过在鼠标移动时，会跟随着一个可爱的图标，当时看到觉得这效果挺好的，挺有新意的。
现在我们一起来实现下这个效果吧。
方法/步骤
首先我们在html里定义一个div，id为‘mouse_div’，然后定义该div的样式，主要是定义position，让其绝对定位，代码如图。
然后通过JS脚本来做随鼠标移动的效果。
先引入jquery脚本，因为用到jquery操作dom。
然后定义一个moving方法： function moving(e) {｝，该方法接受一个参数，是鼠标移动时的事件event，在该事件里可以获取到clientX和clientY属性，就是鼠标的相对于页面上的X，Y坐标。
把这二个值分别设置到移动div的left, top样式里就可以了。代码如图
最后添加代码，在页面加载完后，给页面添加鼠标mousemove事件，在事件函数里，调用moving方法，就实现div鼠标浮动效果
刷新页面，可以看到现在的效果如图。
效果是实现了，但我们做一些美化，把移动的div做得漂亮一点。
先把div里的文字去掉。我们不显示文字，显示一张图片。
然后修改div的样式，添加背景图，设置div的长度和宽度，代码如图
再次看下页面效果，现在随鼠标移动的是一个漂亮的蝴蝶了：）
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JAVASCRIPT
相关文章
- 详细阅读
-
如何开始学习javascript详细阅读
如何开始学习javascript,html是网页的内容，c是网页的格式，h是网站的后台，j是网站的前端，那么如何学习j，才能高效？......
2023-03-17 258 JAVASCRIPT
- 详细阅读