能够感知鼠标移动方位的遮罩层效果代码实例
分类:实例代码
分享一段代码实例,它实现了感知鼠标移动方位的遮罩层效果。
也就是是遮罩层的出现和鼠标进入的方位是一致的。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> * { margin: 0; padding: 0; } ul { width: 630px; overflow: hidden; margin: 100px auto; } li { float: left; width: 200px; height: 200px; background: #ccc; margin: 5px; position: relative; overflow: hidden; } li span { position: absolute; top: 0; left: 200px; width: 100%; height: 100%; background: rgba(255,0,0,0.3); } li span p { font-size: 14px; color: #fff; padding: 10px; white-space: pre-wrap; } </style> <script> function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; } } function move(obj, json, options) { options = options || {}; options.duration = options.duration || 700; options.easing = options.easing || 'ease-in'; var count = Math.floor(options.duration / 30); var start = {}; var dis = {}; for (var name in json) { start[name] = parseFloat(getStyle(obj, name)); dis[name] = json[name] - start[name]; } var n = 0; clearInterval(obj.timer); obj.timer = setInterval(function() { n++; for (var name in json) { switch (options.easing) { case 'linear': var cur = start[name] + dis[name] * n / count; break; case 'ease-in': var a = Math.pow(n / count, 3); var cur = start[name] + dis[name] * a; break; case 'ease-out': var a = Math.pow(1 - n / count, 3); var cur = start[name] + dis[name] * (1 - a); break; } if (name == 'opacity') { obj.style[name] = cur; obj.style.filter = 'alpha(opacity:' + (cur * 100) + ')'; } else { obj.style[name] = cur + 'px'; } } if (n == count) { clearInterval(obj.timer); options.complete && options.complete(); } }, 30); } function a2d(n) { return n * 180 / Math.PI; } function hoverDir(obj, ev) { var a = ev.clientX - (obj.offsetLeft + obj.offsetWidth / 2); var b = obj.offsetTop + obj.offsetHeight / 2 - ev.clientY; return Math.round((a2d(Math.atan2(b, a)) + 180) / 90) % 4; } function through(obj) { obj.onmouseenter = function(ev) { var oEvent = ev || event; var oS = this.children[0]; var dir = hoverDir(obj, oEvent); switch (dir) { case 0: oS.style.left = '-200px'; oS.style.top = 0; break; case 1: oS.style.left = 0; oS.style.top = '200px'; break; case 2: oS.style.left = '200px'; oS.style.top = 0; break; case 3: oS.style.left = 0; oS.style.top = '-200px'; break; } move(oS, { left: 0, top: 0 }, { duration: 300, easeing: 'linear' }); } obj.onmouseleave = function(ev) { var oEvent = ev || event; var oS = this.children[0]; var dir = hoverDir(obj, oEvent); switch (dir) { case 0: move(oS, { left: -200, top: 0 }, { duration: 300, easing: 'linear' }); break; case 1: move(oS, { left: 0, top: 200 }, { duration: 300, easing: 'linear' }); break; case 2: move(oS, { left: 200, top: 0 }, { duration: 300, easing: 'linear' }); break; case 3: move(oS, { left: 0, top: -200 }, { duration: 300, easing: 'linear' }); break; } }; } window.onload = function() { var oLi = document.getElementsByTagName("li"); for (var i = 0; i < oLi.length; i++) { through(oLi[i]) } } </script> </head> <body> <ul> <li><span><p>前端教程网欢迎您</p></span></li> <li><span><p>前端教程网欢迎您</p></span></li> <li><span><p>前端教程网欢迎您</p></span></li> <li><span><p>前端教程网欢迎您</p></span></li> <li><span><p>前端教程网欢迎您</p></span></li> <li><span><p>前端教程网欢迎您</p></span></li> </ul> </body> </html>
能够感知鼠标移动方位的遮罩层效果代码实例,这样的场景在实际项目中还是用的比较多的,关于能够感知鼠标移动方位的遮罩层效果代码实例就介绍到这了。
能够感知鼠标移动方位的遮罩层效果代码实例属于前端实例代码,有关更多实例代码大家可以查看。