jQuery根據滑鼠進入的方位出現動畫遮罩效果
本章節分享一段程式碼例項,它實現了根據滑鼠進入的方位,來決定遮罩層動畫的展現效果。
這是一種比較靈活和生動的遮罩層效果,需要的朋友可以做一下參考。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> body, a { text-align: center; color: white; text-decoration: none; } .hover-slideout { display: inline-block; margin-top: 10%; width: 300px; height: 300px; background: pink; overflow: hidden; position: relative; } .smelly-cat { position: absolute; width: 100%; height: 100%; background: rgba(255,0,0,.5); top: -100%; left: -100%; } h1 { font-size: 3em; } </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(function(){ $('[hover-slideout]').each(function(){ $(this).hover(function(e){ $(this).find('[smelly-cat]').css(induction_position($(this), e)).stop(true, true).animate({ "left":0, "top":0 }, 200); },function(e){ $(this).find('[smelly-cat]').stop(true, true).animate(induction_position($(this), e), 200); }); }); function induction_position(elem, e){ var w = elem.width(), h = elem.height(), direction=0, obj={}; var x = (e.pageX - elem.offset().left - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - elem.offset().top - (h / 2)) * (h > w ? (w / h) : 1); direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; switch(direction){ case 0: obj.left = 0; obj.top = "-100%"; break; case 1: obj.left = "100%"; obj.top = 0; break; case 2: obj.left = 0; obj.top = "100%"; break; case 3: obj.left = "-100%"; obj.top = 0; break; } return obj; } }); </script> </head> <body> <div class="hover-slideout" hover-slideout> <h1>滑鼠從不同方位進入</h1> <div class="smelly-cat" smelly-cat> <br /> <br /> <br /> <h1>Smelly Cat</h1> <br /> <br /> <br /> <br /> <a href="http://www.softwhy.com" target="_blank">螞蟻部落</a> </div> </div> </body> </html>
相關文章
- 根據滑鼠的方位出現遮罩層效果程式碼例項遮罩
- 能夠感知滑鼠移動方位的遮罩層效果程式碼例項遮罩
- 滑鼠懸浮遮罩層動畫方式滑動切換效果遮罩動畫
- jQuery彈出帶有遮罩視窗效果jQuery遮罩
- jQuery實現元素根據視窗大小自適應效果jQuery
- jQuery實現的滑鼠滑過連結出現自定義提示效果jQuery
- jQuery 效果 – 動畫jQuery動畫
- 根據JavaScript中原生的XMLHttpRequest實現jQuery的AjaxJavaScriptXMLHTTPjQuery
- jQuery跟隨滑鼠移動的彈出層效果jQuery
- nginx 根據IP 進行灰度釋出Nginx
- CSS3滑鼠懸浮環裝遮罩效果CSSS3遮罩
- jQuery 效果 – 停止動畫jQuery動畫
- jQuery動畫效果的刪除行效果jQuery動畫
- jQuery入門筆記之(四)動畫效果jQuery筆記動畫
- jQuery 動畫效果 與 動畫佇列jQuery動畫佇列
- jquery實現在滑鼠點選處的炫酷效果jQuery
- jQuery根據滾動條位置載入相應的內容jQuery
- jQuery實現的元素淡入淡出動畫效果jQuery動畫
- css3實現的滑鼠懸浮按鈕動畫效果CSSS3動畫
- Android 進出activity的滑動動畫效果Android動畫
- 前端基礎-jQuery的動畫效果前端jQuery動畫
- 滑鼠懸浮實現圖片動畫上下切換效果動畫
- 如何實現全屏遮罩層效果遮罩
- jquery滑鼠懸浮彈出帶有箭頭的tips效果jQuery
- 為app實現漸變的遮罩效果APP遮罩
- 滑鼠懸浮出現圓形資訊遮罩層遮罩
- 超酷jQuery進度條載入動畫集合jQuery動畫
- jQuery位移和透明度同時進行動畫效果jQuery動畫
- jQuery隨滑鼠旋轉的圖形效果jQuery
- CSS 滑鼠懸浮動畫暫停效果CSS動畫
- 進階!Cocos Creator 中使用模板測試實現遮罩效果遮罩
- jQuery根據多個屬性匹配元素jQuery
- 直播軟體app開發,導航條根據位置移動實現定位、顏色過渡動畫效果APP動畫
- 【譯】CSS遮罩實現過渡效果CSS遮罩
- CSS滑鼠懸浮出現遮罩層程式碼演示CSS遮罩
- jQuery滑鼠懸浮翻牌效果詳解jQuery
- jQuery滑鼠懸浮聚焦效果詳解jQuery
- 點選彈出帶有遮罩的視窗效果遮罩