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. Java中对象和json互相转换的工具类

    package com.Dingyu.util; import java.util.List; import com.fasterxml.jackson.core.JsonProcessingExce ...

  2. js-string.js

    //小结// string.charAt(pos) 返回string中pos所在位置的字符 var name = "Cynthia"; var i = name.charAt(0) ...

  3. 用webpack2.0构建vue2.0超详细精简版

    初始化环境 npm init -y 初始化项目 安装各种依赖项 npm install --save vue 安装vue2.0 npm install --save-dev webpack@^2.1. ...

  4. Spring学习之旅（六）Spring AOP工作原理初探

    AOP(Aspect-Oriented  Programming,面向切面编程)是Spring提供的关键技术之一. AOP基于IoC,是对OOP(Object-Oriented Programming ...

  5. JMeter 后置处理器之正则表达式提取器详解

    后置处理器之正则表达式提取器详解   by:授客 QQ:1033553122 1. 添加正则表达式提取器 右键线程组->添加->后置处理器->正则表达式提取器 2. 提取器配置介绍 ...

  6. leetcode-217存在重复元素

    leetcode-217存在重复元素 题意 给定一个整数数组,判断是否存在重复元素. 如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 示例 1: ...

  7. 堆栈的应用——用JavaScript描述数据结构

    栈(stack)又名堆栈,它是一种运算受限的线性表.其限制是仅允许在表的一端进行插入和删除运算.这一端被称为栈顶,相对地,把另一端称为栈底. 一.实现一个栈类Stack 基于堆栈的特性,可以用数组做线 ...

  8. 记一次坑爹的ORA-01152&ORA-01110错误

    最近做RMAN还原时遇到了一次非常坑爹的ORA-01152&ORA-01110错误.遇到的具体错误信息如下所示: RMAN> alter database open resetlogs; ...

  9. C#-循环语句（六）

    for循环 格式: for(表达式1;循环条件;表达式2) { 循环体; } 解释:先执行表达式1,再判断循环条件是否为真,如果为真则执行循环体,执行完成后再执行表达式2 再次判断循环条件,由此一直反 ...

  10. MongoDB数据创建与使用

    MongoDB数据创建与使用 创建数据库 代码功能:读取本地文本文件,并保存到数据库中 import pymongo #连接mongo数据库 client = pymongo.MongoClient( ...