【js】鼠标跟随效果
生活随笔
收集整理的這篇文章主要介紹了
【js】鼠标跟随效果
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1.實現(xiàn)思想
①鼠標(biāo)跟隨效果，發(fā)生在鼠標(biāo)移動的時候，故需要使用onmousemove事件 ②當(dāng)頁面內(nèi)容多于1屏?xí)r，就需要考慮滾動距離的問題 ③想實現(xiàn)鼠標(biāo)跟隨的效果需要：元素的left位置 = 鼠標(biāo)當(dāng)前的x坐標(biāo)值 + 水平方向的滾動距離元素的top位置 = 鼠標(biāo)當(dāng)前的y坐標(biāo)值+垂直方向的滾動距離 ④元素要為定位元素2.demo
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>鼠標(biāo)跟隨效果</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">鼠標(biāo)跟隨</div></body></html>?3.如果計算距離時不加滾動距離的效果：
滾動條沒有滾動時的效果：
?
?
滾動條滾動到底部的效果：
?
?
?
?
?
作者：smile.轉(zhuǎn)角
QQ：493177502
轉(zhuǎn)載于:https://www.cnblogs.com/websmile/p/8807691.html
總結(jié)
以上是生活随笔為你收集整理的【js】鼠标跟随效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 行内编辑时间框
- 下一篇： 全民Tv帝师称称通过EOS赚了几千万，可