实现效果:

实现代码:

<!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. 设置tabBar中间的按钮比较大的发布

    MainTabBarController.h UITabBarItem *item = [self.tabBar.items objectAtIndex:index]; [item setTitle: ...

  2. vue中 用媒体查询 空置根节点字体大小

    在index.html中 <style> @media all and (min-width: 0px) { html{font-size: 20px;}/* 12*4.6 */ } @m ...

  3. hammerjs wabapp h5 触屏手势一网打尽

    hammerjs官网    http://hammerjs.github.io/ 学习文章1 http://www.cnblogs.com/vajoy/p/4011723.html 学习文章2 htt ...

  4. if判断代码 转变为 流程图

    转换规则如下: if 代表一个菱形+问号 if后面的条件代表菱形里的内容+↓yes(向下箭头和yes) if同级的else代表右拐向下箭头和no 执行语句块代表一个矩形. if 今天发工资: 先还信用 ...

  5. 开机自启：bat实现一次性打开win7中的常用软件和文件夹

    需求说明: 我们电脑(windows)办公,经常上班前一开机,就要手动打开很多文件夹和程序. 想节省时间,一键打开常用的文件夹和程序,研究了一下bat命令,于是mystart.bat产生了. myst ...

  6. BUG笔记：Win8 IE10下input[type="password"]内字符显示被截取问题

    这个BUG发生的截图: 这是发生在Windows8 IE10下,type为password的input文本框内输入长串字符后,初次失去焦点的时候会发生的一个BUG. 发生BUG的原因是这个文本框上应用 ...

  7. dedecms提取某栏目及子栏目名称到首页怎么弄

    我们建网站时有不同的需求,例如为页面创建一个栏目导航,用dedecms如何提取某栏目及子栏目名称和链接呢?如下图所示,先列出指定的顶级栏目,在下方再列出此栏目的所有子栏目. 之前ytkah说过dede ...

  8. 001-将自己的jar提交maven中央仓

    一.Maven中央仓库提交过程 ① https://issues.sonatype.org 工单管理地址,就是申请上传资格和groupId 的地方. ② https://oss.sonatype.or ...

  9. spring boot 使用静态资源

    ./ 当前目录../ 父级目录/ 根目录 spring boot 打包时: The default includes are as follows: 默认包括的文件 public/**, resour ...

  10. python输入与输出165

    s = 'Hello,Runoob' print(s) str(s) print(s) print(repr(s)) print(1/7) print(str(1/7)) print(repr(1/7 ...