【js】鼠标跟随效果

1.实现思想

①鼠标跟随效果，发生在鼠标移动的时候，故需要使用onmousemove事件
②当页面内容多于1屏时，就需要考虑滚动距离的问题
③想实现鼠标跟随的效果需要：元素的left位置 = 鼠标当前的x坐标值 + 水平方向的滚动距离元素的top位置 = 鼠标当前的y坐标值+垂直方向的滚动距离
④元素要为定位元素

2.demo

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>鼠标跟随效果</title><style>body {margin: 0;padding: 0}#to_top {width: 30px;height: 40px;padding: 20px;font: 14px/20px arial;text-align: center;background: #06c;position: absolute;cursor: pointer;color: #fff}</style><script>window.onload = function() {var oTop = document.getElementById("to_top");document.onmousemove = function(event) {var oEvent = event || window.event;var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;oTop.style.left = oEvent.clientX + scrollleft + 10 + "px";oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";}}</script></head><body style="height:1000px;"><a href="#">文字</a><div id="to_top">鼠标跟随</div></body></html>

3.如果计算距离时不加滚动距离的效果：

滚动条没有滚动时的效果：

滚动条滚动到底部的效果：

作者：smile.轉角

QQ：493177502

转载于:https://www.cnblogs.com/websmile/p/8807691.html

【js】鼠标跟随效果相关推荐

怎么给html增加鼠标跟随,js实现简单鼠标跟随效果的方法
本文实例讲述了js实现简单鼠标跟随效果的方法.分享给大家供大家参考.具体分析如下: 鼠标跟随,顾名思义,就是在鼠标移动的时候,有个动画跟随着鼠标一起移动. 要点一: var oEvent = evt ...
js实现鼠标跟随效果
在平时开发中,实现鼠标跟随效果并不是很常见,但是在一些个人博客和个人网站中这个效果有时候会用到有些游戏网站中也会用到这个效果.这里分享的是一个例子.代码如下,, 注意我这里跟随的是一个图片,也可以根 ...
php鼠标跟随特效,原生js实现鼠标跟随效果
鼠标跟随效果 *{margin: 0;padding: 0;} img{position:absolute;top:0;left:0;} (function(window){ // 获取对象 var ...
不可思议的纯 CSS 实现鼠标跟随效果
不可思议的纯 CSS 实现鼠标跟随效果原文:不可思议的纯 CSS 实现鼠标跟随效果直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS ...
纯 CSS 实现鼠标跟随效果
欢迎微信关注Jerome blog,用技术的心去生活鼠标跟随效果,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为. ...
mousemove实现图片鼠标跟随效果
前言用html+css+JavaScript实现了一个图片鼠标跟随效果一.思路鼠标不断的移动,使鼠标移动事件:mousemove: 在页面中移动,给document注册事件: 图片要移动距离,而 ...
鼠标跟随 html,鼠标跟随效果.html
鼠标跟随效果 .mouse-container{ background: #000; width: 800px; margin:20px auto; } table > tr > td { ...
Revit二次开发之“PromptForFamilyInstancePlacement()函数动态拖动/鼠标跟随”效果
布置设备的时候,希望有个拖动的效果,这个函数可以实现. //跟随鼠标拖动效果 [Transaction(TransactionMode.Manual)] [Regeneration(Regenerat ...
鼠标跟随效果html,javascript 鼠标跟随特效代码及理解
javascript 鼠标跟随特效 *{ margin: 0; padding: 0; } body{ height: 1000px; } div{ width: 50px; height: 50px ...

【js】鼠标跟随效果

【js】鼠标跟随效果相关推荐

最新文章

热门文章