拉勾網首頁——隨滑鼠滑動方向進緩慢插入圖片是怎麼實現的?

如圖所示！想請教大神

---

1. 拉勾網首頁界面按F12（這裡瀏覽器選用的是chrome），查看html結構，找到關鍵選擇器

   

2. 通過copy出來的「da-thumbs」在該頁面引用的home.min.js中搜索找到代碼如下，發現這裡為選擇器下的每一個li元素加上了一個hoverdir方法

   

3. 接著關鍵字搜索hoverdir到一個定義的自執行函數，只能幫你這麼多了

   

---

仔細看了一下午這個問題,可以如樓上所說使用mouseenter特性,也可以使用拉勾網自己的js來實現

但是其實也可以完全通過css3來實現

代碼如下Multi-direction hover

就是邏輯有點複雜

---

1.mouseenter(不兼容)判斷滑鼠移入時候的位置(x,y)

2.把移入的正方形當成圓形，並計算滑鼠位置和圓心位置關係(Math.atan2)

3.把弧度轉換成角度，分成4個象限，求出滑鼠移入時候的象限

4.把需要移入的遮罩層(絕對定位)定位到需要的象限那裡

5.通過運動函數讓其覆蓋到方框中間。

6.移出同理

&
&
&
&
&title&
& *{margin: 0;padding: 0;}
ul{margin: 100px auto;width: 200px;height: 200px;}
li{list-style:none;width:200px;height:200px;position:relative;overflow:hidden;}
div{background: orange;width:200px;height: 200px;}
span{position:absolute;top:0;left:-200px;width:100%;height:100%;background:lightgreen;}
& &
&
& & &&&&
& & &
&
var oUl = document.querySelector("ul");
var oLi =oUl.children[0];
var oSpan = oUl.querySelector("span");
oLi.onmouseenter = function(ev){
var oEvent = ev||event;
var q=getMousePos(this,oEvent);
switch(q){
case 0:
oSpan.style.left = "200px";
oSpan.style.top="0";
break;
case 1:
oSpan.style.left="0"
oSpan.style.top = "200px";
break;
case 2:
oSpan.style.left = "-200px";
oSpan.style.top="0";
break;
case 3:
oSpan.style.left="0"
oSpan.style.top= "-200px";
break;
}
move(oSpan,{left:0,top:0})
};
oLi.onmouseleave = function(ev){
var oEvent = ev||event;
var q=getMousePos(this,oEvent);
switch(q){
case 0:
move(oSpan,{left:200,top:0})
break;
case 1:
move(oSpan,{left:0,top:200})
break;
case 2:
move(oSpan,{left:-200,top:0})
break;
case 3:
move(oSpan,{left:0,top:-200})
break;
}
}

function getMousePos(obj,ev){
var w = obj.offsetWidth;
var h = obj.offsetHeight;
var x = obj.offsetLeft+w/2-ev.pageX;
var y = obj.offsetTop+h/2-ev.pageY;
return Math.round((Math.atan2(y,x)*180/Math.PI+180)/90)%4;
};
function move(obj,json){
var start={};
var dis={};
for(var name in json){
start[name]=parseFloat(getComputedStyle(obj,false)[name]);
switch(name){
case "left":
start[name]=obj.offsetLeft;
break;
case "top":
start[name]=obj.offsetTop;
break;
}
dis[name]=json[name]-start[name];
}
var count = Math.round(300/(1000/30));
var n=0;
clearInterval(obj.timer);
obj.timer=setInterval(function(){
n++;
for(var name in json){
var a=n/count;
var cur = start[name]+dis[name]*a;
obj.style[name]=cur+"px";
}
if(n==count){
clearInterval(obj.timer);
}
},1000/30)
}
&
&


---

Direction-Aware Hover with CSS3 and jQuery

Direction-Aware Hover Effect with CSS3 and jQuery

webmandesign/jquery.hoverdir · GitHub

---

我是一個前端菜鳥，看到你的問題，我覺得我可以回答下，因為我實現過類似的。

首先在顯示的img下面再加一個div作為遮罩層（絕對定位），結構你在拉鉤網F12之後就能看到，img以及該div是同一層級的，如下

然後監聽img的mouseenter（獲取起始點坐標位置），用這個位置與img本身自己的offset的四條邊進行比較，就能得出是從那個方向滑入進來的，再監聽mouseover事件獲取移動位置設置到div的遮罩層的left或top，按照這個思路實現沒有問題

---

我覺得直接判斷滑鼠相對位置就可以了。

類似這樣規定四個區域，上部區域就從上部進入。

---

推薦閱讀：