JS写一个环形的鼠标滑动效果
2017-04-06 20:04
176 查看
最近用原生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.[b]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>
相关文章推荐
- js鼠标滑动图片显示隐藏效果
- js实现鼠标点击左上角滑动菜单效果代码
- 网易滑动效果!一个js,页面任意滑动数量、任意调用
- JS实现鼠标箭头变成一个燃烧烛光效果的方法
- 使用ES6实现一个绚丽的鼠标滑动效果
- JS实现感应鼠标滑动提示层效果
- css效果,在一个盒子里,把一部分内容隐藏掉,在鼠标悬停到div时,就会把隐藏的部分向上显示出来。 不用js操作,纯css就可以。
- 京东首页很炫的js效果、图片自动滑动,悬停效果,鼠标离开效果
- 一个简单的js鼠标划过切换效果
- JS感应鼠标的图片上下滑动展示效果
- JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
- JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
- 一个鼠标滑动的JS应用实例
- js实现鼠标点击左上角滑动菜单效果代码
- JS实现鼠标箭头变成一个燃烧烛光效果的方法
- 分享一个自已写的仿iphone手机滑动效果的JS代码....
- 原生js如何做一个链式运动,JavaScript怎么做鼠标跟随效果
- 封装的一个JS跟随鼠标效果
- js自动滑动+鼠标滑动区域