jQuery感知滑鼠滑入方向
分享一段程式碼例項,它實現了感知滑鼠方位的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> #box { width: 200px; height: 200px; border: 1px solid #999; margin: 200px auto; position: relative; zoom: 1; overflow: hidden; } #box1 { height: 200px; background-color: orange; text-align: center; line-height: 200px; } #box2 { position: absolute; left: -200px; top: -200px; width: 200px; height: 200px; background-color: red; text-align: center; line-height: 200px; } </style> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script> $(function() { $("#box").on("mouseenter mouseleave",function(e) { var w = $(this).width(); var h = $(this).height(); var x=(e.pageX-this.offsetLeft-(w/2))*(w>h?(h/w):1); var y=(e.pageY-this.offsetTop-(h/2))*(h>w?(w/h):1); var dirNum=Math.round((((Math.atan2(y,x)*(180/Math.PI))+180)/90)+3)%4; var eventType = e.type; var aPos=[{left:0,top:-200},{left:200,top:0},{left:0,top:200},{left:-200,top:0}]; if(eventType == 'mouseenter'){ $("#box2").css(aPos[dirNum]).stop(true,true).animate({left:0,top:0},200); }else{ $("#box2").stop(true,true).animate(aPos[dirNum],200); } }); }); </script> </head> <body> <div id="box"> <div id="box1">螞蟻部落一</div> <div id="box2">螞蟻部落二</div> </div> </body> </html>
相關文章
- CSS3感知滑鼠進入方向CSSS3
- jQuery獲取滑鼠從哪個方向移入和移出元素jQuery
- jQuery滑鼠移入移出jQuery
- JQuery獲取滑鼠位置jQuery
- jquery-中的滑鼠事件jQuery事件
- 使用 jQuery 避免滑鼠雙擊jQuery
- 「MacOS滑鼠操作技巧」如何設定滑鼠”的速度、滾動方向等配置?Mac
- css transition 實現滑入滑出CSS
- 如何使用jQuery禁用滑鼠右鍵jQuery
- 【Linux Mint】Linux Mint 19.1 Cinnamon 修改滑鼠滾動方向為自然方向Linux
- jQuery滑鼠懸浮翻牌效果詳解jQuery
- jQuery滑鼠懸浮聚焦效果詳解jQuery
- jQuery獲取滑鼠指標座標jQuery指標
- jQuery 事件(一) 滑鼠與鍵盤事件jQuery事件
- GridView滑鼠經過感知以及點選行彈出視窗View
- 能夠感知滑鼠移動方位的遮罩層效果程式碼例項遮罩
- JQuery4:滑鼠事件和滾動事件jQuery事件
- 滑鼠滾動固定js(jquery)例項分享JSjQuery
- jQuery滑鼠雙擊事件簡單介紹jQuery事件
- jQuery禁用滑鼠右鍵程式碼例項jQuery
- jQuery隨滑鼠旋轉的圖形效果jQuery
- jQuery滑鼠拖動調整數字大小jQuery
- 判斷滑鼠指標移入移出的方向程式碼例項指標
- 1.21 JQuery4:滑鼠事件與滾動事件jQuery事件
- JavaScript和JQuery的滑鼠mouse事件冒泡處理JavaScriptjQuery事件
- jquery實現的右鍵滑鼠點選事件jQuery事件
- Jquery實現滑鼠拖動改變div高度jQuery
- jquery多個滑鼠移上顯示下拉選單jQuery
- jQuery滑鼠懸停顯示提示資訊視窗jQuery
- jQuery跟隨滑鼠移動的彈出層效果jQuery
- jQuery/CSS3實現滑鼠點選波浪特效jQueryCSSS3特效
- 滑鼠滑動獲取絕對座標方法 jqueryjQuery
- 微軟AR眼鏡能判斷眼球方向 滑鼠從此可以退役了微軟
- [unity3d]如何實現遊戲物件跟隨滑鼠方向移動Unity3D遊戲物件
- 上下文感知與態勢感知或情境感知區別
- css+jquery滑鼠滑過,顯示下拉選單效果CSSjQuery
- jquery禁止在頁面使用滑鼠右鍵程式碼示例jQuery
- jquery實現在滑鼠點選處的炫酷效果jQuery