【前端】javascript实现鼠标跟随特效
2024-09-01 10:31:15
实现效果:
实现代码:
<!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
}
}
最新文章
- .net提交HTML元素到后台,遇到Request报错 解决方案
- 背包dp整理
- [转]mongodb 查询条件:关系运算符";$lt";, ";$lte";, ";$gt";, ";$gte";, ";$ne"; 逻辑运算符";$and“, ";$or“, ";$nor“
- spring controller中@Value取不到applicationContext.xml中加载配置文件的问题
- .NET基础操作回顾_使用ADO.NET操作SqlServer使用的类
- Struts2内建校验器(基于校验框架的文件校验)
- 自定义 SharePoint 2010 快速启动栏和顶部链接栏
- Android-5 理解context
- 安卓开发中ScrollView不能用RelativeLayout的解决方案
- 精通find命令
- PAT 团体程序设计天梯赛-练习集 L1-016. 查验身份证
- Linux vim编辑器
- Mesos+Zookeeper+Marathon+Docker分布式集群管理最佳实践
- Notepad++编译和运行C语言 (GCC)
- 对讲解OS文献的反思
- sysbench write and read only
- 【转】.htaccess详解及.htaccess参数说明
- sublime 成对括号高亮显示设置
- WCF服务寄宿Windows
- MyEclipse6.5的SVN插件的安装