前端--鼠标跟随特效
程序员文章站
2022-05-28 21:49:02
...
鼠标跟随特效
个人原创，转载请注明出处
里面的内容涉及：Element.setAttribute()，document.createElement()，document.createTextNode()，Element.appendChild()，onmousemove，document.getElementsByTagName,clientX,clientY,document.documentElement.scrollLeft(scrollTop)，document.body.scrollLeft（scrollTop）,for循环，length方法。
鼠标跟随的小特效，只要把js里的代码
aImg.setAttribute('src', '%E9%A3%9E%E4%BA%BA.jpg'); 里面的src值改回自己的本地图片地址就OK了。
如有不足之处还请指出！谢谢！
下面是展示效果：
/***************************************HTML代码***************************************/
<!doctype html5>
<html>
<head>
<meta charset = "utf-8" />
<meta name = "keywords" content = "鼠标跟随" />
<title>鼠标跟随</title>
<link rel="stylesheet" href="鼠标跟随.css" />
</head>
<body>
<script src="鼠标跟随.js"></script>
</body>
</html>/*****************CSS代码*****************************************************/
@charset "utf-8";
/* CSS Document */
body {
margin: 0;
padding: 0;
height: 2000px;
width: 2000px;
}
img {
position: absolute;
}
/**************JAVASCRIPT***************************************************/
// JavaScript Document
var i;
for (i = 0; i < 70; i++) //创建50个img元素并设置src属性
{
var aImg = document.createElement('img'); //创建img
aImg.setAttribute('src', '%E9%A3%9E%E4%BA%BA.jpg'); //设置src
aImg.setAttribute('width', '100px');
aImg.setAttribute('height', '100px');
document.body.appendChild(aImg); //插入到body中
}
document.onmousemove = function (ev) //鼠标移动触发事件
{
var oEvent = ev || event; //ev为系统传进来的事件对象
var oImg = document.getElementsByTagName('img'); //获取img元素个数
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; //可视区左边界至整个页面左边界的距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //可视区顶部至整个页面的距离顶部
var j;
for (j = oImg.length - 1; j > 0; j--) //从最后一个开始循环，后一个img的left和top等于前一个img的left和top
{
oImg[j].style.left = oImg[j - 1].offsetLeft + 'px';
oImg[j].style.top = oImg[j - 1].offsetTop + 'px';
}
//第一个img的left和top等于鼠标的坐标值加上网页被卷的距离
oImg[0].style.left = oEvent.clientX + scrollLeft + 'px';
oImg[0].style.top = oEvent.clientY + scrollTop + 'px';
};