js實現仿京東商品放大鏡和選項卡效果

2021-09-19 16:17:05 字數 1392 閱讀 3330

滑鼠移入下面商品列表之後，在最上面顯示對應的商品

預設情況下，黃色盒子和右側大盒子是隱藏的

滑鼠進入上面商品列表後，小黃盒子顯示，右側大盒子的商品顯示

右側商品的顯示，是左側商品的兩倍並且是跟左側黃色盒子移動距離相反



var item = document.getelementsbyclassname("item");


var img = document.getelementsbyclassname("item-img");


//建立乙個下面商品小圖示的陣列，


//右側大的陣列


//設定左側盒子的移入顯示，移出隱藏事件


leftbox1.onmouseover = function()


leftbox1.onmouseout = function()


for(var i = 0; i < item.length;i++)


this.style.border = "2px solid red";


xiaoxie.setattribute("src",arr[this.index])


daxie.setattribute("src",arr[this.index]) }}


// mark1.onmousemove = function(e)


if(y<0)


if(x>maxw)


if(y>maxh)


mark1.style.left = x+"px";


mark1.style.top = y+"px";


// 右側大盒子的實際移動距離是左側的兩倍，並且是相反的


daxie.style.left = -x*2+"px"


daxie.style.top = -y*2+"px"


}
最後寫完發現，黃色小盒子的在滑鼠開始移入，會自動出現在左上角，不會出現在滑鼠開始出現的位置

原因：滑鼠移動事件應繫結給左側大盒子，不是小黃盒子，就可以解決這個問題

js 仿京東放大鏡

功能模組 整個案例可以分為三個功能模組 滑鼠經過小盒子，黃色的遮擋層 和 大盒子顯示，離開隱藏2個盒子功能 黃色的遮擋層跟隨滑鼠功能。移動黃色遮擋層，大跟隨移動功能。案例分析 黃色的遮擋層跟隨滑鼠功能。把滑鼠座標給遮擋層不合適。因為遮擋層座標以父盒子為準。首先是獲得滑鼠在盒子的座標。之後把數值給遮擋...

JS 仿京東放大鏡

滑鼠移動的時候黃色背景層跟著移動 16 content.addeventlistener mousemove function e else if maskx maskmax 30if masky 0 else if masky maskmax 35 mask.style.left maskx px...

仿京東放大鏡效果

案例分析 1.整個案例可以分為三個功能模組 2.滑鼠經過小盒子，黃色的遮擋層和大盒子顯示，離開時2個盒子隱藏功能 3.黃色的遮擋層跟隨滑鼠移動功能 4.移動黃色遮擋層，大跟隨移動功能。效果 html部分 1 doctype html 2 html lang en 3 head 4 meta char...