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. JavaScript中Map和ForEach的区别

    译者按: 惯用Haskell的我更爱map. 原文: JavaScript — Map vs. ForEach - What’s the difference between Map and ForE ...

  2. input file图片上传

    <div class="div-title"> <h5>图片上传</h5> <div class="photo-box" ...

  3. JS单体内置对象之Math常用方法（min，max，ceil，floor，round，random等）

    1.min()和max()方法 Math.min()用于确定一组数值中的最小值.Math.max()用于确定一组数值中的最大值. alert(Math.min(2,4,3,6,3,8,0,1,3)); ...

  4. Windows 批处理获取某路径下最新创建的文件的名称

    批处理获取某路径下最新创建的文件的名称 by:授客 QQ:1033553122 echo off setlocal enabledelayedexpansion rem 设置文件所在目录 set sr ...

  5. JMeter 配置元件之HTTP Cookie Manager 介绍

    配置元件之HTTP Cookie Manager 介绍   by:授客 QQ:1033553122 测试环境 apache-jmeter-2.13 1.   Cookie管理器介绍 Cookie Ma ...

  6. 入手FUJIFILM X100S

    有个朋友买了,用了说很好,于是在秋叶原的yodobashi体验了好几个星期天之后,终于下定决心出手了,购入了黑色限量版,还能用优惠券减免了200美元,最后全套1200美元.黑色限量版还包括了转接环,那 ...

  7. (办公)eclipse连接github cannot open git-upload-pack(git-receive-pack)

    原文地址:https://blog.csdn.net/royal__moon/article/details/79427431 打开eclipse安装目录下的eclipse.ini添加一句:-Dhtt ...

  8. Orchard详解--第一篇 介绍

    Orchard是一个开源的内容管理系统(CMS),它提供了简单的向导式的安装方法,用于快速建站(如WordPress).对于.Net的开发者来说,Orchard有更好的学习价值,所以本系列文章将对Or ...

  9. RMAN restore fails with ORA-01180: can not create datafile 1

      最近在验证.测试备份有效性时,遇到了"ORA-01180: can not create datafile 1"这个错误,顺便结合metalink的官方文档"RMAN ...

  10. django加密解密api

    分别给出了两个API,一个创造密码,一个验证密码正好满足需求.于是赶紧试试: 首先,引入模块: 1 >>> from django.contrib.auth.hashers impo ...