jQuery實(shí)現(xiàn)的響應(yīng)鼠標(biāo)移動(dòng)方向插件用法示例【附源碼下載】
更新時(shí)間：2018年08月28日 15:12:03 作者：鄒大叔
這篇文章主要介紹了jQuery實(shí)現(xiàn)的響應(yīng)鼠標(biāo)移動(dòng)方向插件用法,涉及jQuery響應(yīng)鼠標(biāo)事件及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)的響應(yīng)鼠標(biāo)移動(dòng)方向插件用法。分享給大家供大家參考，具體如下：
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>www.dhdzp.com jQuery響應(yīng)鼠標(biāo)移動(dòng)</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代碼如下：
/*
*使用說(shuō)明：
* $(".a").show($(".b"))
* a是展示層，b是遮罩層
* b在a的內(nèi)部
*/
$(".outer").each(function(i){
$(this).show($(".inner").eq(i));
});
這里使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun運(yùn)行代碼，可得到如下效果：
完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery窗口操作技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- JQuery獲取鼠標(biāo)進(jìn)入和離開(kāi)容器的方向
- jquery實(shí)現(xiàn)的提示浮層跟隨鼠標(biāo)移動(dòng)
- Jquery實(shí)現(xiàn)鼠標(biāo)移動(dòng)放大圖片功能實(shí)例
- jQuery實(shí)現(xiàn)div跟隨鼠標(biāo)移動(dòng)
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過(guò)圖片移動(dòng)特效
- jQuery 網(wǎng)易相冊(cè)鼠標(biāo)移動(dòng)顯示隱藏效果實(shí)現(xiàn)代碼
- Jquery創(chuàng)建層顯示標(biāo)題和內(nèi)容且隨鼠標(biāo)移動(dòng)而移動(dòng)
- JQuery實(shí)現(xiàn)鼠標(biāo)移動(dòng)圖片顯示描述層的方法
- jQuery鼠標(biāo)移動(dòng)圖片上實(shí)現(xiàn)放大效果
- jquery插件實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)圖片右側(cè)顯示大圖的效果(類(lèi)似淘寶)
- jQuery插件jFade實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)的圖片高亮其它變暗
相關(guān)文章
jQuery實(shí)現(xiàn)連續(xù)動(dòng)畫(huà)效果實(shí)例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)連續(xù)動(dòng)畫(huà)效果,實(shí)例分析了animate方法實(shí)現(xiàn)動(dòng)畫(huà)效果的相關(guān)技巧,并備有較為詳盡的注釋供讀者學(xué)習(xí)參考,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
基于jquery實(shí)現(xiàn)圖片廣告輪換效果代碼
基于jquery實(shí)現(xiàn)圖片廣告輪換效果代碼，需要的朋友可以參考下。2011-07-07
easyui datagrid 大數(shù)據(jù)加載效率慢,優(yōu)化解決方法(推薦)
下面小編就為大家?guī)?lái)一篇easyui datagrid 大數(shù)據(jù)加載效率慢,優(yōu)化解決方法(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
使用jQuery Rotare實(shí)現(xiàn)微信大轉(zhuǎn)盤(pán)抽獎(jiǎng)功能
本文主要介紹使用jQuery Rotare實(shí)現(xiàn)微信大轉(zhuǎn)盤(pán)抽獎(jiǎng)功能，并附實(shí)例講解，非常實(shí)用，有需要的朋友可以參考一下。2016-06-06
jQuery實(shí)現(xiàn)氣球彈出框式的側(cè)邊導(dǎo)航菜單效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)氣球彈出框式的側(cè)邊導(dǎo)航菜單效果,通過(guò)css樣式控制結(jié)合jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)切換元素樣式實(shí)現(xiàn)提示框效果,非常美觀實(shí)用,需要的朋友可以參考下2015-09-09
jQuery實(shí)現(xiàn)立體式數(shù)字動(dòng)態(tài)增加（animate方法）
本文主要分享了基于jQuery實(shí)現(xiàn)立體式數(shù)字動(dòng)態(tài)增加（animate方法）的實(shí)例代碼。有很好的參考價(jià)值，需要的朋友一起來(lái)看下吧2016-12-12
可以讓指定的層浮動(dòng)到網(wǎng)頁(yè)上的任何位置，當(dāng)滾動(dòng)條滾動(dòng)時(shí)它會(huì)保持在當(dāng)前位置不變，不會(huì)產(chǎn)生閃動(dòng)2008-12-12
利用jquery去掉時(shí)光軸頭尾部線條的方法實(shí)例
這篇文章主要給大家介紹了利用jquery實(shí)現(xiàn)去掉時(shí)光軸頭尾部線條的方法，文中給出了詳細(xì)的實(shí)例代碼供大家參考學(xué)習(xí)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-06-06
jQuery時(shí)間日期三級(jí)聯(lián)動(dòng)(推薦)
這篇文章主要介紹了jQuery時(shí)間日期三級(jí)聯(lián)動(dòng)的實(shí)現(xiàn)代碼，代碼簡(jiǎn)答易懂，非常實(shí)用，需要的朋友參考下吧2016-11-11
jQuery treeview樹(shù)形結(jié)構(gòu)應(yīng)用
這篇文章主要為大家詳細(xì)介紹了jQuery treeview樹(shù)形結(jié)構(gòu)應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03