前端--鼠标跟随特效

鼠标跟随特效

个人原创，转载请注明出处

里面的内容涉及：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代码***************************************/

/*****************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';
};