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 +  + "px";

                    oTop.style.top = oEvent.clientY + scrolltop +  + "px";

                }

            }

        </script>

    </head>

    <body style="height:1000px;">

        <a href="#">文字</a>

        <div id="to_top">鼠标跟随</div>

    </body>

</html>

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

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

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

作者：smile.轉角

QQ：493177502

【js】鼠标跟随效果的更多相关文章

  1. 鼠标跟随效果 vue或者js通用

    this.$refs.tooltip.getBoundingClientRect() => 用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. ...

  2. 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...

  3. JS——鼠标跟随

    注意事项: 1.pageX.pageY的兼容问题 2.使目标移动鼠标中间位置还必须减去盒子宽度的一半 <!DOCTYPE html> <html lang="en" ...

  4. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  5. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  6. 模仿bootstrap做的 js tooltip (添加鼠标跟随功能)

    主要思路: 使用jquery hover方法,当进入时显示tooltip,移出时隐藏tooltip当设定为鼠标跟随时,使用mousemove事件显示tooltip根据tooltip显示位置设置,计算t ...

  7. js鼠标移入移出效果【原】

    <HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...

  8. js 鼠标效果

    一. 鼠标悬停效果和离开效果 鼠标效果和v-if 配合使用效果很好 <a class="all btn" href="#" v-on:mouseover= ...

  9. 【前端】javascript实现鼠标跟随特效

    实现效果: 实现代码: <!DOCTYPE html> <html> <head> <title>鼠标跟随</title> <meta ...

随机推荐

  1. PS把图片P到老树干上，变成老树成精！

    1,两张图片: 2,把人像图片拉到另一张图片上,Ctrl+T适当缩放,放到树干合适的地方. 3,人像--Ctrl+Shift+U 去色---复制树图片(背景)放第一张---正片叠底. 4,选中两张图片 ...

  2. 记录微信小程序报错 Unexpected end of JSON input;at pages/flow/checkout page getOrderData function

    微信小程序报错 Unexpected end of JSON input;at pages/flow/checkout page getOrderData function 这个报错是在将数组对象通过 ...

  3. [jQuery]循环遍历改变a标签的href

    把info类下面所有的a标签链接后天加"#article". jQuery(document).ready(function($){ $('.info a').each(funct ...

  4. SPOJ1811 LCS - Longest Common Substring(后缀自动机)

    A string is finite sequence of characters over a non-empty finite set Σ. In this problem, Σ is the s ...

  5. 13张动图助你彻底看懂马尔科夫链、PCA和条件概率！

    13张动图助你彻底看懂马尔科夫链.PCA和条件概率! https://mp.weixin.qq.com/s/ll2EX_Vyl6HA4qX07NyJbA [ 导读 ] 马尔科夫链.主成分分析以及条件概 ...

  6. Link Between SAP SD, MM & FI

    Link Between SAP SD, MM & FI 1. In SAP you will always get integration with other modules. SD wi ...

  7. 在viewPager中双指缩放图片，双击缩放图片，单指拖拽图片

    我们就把这个问题叫做图片查看器吧,它的主要功能有: (项目地址:https://github.com/TZHANHONG/ImageViewer/releases/tag/1.0,里面的MyImage ...

  8. Spring的原理性总结

    一.Bean的生命过程 Bean的生命过程可以借鉴Servlet的生命过程,了解其生命过程对于不管是思想还是以后的使用都很有帮助: Bean可以通过两种方式进行加载,分别是使用BeanFactory ...

  9. 【转载】java架构师进阶之路

    Java架构师,应该算是一些Java程序员们的一个职业目标了吧.很多码农码了五六年的代码也没能成为架构师.那成为Java架构师要掌握哪些技术呢,总体来说呢,有两方面,一个是基础技术,另一个就是组织能力 ...

  10. react-router-dom v^4路由、带参路由的配置

    首先安装路由 npm install --save react-router-dom 新建一个router.js文件 然后我们的router.js代码如下↓ import React from 're ...