实现效果:

实现代码:

<!DOCTYPE html>

<html>

<head>

	<title>鼠标跟随</title>

	<meta charset="utf-8">

	<style type="text/css">

		body{

			height: 5000px;

		}

		div{

			position: absolute;

			border: 1px solid #ccc;

			cursor: pointer;

			width: 100px;

			height: 100px;

			background-color: #03c03c;

			opacity: 0.8;

		}

	</style>

</head>

<body>

<div></div>

<script type="text/javascript" src="myScroll.js"></script>

<script type="text/javascript">

	// 鼠标跟随

	// pageY和pageX的ie67ie兼容写法

	// 在页面的位置 = 看得见的 + 看不见的

	// pageY/pageX = event.clientY/clientX + scroll().top/scroll().left

	var obj = document.getElementsByTagName("div")[0];

	var timer = null;

	var targetX = 0,

		targetY = 0,

		leaderX = 0,

		leaderY = 0;

	// 给整个文档绑定点击事件获取鼠标位置

	document.onclick = function(event){

		// 兼容获取事件对象

		event = event || window.event;

		// 鼠标在页面的位置 = 被卷去的部分 + 可视区域部分

		var pageY = event.pageY || scroll().top + event.clientY;

		var pageX = event.pageX || scroll().left + event.clientX;

		targetY = pageY - obj.offsetHeight/2;

		targetX = pageX - obj.offsetWidth/2;

		// 清除定时器

		clearInterval(timer);

		timer = setInterval(function(){

			// X,先左右,后上下

			// 为盒子的位置获取值

			leaderX = obj.offsetLeft;

			// 获取步长

			var stepX = (targetX - leaderX)/10;

			// 二次处理步长

			stepX = stepX > 0 ? Math.ceil(stepX) : Math.floor(stepX);

			leaderX = leaderX + stepX;

			// 赋值

			obj.style.left = leaderX + "px";

			// Y

			leaderY = obj.offsetTop;

			var stepY = (targetY - leaderY)/10;

			stepY = stepY > 0 ? Math.ceil(stepY) : Math.floor(stepY);

			leaderY = leaderY + stepY;

			obj.style.top = leaderY + "px";

		}, 30);

	}

</script>

</body>

</html>

　　myScroll.js

function scroll() {  // 开始封装自己的scrollTop

    if(window.pageYOffset !== undefined) {  // ie9+ 高版本浏览器

        // 因为 window.pageYOffset 默认的是0,所以需要判断

        return {

            left: window.pageXOffset,

            top: window.pageYOffset

        }

    }

    else if(document.compatMode === "CSS1Compat") {// 标准浏览器,来判断有没有声明DTD

        return {

            left: document.documentElement.scrollLeft,

            top: document.documentElement.scrollTop

        }

    }

    return {// 未声明 DTD

        left: document.body.scrollLeft,

        top: document.body.scrollTop

    }

}

　　

【前端】javascript实现鼠标跟随特效的更多相关文章

  1. 让交互更加生动！有意思的鼠标跟随 3D 旋转动效

    今天,群友问了这样一个问题,如下所示的鼠标跟随交互效果,如何实现: 简单分析一下,这个交互效果主要有两个核心: 借助了 CSS 3D 的能力 元素的旋转需要和鼠标的移动相结合 本文,就将讲述如何使用纯 ...

  2. HTML5深入学习之鼠标跟随，拖拽事件

    知识点(鼠标跟随): mousedown: 当用户用鼠标点击在某一元素上就会触发该事件 mouseover:  当鼠标指针在某一元素上移动就会触发改事件 下面这个例子的效果就是鼠标点击元素后,元素跟着 ...

  3. 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...

  4. Javascript屏蔽鼠标右键-超简单，不过还是记录一下

    Javascript屏蔽鼠标右键,其实作用也不大,也许是为了防止别人查看源代码,其实想查看源代码有多种途径,未必需要通过鼠标右键.不过当我们自定义鼠标右键弹出菜单时,也许需要这些. 下面是源码: 1 ...

  5. JS框架_(JQuery.js)动画效果鼠标跟随

    百度云盘 传送门 密码 :4n9u 火狐浏览器上纯CSS_动画效果鼠标跟随效果: (作者:lily_lcj 传送门) <!DOCTYPE html PUBLIC "-//W3C//DT ...

  6. 前端JavaScript规范

    前端JavaScript规范 http://www.imooc.com/article/1402 http://greengerong.com/blog/2015/05/09/qian-duan-ja ...

  7. 实例演示 kino.razor （前端 Javascript 模板工具，Razor 风格）的使用

    前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...

  8. 在C#后端处理一些结果然传给前端Javascript或是jQuery

    在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...

  9. JavaScript判断鼠标滑轮是向下还是向上滚动

    我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...

随机推荐

  1. 正则验证ip

    用python爬获取这样一条数据: <td class="ip" id="ip"><p style="display: none;& ...

  2. mysql 约束条件目录

    mysql 约束条件 mysql 约束条件 not null与default mysql 约束条件 unique key 唯一的键 mysql primary key 主键 mysql auto_in ...

  3. jmeter连接mysql数据库报错Cannot create PoolableConnectionFactory (Could not create connection to database server.)

    今天在学习jmeter的jdbc取样器,发现在配置完JDBC Connection Configuration和JDBC Request后,点击运行.在查看结果树中显示响应数据: Cannot cre ...

  4. SDUTOJ2465:其实玩游戏也得学程序(bfs+优先队列+回溯）

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2465 题目描述 由于前两次的打击,ZYJ同学不 ...

  5. SSM请求的响应

    1.请求响应文本到页面直接用pw.println("文本信息");打印到页面: 2.如果请求方法前不加@ResponseBody,返回字符串直接转发到对应的页面: 3.如果请求方法 ...

  6. sql2008评估板过期

    1.查看sql2008到期时间,打开数据库---帮助---关于,具体可查看试用期还有多长时间 2.重新激活 : ① 打开注册表后,找到并把 HKEY_LOCAL_MACHINE\SOFTWARE\Mi ...

  7. photoshop打造超酷炫火焰人像效果

    效果图看上去非常的酷.制作方法跟火焰字过程差不多.唯一不同的是前期的处理,需要用滤镜把人物轮廓路径找出来,去色后再用制作火焰的过程制作.最后把最好的火焰叠加到人物上面,适当用蒙版控制区域即可.原图 最 ...

  8. Leetcode: Pow(x, n) and Summary: 负数补码总结

    Implement pow(x, n). Analysis:  Time Complexity: O(LogN) Iterative code: refer to https://discuss.le ...

  9. discuz模板引擎

    discuz是采用“编译型的模板”,就是指采用普通网页文件保存,在文件中插入需要动态显示数据的仿php的代码,最后进行编译成真正的php的文件保存为模板缓存文件,这个转换的过程就称为编译.在用户浏览页 ...

  10. SP Flash Tool New Version v5.1352.01

    Friends, Sp Tool updated to new version with whole new revamped interface New SP Flash Tool 3.1352.0 ...