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. crontab架构和格式

    crontab架构图 分时日月周*****my command(可以是一个linux命令,也可以是一个脚本文件,可以是shell格式也可以是python格式,也可是java格式.....) 按照格式编 ...

  2. 洛谷P4588 [TJOI2018]数学计算(线段树)

    题意 题目链接 Sol TJOI怎么全是板子题 对时间开个线段树,然后就随便做了.... #include<bits/stdc++.h> using namespace std; cons ...

  3. Python-Django 整合Django和jquery-easyui

    整合Django和jquery-easyui by:授客 QQ:1033553122 测试环境 win7 64 Python 3.4.0 jquery-easyui-1.5.1 下载地址1:http: ...

  4. C# 简单实现直线方程，抛物线方程

    本例子是简单的在WinForm程序中实现在坐标系中绘制直线方程,抛物线方程,点.重新学习解析几何方面的知识.仅供学习分享使用,如有不足之处,还请指正. 涉及知识点: 直线方程的表达方式:一般表达式Ax ...

  5. vue的diff算法

    前言 我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时, ...

  6. LeetCode题解之 Intersection of Two Arrays

    1.题目描述 2.问题分析 借助于set来做. 3.代码 class Solution { public: vector<int> intersection(vector<int&g ...

  7. MyBatis笔记----报错：Exception in thread "main" org.apache.ibatis.binding.BindingException: Invalid bound statement (not found)解决方法

    报错 Exception in thread "main" org.apache.ibatis.binding.BindingException: Invalid bound st ...

  8. 前后端分离djangorestframework——路由组件

    在文章前后端分离djangorestframework——视图组件 中,见识了DRF的视图组件强大,其实里面那个url也是可以自动生成的,就是这么屌 DefaultRouter urls文件作如下调整 ...

  9. SqlServer执行Insert命令同时判断目标表中是否存在目标数据

    针对于已查询出数据结果, 且在程序中执行Sql命令, 而非数据库中的存储过程 INSERT INTO TableName (Column1, Column2, Column3, Column4, Co ...

  10. 自动化测试基础篇--Selenium中数据参数化之TXT

    摘自https://www.cnblogs.com/sanzangTst/p/7722594.html 一.搜索参数化 在TXT文件中保存需要搜索的内容: 测试代码: 1 #!/usr/bin/env ...