跟随鼠标移动-demo

定时器：为了测试图片延迟显示，更好看，会一直动效果如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>span{position: absolute;left: -10000px;top: 0;background: #03ccbb;width: 40px;height: 40px;text-align: center;line-height: 40px;border-radius: 50%;transition: all 0.1s linear; }img{width: 40px;height: 40px;border-radius: 50%;}html{/*鼠标隐藏*//*cursor: none;*/}</style>
</head>
<body><span><img src="img/1.png" alt=""></span><span><img src="img/2.png" alt=""></span><span><img src="img/3.png" alt=""></span><span><img src="img/4.png" alt=""></span><span><img src="img/5.png" alt=""></span><span><img src="img/6.png" alt=""></span><span><img src="img/7.png" alt=""></span><span><img src="img/8.png" alt=""></span><script>var spans = document.getElementsByTagName("span");document.onmousemove = function(e){e=e||window.event;//定时器，测试图片延迟显示，更好看，会一直动// setInterval(function(){//  for(var i=spans.length-1;i>=0;i--){//      if(i!=0){//            spans[i].style.left = spans[i-1].offsetLeft+82+"px";//             spans[i].style.top = spans[i-1].offsetTop+"px";//       }else{//            spans[i].style.left=e.clientX+"px";//           spans[i].style.top=e.clientY+"px";//        }//     }// },1000)for(var i=spans.length-1;i>=0;i--){if(i!=0){spans[i].style.left = spans[i-1].offsetLeft+82+"px";spans[i].style.top = spans[i-1].offsetTop+"px";}else{spans[i].style.left=e.clientX+"px";spans[i].style.top=e.clientY+"px";}}}</script>
</body>
</html>

跟随鼠标移动-demo相关推荐

javascript元素跟随鼠标在指定区域运动
元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中,下面是完整的Demo: <!DOCTYPE html> <html lang="en"> <h ...
html浮动跟随鼠标,jQuery 图片跟随鼠标浮动
不知你有没注意到我的网站首页,上面浮动着一层雪花的背景,并且随着鼠标的移动也在移动着. 本文主要讲述了如何判断鼠标的位置,从而实现图片跟随鼠标进行浮动.为了方便查看和理解,在Demo的左下角把各个参数 ...
Unity——指针跟随鼠标旋转,GTA武器菜单选择等效果实现
GTA武器菜单选择简单实现这种效果 Demo的效果以下是主要代码 using System.Collections; using System.Collections.Generic; using ...
CSS自定义鼠标样式。JS获取鼠标坐标，实现提示气泡框跟随鼠标移动
cursor: url(//img.58cdn.com.cn/resource/xxzl/captcha/pencil.png), default; /*获取鼠标位置,让提示气泡框跟随 ...
html图片跟随鼠标,跟随鼠标的图片 - 网页特效代码|网页特效观止 - 让你的网页靓起来！...
跟随鼠标的图片 [ 发布者:在远方┊来源:本站整理┊时间:2006-03-08┊浏览: 人次 ] 网页特效|JsCode.cn|---跟随鼠标的图片 var newtop=0 var newleft= ...
鼠标移动小球 Java_js实现跟随鼠标移动的小球
本文实例为大家分享了js实现跟随鼠标移动的具体代码,供大家参考,具体内容如下 follow mouse *{ margin: 0; padding:0; } #div1{width: 50px;hei ...
跟随鼠标走的文字的html代码,跟随鼠标走的文字的HTML代码
跟随鼠标走的文字的HTML代码跟着鼠标走的文字 visibility:visible; top:-50px; font-size:12pt; font-family:隶书; color: 00001 ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
threejs中坐标系转换和实现物体跟随鼠标移动
坐标系转换下面函数可以将鼠标所在点的屏幕坐标转化成一个Threejs三维坐标: convertTo3DCoordinate(clientX,clientY){var mv = new THREE.V ...
html动态跟随鼠标效果,使用JS实现气泡跟随鼠标移动的动画效果
气泡跟随鼠标移动,并在每次点击时产生不同的变化效果如下简单的气泡效果 body{background-color:#000000;margin:0px;overflow:hidden} var c ...

跟随鼠标移动-demo

跟随鼠标移动-demo相关推荐

最新文章

热门文章