鼠标跟随特效

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

里面的内容涉及：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');           //创建imgaImg.setAttribute('src', '%E9%A3%9E%E4%BA%BA.jpg');  //设置srcaImg.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';
};

前端--鼠标跟随特效相关推荐

php鼠标跟随特效,JS实现鼠标跟随特效
这次给大家带来JS实现鼠标跟随特效,JS实现鼠标跟随特效的注意事项有哪些,下面就是实战案例,一起来看一下. 以下是经过小编测试后的全部代码: 鼠标跟随十字JS特效代码 // var ox = docu ...
鼠标跟随效果html,javascript 鼠标跟随特效代码及理解
javascript 鼠标跟随特效 *{ margin: 0; padding: 0; } body{ height: 1000px; } div{ width: 50px; height: 50px ...
canvas实现鼠标跟随特效
代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="U ...
html鼠标跟随特效代码简短,JS实现的简单鼠标跟随DiV层效果完整实例
本文实例讲述了JS实现的简单鼠标跟随DiV层效果.分享给大家供大家参考,具体如下: 这段代码呈现一串跟随鼠标的Div效果,并有拖影特效,随着鼠标快速的晃动,Div层效果会不断的增加,后面的Div会自动 ...
php鼠标跟随特效,原生js实现鼠标跟随效果
鼠标跟随效果 *{margin: 0;padding: 0;} img{position:absolute;top:0;left:0;} (function(window){ // 获取对象 var ...
JS特效——鼠标跟随特效——动态背景线条跟随鼠标移动
<script>!function(){function n(n,e,t){return n.getAttribute(e ...
js鼠标跟随特效鼠标滑过出现小星星动画
页面代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title& ...
卡通猫咪鼠标跟随动态js特效
下载地址一款卡通猫咪鼠标跟随动态特效,该特效实现了猫咪眼睛跟随鼠标移动的动画效果,可用作网页插画.网页背景等 dd:
[html] 写一个鼠标跟随的特效
[html] 写一个鼠标跟随的特效 <!doctype html> <style> #pionter{ width: 20px; height: 20px; backgroun ...

前端--鼠标跟随特效

鼠标跟随特效

前端--鼠标跟随特效相关推荐

最新文章

热门文章