实现效果:

实现代码:

<!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. Service 的 onStartCommand(Intent, int, int) 返回值

    (1)START_NOT_STICKY If the system kills the service after onStartCommand() returns, do not recreate ...

  2. nodejs(五)同步异步--USING SETTIMEOUT INSTEAD OF SETINTERVAL TO FORCE SERIALIZATION

    Let’s say you want a function that does some I/O — such as parsing a log fi le — that will periodica ...

  3. HandlerSocket

    HandlerSocket http://www.uml.org.cn/sjjm/201211093.asp 目录: HandlerSocket的原理 HandlerSocket的优势和缺陷阐述 Ha ...

  4. MySQL Innodb日志机制深入分析

    MySQL Innodb日志机制深入分析 http://blog.csdn.net/yunhua_lee/article/details/6567869 1.1. Log & Checkpoi ...

  5. jenkins 项目发布脚本

    构建shell #!/bin/bash ########################################################################## 编译部分 ...

  6. [LeetCode] 58. Length of Last Word_Easy tag: String

    Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...

  7. Lifyray笑傲江湖之API总结TextUtil

    package liferay; /** * */ import java.text.DecimalFormat; import java.text.NumberFormat; import java ...

  8. windows8.1的启动目录的路径

    C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp\ 或者使用斜杠表示,就像这样: C:/ProgramData/Microsof ...

  9. app的底部菜单设计

    一.个人看法. 1.一般都是四个菜单或者五个菜单,这个是绝对主流,我估计占比达99%.当然也有三个菜单图标的,也有零个菜单图标的 2.如果该app软件功能复杂,那么尽量选择5个图标布局.比如苹果app ...

  10. linux常用命令：chkconfig 命令

    chkconfig命令用来安装,查看或修改 services随系统启动的启动选项的设置.是Red Hat公司遵循GPL规则所开发的程序,它可查询操作系统在每一个执行等级中会执行哪些系统服务,其中包括各 ...