这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了原生 JS 写一个环形的鼠标滑动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
最近用原生 JS 写一个环形的鼠标滑动效果,代码如下:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- *{margin:0;padding:0;} div{width:50px;height:50px;border-radius:50%;position:
- absolute; border-width:10px;border-style: solid;}
- </style>
- </head>
- <body>
- </body>
- <script>
- var divList = []; //创建一个空的集合,用来存储创建的div
- for (i = 0; i < 50; i++) { //循环次数50,创造50个div(环形)
- var div = document.createElement("div");
- var red = Math.round(Math.random() * 255);
- var green = Math.round(Math.random() * 255);
- var yellow = Math.round(Math.random() * 255); //(产生随机数作为环形的颜色)
- div.style.borderColor = "rgb(" + red + "," + green + "," + yellow + ")";
- document.body.appendChild(div); //在文档中产生环形
- divList[divList.length] = div; //将产生的每一个环形放入空集合
- }
- document.onmousemove = function(e) { //先鼠标按下获取相对位置
- var evt = window.event || e; //IE兼容
- var x = evt.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft); //鼠标当前x位置
- var y = evt.clientY + (document.documentElement.scrollTop || document.body.scrollTop); //鼠标当前y位置
- divList[0].style.left = x + "px"; //第一个环形的x位置
- divList[0].style.top = y + "px"; //第一个环形的Y位置
- for (i = divList.length - 1; i > 0; i--) { //循环让每一个环形都在它上一个的位置
- divList[i].style.left = divList[i - 1].offsetLeft + "px";
- divList[i].style.top = divList[i - 1].offsetTop + "px";
- }
- }
- </script>
- </html>
来源: http://www.phperz.com/article/17/0608/334249.html