实现效果:

实现代码:

<!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. Oracle enterprise linux系统的安装以及ORACLE12C的安装

    本文所用到的所有参数均位于文后附录中 进入安装配置目录 分区选择i will configure partitioning 之后选择 请为我分区 关闭KDUMP 更改主机名,打开网络连接 在软件安装中 ...

  2. 15款Django开发常用软件包(转)

    原文:http://www.iteye.com/news/28697 Django是一款高级的Python Web框架,可以帮助开发者快速创建web应用.我们这里整理了15款Django开发中常用的软 ...

  3. SpringMVC 问题 org.springframework.beans.factory.BeanDefinitionStoreException

    HTTP Status 500 – Internal Server Error Type Exception Report Message Servlet.init() for servlet [sp ...

  4. Java-idea-设置类头注释和方法注释

    一.文件级别的注释         主要是通过File-->Setting-->Editor→File and Code Template中来设置 可以再右侧include中设置File ...

  5. matlab常用方法

    1:matlab进行符号的虚数运算 直接使用符号 a+b*j运算,结果是一个角度值,不是复数. 可以使用  a+b*(1j)    进行运算. 如下 position(index,)=radius; ...

  6. HTTP 教程

    HTTP 简介 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标准. HTTP是一个基于 ...

  7. ssh 远程执行命令

    SSH 是 Linux 下进行远程连接的基本工具,但是如果仅仅用它来登录那可是太浪费啦!SSH 命令可是完成远程操作的神器啊,借助它我们可以把很多的远程操作自动化掉!下面就对 SSH 的远程操作功能进 ...

  8. random随机数应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Javascript-逻辑判断或（&&）练习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. distinct count

    实验:查询一个column的无重复记录,需要知道有多少条记录,并显示记录. 统计记录用count(*)函数,无重复记录distinct,以emp表为例. (1)先查询无重复记录 [@more@] SQ ...