实现效果:

实现代码:

<!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. 记录一下自己的.tmux.conf，.vimrc

    ~/.tmux.conf set -g default-terminal "screen-256color" set -g prefix C-a bind C-a send-pre ...

  2. 【xargs -i】复制文件夹中前100个文件

    复制前一万个文件到 tmp 下 |xargs -i cp {} /tmp 复制后一万个文件到 tmp 下 |xargs -i cp {} /tmp 查看linux下文件夹文件数目 ls -l |gre ...

  3. Pycharm自动换行

    只对当前文件有效的操作是菜单栏->View -> Active Editor -> Use Soft Wraps. 要是想对所有文件都起到效果,就要在setting里面进行操作.Pe ...

  4. 常用python包（依赖）Ubuntu下

    amqp==1.4.9anyjson==0.3.3apturl==0.5.2beautifulsoup4==4.4.1billiard==3.3.0.23blinker==1.3Brlapi==0.6 ...

  5. sql server 基本问题解决思路

    1.数据库故障排查步骤,如何处理紧急数据库问题;首先根据报错信息找到故障原因.然后实施对应的解决方案.2.SQL调优步骤,如何来判断SQL语句存在问题,怎么定位问题,如何解决这些问题:可以建立一个Pe ...

  6. 【Cocos2dx 3.3 Lua】定时器事件

    Cocos2dx 3.x Lua 中使用定时器有两种方式: (1)self:scheduleUpdateWithPriorityLua(update, priority) > 参数一:刷新函数 ...

  7. Git+Jenkins+FileGee 发布php应用

    Git:做版本控制,回滚版本(coding.net) Jenkins:代码下载,提供webhook url FileGee:同步代码(一个国产同步.备份软件非常强大,而且便宜企业版只要498) jen ...

  8. Django-form组件和ModelForm组件

    一. 构建Form表单 通过建一个类,添加需要进行验证的form字段,继而添加验证条件 from django import forms from django.forms import widget ...

  9. Summary: Prime

    最近遇到很多问题都跟Prime有关,于是总结一下: Prime definition:A prime number (or a prime) is a natural number greater t ...

  10. 《Convolutional Neural Networks for Sentence Classification》 文本分类

    文本分类任务中可以利用CNN来提取句子中类似 n-gram 的关键信息. TextCNN的详细过程原理图见下: keras 代码: def convs_block(data, convs=[3, 3, ...