判斷滑鼠指標移入移出的方向程式碼例項
分享一段程式碼例項,它實現了判斷滑鼠指標移入移出方向的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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>
相關文章
- jQuery滑鼠移入移出jQuery
- vue 滑鼠移入顯示圖示 ,滑鼠移出隱藏圖示Vue
- JavaScript隨滑鼠晃動的div塊程式碼例項JavaScript
- 手指滑動方向判斷
- 刪除字串中的html標籤程式碼例項字串HTML
- 滑鼠進入移出事件事件
- vuejs實現新增tag標籤程式碼例項VueJS
- PbootCMS判斷第一個迴圈項,並新增 class條件判斷和標籤boot
- Hadoop資料傳輸:如何將資料移入和移出Hadoop?Hadoop
- xm外匯中利用RSI指標判斷高低點指標
- xgboost get_fscore 判斷特徵重要程度的三種指標特徵指標
- CSS自定義滑鼠指標CSS指標
- 《自然》子刊:卵巢癌預後難判斷?AI四倍精準預判僅需四項生理指標AI指標
- PHP透過session判斷防止表單重複提交例項PHPSession
- fedora系統怎麼設定滑鼠指標大小?fedora滑鼠指標設定大小的教程指標
- win10滑鼠指標美化設定在哪 修改滑鼠指標樣式的具體方法Win10指標
- js程式碼判斷瀏覽器JS瀏覽器
- dom操作程式碼例項
- css梯形程式碼例項CSS
- win10好看的滑鼠指標怎麼設定 win10好看的滑鼠指標如何美化Win10指標
- win10滑鼠指標怎麼隱藏 win10隱藏滑鼠指標的步驟Win10指標
- win10 怎麼改變滑鼠指標_怎樣修改Windows10系統的滑鼠指標Win10指標Windows
- JavaScript in運算子程式碼例項JavaScript
- 設計模式例項程式碼設計模式
- table表格美化程式碼例項
- 【CSS: cursor】滑鼠游標指標樣式大全CSS指標
- win10怎麼更改滑鼠指標樣式_win10滑鼠指標怎麼美化Win10指標
- win10如何修改滑鼠指標方案_win10更改滑鼠指標主題方案教程Win10指標
- 有意思的滑鼠指標互動探究指標
- 純css tab選項卡程式碼例項CSS
- jQuery tab選項卡效果程式碼例項jQuery
- CSS設定滑鼠指標形狀CSS指標
- CSS實現滑鼠移入彈出下拉框CSS
- H5觸控事件判斷滑動方向H5事件
- 寫一個方法判斷頁面滾動方向
- Qt 判斷滑鼠在某一控制元件上QT控制元件
- python實現基於八方向判斷的斷裂連線Python
- win10怎麼調整滑鼠指標_win10怎麼更改滑鼠指標圖案Win10指標
- 下拉選項,一個小判斷