div+js实现始终指向鼠标位置的箭头效果代码
代码语言:html
所属分类:悬停
代码描述:div+js实现始终指向鼠标位置的箭头效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background: #004; overflow: hidden; } .arrow { position: absolute; background: #76f; width: 40px; height: 5px; transform-origin: 0% 50%; } .arrow:after { display: block; content:''; border-top: 7px solid transparent; border-bottom: 8px solid transparent; border-left: 14px solid #76f; transform: translate(40px, -5px); } </style> </head> <body> <!-- partial:index.partial.html --> <!-- partial --> <script > var i, count=200, arrow, body, init, prefixTransform, touch=false, touchx, touchy; body=document.querySelector("body"); body.innerHTML=(new Array(count+1)).join('<div class="arrow"></div>'); arrow=document.getElementsByClassName("arrow"); //prefixTransform=["transform","webkitTransform","MozTransform"].filter(function(el) { return typeof(arrow[0].style[el])==="string"; }).pop(); prefixTransform="transform"; init=function() { setTimeout(function() { for (i=0; i<count; i+=1) { arrow[i].style.left=Math.floor(Math.random()*window.innerWidth)+"px"; arrow[i].style.top= Math.floor(Math.random()*window.innerHeight)+"px"; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0