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】鼠标跟随效果的更多相关文章
-
鼠标跟随效果 vue或者js通用
this.$refs.tooltip.getBoundingClientRect() => 用于获取某个元素相对于视窗的位置集合.集合中有top, right, bottom, left等属性. ...
-
不可思议的纯 CSS 实现鼠标跟随效果
直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...
-
JS——鼠标跟随
注意事项: 1.pageX.pageY的兼容问题 2.使目标移动鼠标中间位置还必须减去盒子宽度的一半 <!DOCTYPE html> <html lang="en" ...
-
JS框架_(JQuery.js)动画效果鼠标跟随
百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...
-
js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
-
模仿bootstrap做的 js tooltip (添加鼠标跟随功能)
主要思路: 使用jquery hover方法,当进入时显示tooltip,移出时隐藏tooltip当设定为鼠标跟随时,使用mousemove事件显示tooltip根据tooltip显示位置设置,计算t ...
-
js鼠标移入移出效果【原】
<HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...
-
js 鼠标效果
一. 鼠标悬停效果和离开效果 鼠标效果和v-if 配合使用效果很好 <a class="all btn" href="#" v-on:mouseover= ...
-
【前端】javascript实现鼠标跟随特效
实现效果: 实现代码: <!DOCTYPE html> <html> <head> <title>鼠标跟随</title> <meta ...
随机推荐
-
ThinkPHP缓存微信公众号access_token
access_token作为微信的全局票据,在高级接口中需要频繁调用,其有效期为7200秒,即2小时,而微信官方对调用Token的次数有限制(参见接口频率限制说明),获取access_token每日限 ...
-
Yii widget使用
关于widgets,他们在yii中的关系如下 system.web.widgets 系统自带最基本的widget zii.widgets 是基本扩展 zii.widgets.grid 是基本扩展的重要 ...
-
js继承之原型链继承
面向对象编程都会涉及到继承这个概念,JS中实现继承的方式主要是通过原型链的方法. 一.构造函数.原型与实例之间的关系 每创建一个函数,该函数就会自动带有一个 prototype 属性.该属性是个指针, ...
-
java常用的框架介绍
一.SpringMVC http://blog.csdn.net/evankaka/article/details/45501811 Spring Web MVC是一种基于Java的实现了Web MV ...
-
Mysql数据库的二进制安装和基础入门操作
前言:Mysql数据库,知识非常的多,要想学精学通这块知识,估计也要花费和学linux一样的精力和时间.小编也是只会些毛皮,给大家分享一下~ 一.MySQL安装 (1)安装方式: 1 .程序包yum安 ...
-
openGL学习----相机
0.参考:https://learnopengl-cn.github.io/01%20Getting%20started/09%20Camera/ 0.0其实相机就是搞清楚cameraPos,came ...
-
IDC：时钟系统
ylbtech-IDC:时钟系统 主要应用于要求有统一时间进行生产,调度的单位如:电力,机场.轻轨.地铁.体育场馆.酒店.医院.部队.油田.水利工程等领域.大区域时钟系统主要由母钟和多台子钟构成. 1 ...
-
D3.js 入门教程
最近需要用到d3, 记录下d3的教程 网上搜了几个关于d3的教程 D3.js 入门教程 http://wiki.jikexueyuan.com/project/d3wiki/author.h ...
-
puma(5300✨) Rails的一个多线程，高并发处理的web server
https://github.com/puma/puma 在开发和产品环境下,Puma是一个简单,快速,多线程,并高并发highly concurrent HTTP1.1server for Ruby ...
-
ETC系统简介
ETC:电子不停车系统 主要由两部分构成:OBU(车载单元,又叫电子标签)和RSU(路基单元,包括天线) 其中OBU里插有用户卡(一般是和银行联名发行的信用卡) 而RSU包括路基天线,PSAM卡,通过 ...