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. 掌握PHP垃圾回收机制

    php的垃圾回收机制可以简单总结为 引用计数 写时复制 COW机制, 本文主要和大家分享掌握php垃圾回收机制的知识,希望能帮助到大家. 引用计数基本知识 官网的解答如下 每个php变量存在一个叫”z ...

  2. 有状态(Stateful)与无状态(Stateless)

    1.有状态(Stateful): 有数据存储功能.有状态对象(Stateful Bean),就是有实例变量的对象,可以保存数据,类里面有成员变量,而且成员变量是可变的,是非线程安全的.在不同方法调用间 ...

  3. React 入门学习笔记整理目录

    React 入门学习笔记整理(一)--搭建环境 React 入门学习笔记整理(二)-- JSX简介与语法 React 入门学习笔记整理(三)-- 组件 React 入门学习笔记整理(四)-- 事件 R ...

  4. IntelliJ IDEA 编译Java程序出现 'Error:java: 无效的源发行版: 9' 的解决方案

    最新安装的IntelliJ IDEA 2018.1编译器,创建Java Project,并选择之前安装好的Eclipse配置的JDK,如图所示: 在工程中添加 Main.class, main函数中写 ...

  5. leetcode-978. 最长湍流子数组

    leetcode-978. 最长湍流子数组 Points 数组 DP 题意 当 A 的子数组 A[i], A[i+1], ..., A[j] 满足下列条件时,我们称其为湍流子数组: 若 i <= ...

  6. eclipse配置环境变量 （特别是输入javac无显示问题）

    下载JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html 最近win10恢复了一下系统,重新给eclipse配一 ...

  7. Microsoft SQL Server 17导出xlsx文件时报错：The 'Microsoft.ACE.OLEDB.12.0' provider is not registered on the local machine. (System.Data)

    导出数据时报错: 如果你是导出office 2007格式 TITLE: SQL Server Import and Export Wizard ---------------------------- ...

  8. C# 反射给对象赋值遇到的问题——类型转换

    反射给对象赋值遇到的问题——类型转换 给一个对象属性赋值可以通过PropertyInfo.SetValue()方式进行赋值,但要注意值的类型要与属性保持一致.    创建对象实例的两种方法: 1. 1 ...

  9. 洗礼灵魂，修炼python（65）--爬虫篇—BeautifulSoup：“忘掉正则表达式吧，我拉车养你”

    前面解析了正则表达式,其实内容还挺多的对吧?确实挺适用的,不仅是python,其他语言或者web前端后端基本都要掌握正则表达式知识,但是你说,这么多,要完全的掌握,灵活运用的话,得搞多久啊?并且如果一 ...

  10. 【MM系列】SAP基本计量单位更改

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP基本计量单位更改   前言部分 ...