jQuery實(shí)現(xiàn)百度圖片移入移出內(nèi)容提示框上下左右移動的效果
閑來無聊，看到百度圖片hover的時候提示框的效果，遂想試一試自己能否實(shí)現(xiàn)。
百度圖片hover的效果：
需求：
1. 當(dāng)鼠標(biāo)從圖片上部移入的時候，提示框從上部移到正常位置。從上部移出的時候，提示框從正常位置移到上部。
2. 當(dāng)鼠標(biāo)從圖片左部移入的時候，提示框從左部移到正常位置。從左部移出的時候，提示框從正常位置移到左部
3. 當(dāng)鼠標(biāo)從圖片右部移入的時候，提示框從右部移到正常位置。從右部移出的時候，提示框從正常位置移到右部
4. 當(dāng)鼠標(biāo)從圖片下部移入的時候，提示框從下部移到正常位置。從下部移出的時候，提示框從正常位置移到下部
先上實(shí)現(xiàn)的效果圖：
實(shí)現(xiàn)原理：
1. 把圖片看做一個矩形，把這個矩形，按對角線分成四份，每一份對應(yīng)上下左右的部分。
2. 獲取鼠標(biāo)移入div之后的坐標(biāo)，獲取該div離瀏覽器頂部和左部的距離，就能知道在該div中，鼠標(biāo)移入的坐標(biāo)。
3. 以div左上角為原點(diǎn)，水平和豎直方向做坐標(biāo)軸。
4. 算出移入的點(diǎn)與x軸的夾角 β 和 θ。再與 α 角做比較，最后判斷是在哪個范圍內(nèi)的。
如圖：
說明：
1） β，θ是移入的點(diǎn)與x軸的夾角，求這兩個角與 α 的關(guān)系，才能知道到底是在哪個區(qū)域
2）已知條件：x，y，x0，y0。分別代表圖片寬和高，移入的x，y坐標(biāo)。
3）不管是鼠標(biāo)從哪個區(qū)域移入或移出，只要求到移入的點(diǎn)與 x 軸的夾角的大小關(guān)系，就能正確判斷。
夾角判斷所在區(qū)域：
當(dāng) 0 ＜ β ≤ α，移入的點(diǎn)在 1 和 4 區(qū)域，
當(dāng) α ＜ β ≤ 90，移入的點(diǎn)在 2 和 3 區(qū)域，
當(dāng) 0 ＜ θ ≤ α，移入的點(diǎn)在 1 和 2 區(qū)域，
當(dāng) α ＜ θ ≤ 90，移入的點(diǎn)在 3 和 4 區(qū)域，
那么，要判斷在 1 區(qū)域里面的話，滿足的條件就必須為：0 ＜ β ≤ α，0 ＜ θ ≤ α 以此類推。。。
原理搞清楚了，就可以上代碼了。
1. html
<div class="box"> <img src="upimg/comm.png"/> <div class="innerBox"> <div class="inner"></div> </div> </div>
說明：box是裝圖片的一個列表，innerBox是裝提示框的盒子，inner是提示框的內(nèi)容，inner也要設(shè)置絕對定位是因?yàn)橹挥羞@樣才能設(shè)置top和left值。實(shí)際上就相當(dāng)于給人錯覺提示框innerBox在移動，實(shí)際上是提示框里的內(nèi)容inner在移動。
2. css
*{
padding:0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
background: skyblue;
float: left;
position: relative;
overflow: hidden;
margin:10px 10px 0 0;
}
.innerBox{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
}
img{
width: 100%;
}
.inner{
position: absolute;
top:40px;
left: 0;
width: 100%;
height: 40px;
background: red;
}
3. js
$('.box').hover(function(e){
getIn($(this),e)
},function(e){
getOut($(this),e)
})
//獲取在第幾區(qū)域
function getdirection(obj,e){
var bleft=obj.offset().left;//距離左部的大小
var btop=obj.offset().top;//距離頂部的大小
var li_w=obj.width();//每個圖片的寬度
var li_h=obj.height();//每個圖片的高度
var evt=e||window.event;
var x=evt.pageX-bleft;//鼠標(biāo)在該圖片中的x坐標(biāo)
var y=evt.pageY-btop;//鼠標(biāo)在該圖片中的y坐標(biāo)
x=Math.abs(x);//這里是防止移出的時候，x的值為負(fù)（bleft的值大于pageX）
y=Math.abs(y);//與上同理
if(x>li_w){
x=li_w-(x-li_w);//這里是防止在第四部分移出的時候，pageX的值大于圖片的長度，所以需要用到長度減去多余的部分就是在第四區(qū)域的對稱位置
}
var Alltan=Math.atan(li_h/li_w);//這是α
var leftTan=Math.atan(y/x);//這是β
var rightTan=Math.atan(y/(li_w-x));//這是θ
if(0<=leftTan&&leftTan<=Alltan&&0<=rightTan&&rightTan<=Alltan){
console.log("在第一部分")
return 1;
}else if(Alltan<=leftTan&&leftTan<=Math.asin(1)&&0<=rightTan&&rightTan<=Alltan){
console.log("在第二部分");
return 2;
}else if(Alltan<=leftTan&&leftTan<=Math.asin(1)&&Alltan<=rightTan&&rightTan<=Math.asin(1)){
console.log("在第三部分");
return 3;
}else if(0<=leftTan&&leftTan<=Alltan&&Alltan<=rightTan&&rightTan<=Math.asin(1)){
console.log("在第四部分");
return 4;
}
}
//移入
function getIn(obj,e){
var statu=getdirection(obj,e);
var li_w=obj.width();
var that=obj.find('.inner');
var child_h=that.height();
if(statu===1){
that.css({
"left":0,
"top":-child_h
}).stop().animate({
"top":0
},200)
}else if(statu===2){
that.css({
"left":-li_w,
"top":0
}).stop().animate({
"left":0
},200)
}else if(statu===3){
that.stop().animate({
"top":0
},200)
}else if(statu===4){
that.css({
"left":li_w,
"top":0
}).stop().animate({
"left":0
},200)
}
}
//移出
function getOut(obj,e){
var statu=getdirection(obj,e);
var li_w=obj.width();
var that=obj.find('.inner');
var child_h=that.height();
if(statu===1){
that.stop().animate({
"top":-child_h
},200,function(){
$(this).css({
"left":0,
"top":child_h
})
})
}else if(statu===2){
that.stop().animate({
"left":-li_w
},200,function(){
$(this).css({
"left":0,
"top":child_h
})
})
}else if(statu===3){
that.stop().animate({
"top":child_h
},200)
}else if(statu===4){
that.stop().animate({
"left":li_w
},200,function(){
$(this).css({
"left":0,
"top":child_h
})
})
}
}
說明：Math.asin(1) 表示 90度的反正弦值，由于tan90不存在，所以換成sin90了。
總結(jié)：對比自己做的和百度的圖片效果，發(fā)現(xiàn)百度的動畫給人明顯的要舒服點(diǎn)，估計是因?yàn)橐瞥龅臅r候，我直接設(shè)置css，導(dǎo)致動畫不連貫原因，還有個就是stop（）導(dǎo)致動畫直接結(jié)束，所以還有可以修改的地方。這里只介紹一個思路
以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)百度圖片移入移出內(nèi)容提示框上下左右移動的效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
jQuery插件imgPreviewQs實(shí)現(xiàn)上傳圖片預(yù)覽
這篇文章主要介紹了jQuery插件imgPreviewQs實(shí)現(xiàn)上傳圖片預(yù)覽的相關(guān)資料,需要的朋友可以參考下2016-01-01
jQuery實(shí)現(xiàn)的導(dǎo)航條點(diǎn)擊后高亮顯示功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的導(dǎo)航條點(diǎn)擊后高亮顯示功能,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-03-03
這篇文章主要為大家詳細(xì)介紹了Jquery插件仿百度搜索關(guān)鍵字自動匹配功能的相關(guān)資料,需要的朋友可以參考下2016-05-05
本文通過一段示例代碼給大家介紹了基于jQuery解決ios10以上版本縮放問題，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-11-11
jquery 校驗(yàn)中國身份證號碼實(shí)例詳解
這篇文章主要介紹了jquery 校驗(yàn)中國身份證號碼實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04
JQuery點(diǎn)擊按鈕跳轉(zhuǎn)頁面的方法
這篇文章主要介紹了JQuery點(diǎn)擊按鈕跳轉(zhuǎn)頁面的實(shí)現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
jQuery 實(shí)現(xiàn)自動填充郵箱功能（帶下拉提示）
本文用 jQuery 實(shí)現(xiàn)一個用戶輸入字符時出現(xiàn)能夠提示郵箱后綴名的下拉菜單，并且在選擇下拉菜單中的郵箱后綴名后可自動填充未完成的輸入框。2014-10-10
jQuery源碼解讀之a(chǎn)ddClass()方法分析
這篇文章主要介紹了jQuery源碼解讀之a(chǎn)ddClass()方法,注釋形式較為詳細(xì)的分析了addClass()方法的實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
Jquery通過JSON字符串創(chuàng)建JSON對象
這篇文章主要介紹了Jquery如何通過JSON字符串創(chuàng)建JSON對象,并附詳細(xì)示例，需要的朋友可以參考下2014-08-08
jQuery中removeData()方法用法實(shí)例
這篇文章主要介紹了jQuery中removeData()方法用法,實(shí)例形式分析了removeData()方法移除匹配元素指定數(shù)據(jù)的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12