前端开发效果实例_div随着鼠标动

web前端开发的实例|前端开发找工作群|前端开发不好找工作了。。

html 代码

<!DOCTYPE html>
<head>
<metacharset=”utf-8″ />
<title>前端开发是怎么工作的?效果实例:div随着鼠标动</title>
<style type=”text/css”>
div{
width:10px;
height:10px;
background-color:darkmagenta;
position:absolute;
border-radius:50%;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script type=”text/javascript”>
vardivs=document.getElementsByTagName(“div”);
//一串跟着动,核心第onmousemove
document.onmousemove = function () {
//先确定第一个div的left和top的值,根据鼠标的坐标来确定
divs[0].style.left = event.clientX+”px”;
divs[0].style.top = event.clientY+”px”;
for (vari=divs.length -1;i>0;i–) {
divs[i].style.left =divs[i-1].style.left;
divs[i].style.top =divs[i-1].style.top;
}
}
document.onmouseup = function () {
document.onmousemove = null;
}
</script>
</body>
</html>
前端岗位开发岗位说明书|2018前端开发简历|web前端开发专业简历中技能
» 本文来自:前端开发者 » 《前端开发效果实例_div随着鼠标动》
» 本文链接地址:https://www.rokub.com/3766.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!