jQuery實現(xiàn)的響應(yīng)鼠標(biāo)移動方向插件用法示例【附源碼下載】
更新時間：2018年08月28日 15:12:03 作者：鄒大叔
這篇文章主要介紹了jQuery實現(xiàn)的響應(yīng)鼠標(biāo)移動方向插件用法,涉及jQuery響應(yīng)鼠標(biāo)事件及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了jQuery實現(xiàn)的響應(yīng)鼠標(biāo)移動方向插件用法。分享給大家供大家參考，具體如下：
HTML代碼如下：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>m.fzitv.net jQuery響應(yīng)鼠標(biāo)移動</title>
<style>
*{margin:0;padding:0;}
ul,li{list-style:none;}
div{font-family:"Microsoft YaHei";}
html,body{width:100%; height:100%; background:#f2f2f2;}
ul{margin-left:50px;}
ul li{float:left;}
ul li .outer{width:300px; height:250px;}
ul li .outer .inner{width:300px; height:250px; background:rgba(0, 0, 0, .3);}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<ul>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/09.jpg" width="300px" height="250px" />
<div class="inner">
我是圖片1
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/010.jpg" width="300px" height="250px" />
<div class="inner">
我是圖片2
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/011.jpg" width="300px" height="250px" />
<div class="inner">
我是圖片3
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/012.jpg" width="300px" height="250px" />
<div class="inner">
我是圖片4
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/013.jpg" width="300px" height="250px" />
<div class="inner">
我是圖片5
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/014.jpg" width="300px" height="250px" />
<div class="inner">
我是圖片6
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/015.jpg" width="300px" height="250px" />
<div class="inner">
我是圖片7
</div>
</div>
</li>
<li>
<div class="outer">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/016.jpg" width="300px" height="250px" />
<div class="inner">
我是圖片8
</div>
</div>
</li>
</ul>
<script>
(function($){
$.fn.extend({
show : function(div){
var w = this.width(),
h = this.height(),
xpos = w/2,
ypos = h/2,
eventType = "",
direct = "";
this.css({"overflow" : "hidden", "position" : "relative"});
div.css({"position" : "absolute", "top" : this.width()});
this.on("mouseenter mouseleave", function(e){
var oe = e || event;
var x = oe.offsetX;
var y = oe.offsetY;
var angle = Math.atan((x - xpos)/(y - ypos)) * 180 / Math.PI;
if(angle > -45 && angle < 45 && y > ypos){
direct = "down";
}
if(angle > -45 && angle < 45 && y < ypos){
direct = "up";
}
if(((angle > -90 && angle <-45) || (angle >45 && angle <90)) && x > xpos){
direct = "right";
}
if(((angle > -90 && angle <-45) || (angle >45 && angle <90)) && x < xpos){
direct = "left";
}
move(e.type, direct)
});
function move(eventType, direct){
if(eventType == "mouseenter"){
switch(direct){
case "down":
div.css({"left": "0px", "top": h}).stop(true,true).animate({"top": "0px"}, "fast");
break;
case "up":
div.css({"left": "0px", "top": -h}).stop(true,true).animate({"top": "0px"}, "fast");
break;
case "right":
div.css({"left": w, "top": "0px"}).stop(true,true).animate({"left": "0px"}, "fast");
break;
case "left":
div.css({"left": -w, "top": "0px"}).stop(true,true).animate({"left": "0px"}, "fast");
break;
}
}else{
switch(direct){
case "down":
div.stop(true,true).animate({"top": h}, "fast");
break;
case "up":
div.stop(true,true).animate({"top": -h}, "fast");
break;
case "right":
div.stop(true,true).animate({"left": w}, "fast");
break;
case "left":
div.stop(true,true).animate({"left": -w}, "fast");
break;
}
}
}
}
});
})(jQuery)
$(".outer").each(function(i){
$(this).show($(".inner").eq(i));
});
</script>
</body>
</html>
其中控制響應(yīng)鼠標(biāo)方向的JS代碼如下：
/*
*使用說明：
* $(".a").show($(".b"))
* a是展示層，b是遮罩層
* b在a的內(nèi)部
*/
$(".outer").each(function(i){
$(this).show($(".inner").eq(i));
});
這里使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun運行代碼，可得到如下效果：
完整實例代碼點擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對大家jQuery程序設(shè)計有所幫助。
您可能感興趣的文章:
- JQuery獲取鼠標(biāo)進(jìn)入和離開容器的方向
- jquery實現(xiàn)的提示浮層跟隨鼠標(biāo)移動
- Jquery實現(xiàn)鼠標(biāo)移動放大圖片功能實例
- jQuery實現(xiàn)div跟隨鼠標(biāo)移動
- jQuery實現(xiàn)鼠標(biāo)滑過圖片移動特效
- jQuery 網(wǎng)易相冊鼠標(biāo)移動顯示隱藏效果實現(xiàn)代碼
- Jquery創(chuàng)建層顯示標(biāo)題和內(nèi)容且隨鼠標(biāo)移動而移動
- JQuery實現(xiàn)鼠標(biāo)移動圖片顯示描述層的方法
- jQuery鼠標(biāo)移動圖片上實現(xiàn)放大效果
- jquery插件實現(xiàn)鼠標(biāo)經(jīng)過圖片右側(cè)顯示大圖的效果(類似淘寶)
- jQuery插件jFade實現(xiàn)鼠標(biāo)經(jīng)過的圖片高亮其它變暗
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)連續(xù)動畫效果,實例分析了animate方法實現(xiàn)動畫效果的相關(guān)技巧,并備有較為詳盡的注釋供讀者學(xué)習(xí)參考,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
基于jquery實現(xiàn)圖片廣告輪換效果代碼，需要的朋友可以參考下。2011-07-07
easyui datagrid 大數(shù)據(jù)加載效率慢,優(yōu)化解決方法(推薦)
下面小編就為大家?guī)硪黄猠asyui datagrid 大數(shù)據(jù)加載效率慢,優(yōu)化解決方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
使用jQuery Rotare實現(xiàn)微信大轉(zhuǎn)盤抽獎功能
本文主要介紹使用jQuery Rotare實現(xiàn)微信大轉(zhuǎn)盤抽獎功能，并附實例講解，非常實用，有需要的朋友可以參考一下。2016-06-06
jQuery實現(xiàn)氣球彈出框式的側(cè)邊導(dǎo)航菜單效果
這篇文章主要介紹了jQuery實現(xiàn)氣球彈出框式的側(cè)邊導(dǎo)航菜單效果,通過css樣式控制結(jié)合jQuery響應(yīng)鼠標(biāo)事件動態(tài)切換元素樣式實現(xiàn)提示框效果,非常美觀實用,需要的朋友可以參考下2015-09-09
jQuery實現(xiàn)立體式數(shù)字動態(tài)增加（animate方法）
本文主要分享了基于jQuery實現(xiàn)立體式數(shù)字動態(tài)增加（animate方法）的實例代碼。有很好的參考價值，需要的朋友一起來看下吧2016-12-12
可以讓指定的層浮動到網(wǎng)頁上的任何位置，當(dāng)滾動條滾動時它會保持在當(dāng)前位置不變，不會產(chǎn)生閃動2008-12-12
這篇文章主要給大家介紹了利用jquery實現(xiàn)去掉時光軸頭尾部線條的方法，文中給出了詳細(xì)的實例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06
這篇文章主要介紹了jQuery時間日期三級聯(lián)動的實現(xiàn)代碼，代碼簡答易懂，非常實用，需要的朋友參考下吧2016-11-11
jQuery treeview樹形結(jié)構(gòu)應(yīng)用
這篇文章主要為大家詳細(xì)介紹了jQuery treeview樹形結(jié)構(gòu)應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03