判断鼠标指针移入移出的方向代码实例
分类:实例代码
分享一段代码实例,它实现了判断鼠标指针移入移出方向的功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> body, html, ul, p, h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; } ul { list-style: none; } body { padding-top: 100px; text-align: center; } .box { width: 300px; height: 200px; margin: 10px auto; border: 1px solid #ccc; position: relative; overflow: hidden; display: inline-block; } .content { position: absolute; z-index: 2; background-color: lightcoral; width: 100%; height: 100%; left: -100%; top: -100%; line-height: 198px; text-align: center; color: #fff; font-size: 70px; } .content.trans { transition: all .2s; backface-visibility: hidden; } </style> </head> <body> <div class="box"> <div class="content">1</div> </div><div class="box"> <div class="content">2</div> </div><div class="box"> <div class="content">3</div> </div><div class="box"> <div class="content">4</div> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script> //这个模块完成鼠标方向判断的功能 var MouseDirection = function(element, opts) { var $element = $(element); //enter leave代表鼠标移入移出时的回调 opts = $.extend({}, { enter: $.noop, leave: $.noop }, opts || {}); var dirs = ['top', 'right', 'bottom', 'left']; var calculate = function(element, e) { /*以浏览器可视区域的左上角建立坐标系*/ //表示左上角和右下角及中心点坐标 var x1, y1, x4, y4, x0, y0; //表示左上角和右下角的对角线斜率 var k; //用getBoundingClientRect比较省事,而且它的兼容性还不错 var rect = element.getBoundingClientRect(); if (!rect.width) { rect.width = rect.right - rect.left; } if (!rect.height) { rect.height = rect.bottom - rect.top; } //求各个点坐标 注意y坐标应该转换为负值,因为浏览器可视区域左上角为(0,0),整个可视区域属于第四象限 x1 = rect.left; y1 = -rect.top; x4 = rect.left + rect.width; y4 = -(rect.top + rect.height); x0 = rect.left + rect.width / 2; y0 = -(rect.top + rect.height / 2); //矩形不够大,不考虑 if (Math.abs(x1 - x4) < 0.0001) return 4; //计算对角线斜率 k = (y1 - y4) / (x1 - x4); var range = [k, -k]; //表示鼠标当前位置的点坐标 var x, y; x = e.clientX; y = -e.clientY; //表示鼠标当前位置的点与元素中心点连线的斜率 var kk; kk = (y - y0) / (x - x0); //如果斜率在range范围内,则鼠标是从左右方向移入移出的 if (isFinite(kk) && range[0] < kk && kk < range[1]) { //根据x与x0判断左右 return x > x0 ? 1 : 3; } else { //根据y与y0判断上下 return y > y0 ? 0 : 2; } }; $element.on('mouseenter', function(e) { var r = calculate(this, e); opts.enter($element, dirs[r]); }).on('mouseleave', function(e) { var r = calculate(this, e); opts.leave($element, dirs[r]); }); }; var DIR_POS = { left: { top: '0', left: '-100%' }, right: { top: '0', left: '100%' }, bottom: { top: '100%', left: '0' }, top: { top: '-100%', left: '0' } }; $('.box').each(function() { new MouseDirection(this, { enter: function($element, dir) { //每次进入前先把.trans类移除掉,以免后面调整位置的时候也产生过渡效果 var $content = $element.find('.content').removeClass('trans'); //调整位置 $content.css(DIR_POS[dir]); //reflow $content[0].offsetWidth; //启用过渡 $content.addClass('trans'); //滑入 $content.css({ left: '0', top: '0' }); }, leave: function($element, dir) { $element.find('.content').css(DIR_POS[dir]); } }); }); </script> </body> </html>
判断鼠标指针移入移出的方向代码实例,这样的场景在实际项目中还是用的比较多的,关于判断鼠标指针移入移出的方向代码实例就介绍到这了。
判断鼠标指针移入移出的方向代码实例属于前端实例代码,有关更多实例代码大家可以查看。