「?? 作者：極客小俊」
「?? 把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主」

前言??

商品的放大鏡效果相信逛過(guò)商城的朋友應(yīng)該都見(jiàn)過(guò)吧，代碼邏輯其實(shí)也很簡(jiǎn)單! 只要你掌握了onmouseover+onmouseout+onmousemove以及事件對(duì)象和一點(diǎn)點(diǎn)的DOM操作就可以輕松幾行JS代碼實(shí)現(xiàn)出來(lái)!

準(zhǔn)備工作 ??

搞幾張圖片來(lái)當(dāng)素材吧， 我這里準(zhǔn)備的是一張大圖 800x 800 ?小圖450x450 就可以了

接下來(lái)直接上代碼??

HTML結(jié)構(gòu) ??

<div id="div1">
? ? ? ?<!--小圖-->
? ? ? ?<div class="small_pic">
? ? ? ? ? ?<span class="mark"></span>
? ? ? ? ? ?<span class="float_layer"></span>
? ? ? ? ? ?<img ?src="img/small.jpeg" longdesc="" />
? ? ? ?</div>

? ? ? ? <!--大圖-->
? ? ? ?<div class="big_pic">
? ? ? ? ? ?<img ?src="img/big.jpeg" alt="" longdesc="" />
? ? ? ?</div>
</div>

html布局結(jié)構(gòu)的方式其實(shí)是有多種多樣的，這也影響后期的js效果設(shè)計(jì)

CSS樣式 ??

*{
? ?margin: 0;
? ?padding: 0;
}
a{
? ?text-decoration: none;
}

#div1 { width:450px; height:450px; padding: 5px; border: 1px solid #ccc; position: relative; left: 50px; top:30px;}

#div1>.small_pic>.float_layer { width: 100px; height: 100px; border: 1px solid #000; background: #fff; filter: alpha(opacity: 30); opacity: 0.3; position: absolute; top: 0; left: 0; display:none; }
#div1>.small_pic>.mark {width:100%; height:100%; position:absolute; z-index:2; left:0px; top:0px; background:red; filter:alpha(opacity:0); opacity:0;}
#div1>.small_pic>.mark:hover{ cursor: move;}

#div1>.big_pic { position: absolute; top: -1px; left: 480px; width:500px; height:500px; overflow:hidden; border:2px solid #CCC; display:none; }

#div1>.big_pic>img { position:absolute; top: 0px; left: 0px; }

其實(shí)有時(shí)候覺(jué)得css還是很重要的，畢竟css寫好了 對(duì)后期js的整體代碼邏輯也有一定影響的 這一點(diǎn)大家注意哈! ?hohohoho ??????

javascript代碼邏輯

function getByClass(obj,cName){
? ? ? ? var List=obj.getElementsByTagName("*");
? ? ? ? var arr=[];
? ? ? ? var i=0;
? ? ? ? var len=List.length;
? ? ? ? for(i=0;i<len;i++){
? ? ? ? ? ? if(List[i].className===cName){
? ? ? ? ? ? ? ? arr.push(List[i]);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? return arr;
}

window.onload=function () {

? ? var _div1=document.getElementById("div1");
? ? var _mark=getByClass(_div1,'mark')[0];
? ? var _floatLayer=getByClass(_div1,'float_layer')[0];
? ? var _bigPic=getByClass(_div1,'big_pic')[0];
? ? var _smallPic=getByClass(_div1,'small_pic')[0];
? ? var _Img=_bigPic.getElementsByTagName("img")[0];

? ? _mark.onmouseover=function(){
? ? ? ? _floatLayer.style.display="block";
? ? ? ? _bigPic.style.display="block";
? ? }

? ? _mark.onmouseout=function(){
? ? ? ? _floatLayer.style.display="none";
? ? ? ? _bigPic.style.display="none";
? ? }
? ? _mark.onmousemove=function(event){
? ? ? ? ?var e=event || window.event;
? ? ? ? ?var X=e.clientX-_div1.offsetLeft-_smallPic.offsetLeft-(_floatLayer.offsetWidth/2);
? ? ? ? ?var Y=e.clientY-_div1.offsetTop-_smallPic.offsetTop-(_floatLayer.offsetHeight/2);
? ? ? ? ?if(X<0){
? ? ? ? ? ? X=0;
? ? ? ? ?}
? ? ? ? if(Y<0){
? ? ? ? ? ? Y=0;
? ? ? ? }
? ? ? ? if(X>(_mark.offsetWidth-_floatLayer.offsetWidth)){
? ? ? ? ? ? X=(_mark.offsetWidth-_floatLayer.offsetWidth);
? ? ? ? }
? ? ? ? if(Y>(_mark.offsetHeight-_floatLayer.offsetHeight)){
? ? ? ? ? ? Y=(_mark.offsetHeight-_floatLayer.offsetHeight);
? ? ? ? }

? ? ? ? _floatLayer.style.left=X+'px';
? ? ? ? _floatLayer.style.top=Y+'px';

? ? ? ? var _Px=X/(_mark.offsetWidth-_floatLayer.offsetWidth);
? ? ? ? var _Py=Y/(_mark.offsetHeight-_floatLayer.offsetHeight);

? ? ? ? //大圖移動(dòng)
? ? ? ? _Img.style.left=-_Px*(_Img.offsetWidth-_bigPic.offsetWidth)+'px';
? ? ? ? _Img.style.top=-_Py*(_Img.offsetHeight-_bigPic.offsetHeight)+'px';
? ? }
}

有興趣的朋友可以直接下載代碼去試試，修改一下圖片就可以馬上使用!! ???? 【方言: 就等你說(shuō)要不要的!】

最終效果

如圖

如果文章對(duì)你有幫助的話就請(qǐng)

??點(diǎn)贊 ??評(píng)論 ??收藏

一鍵三連哦！

如果以上內(nèi)容有任何錯(cuò)誤或者不準(zhǔn)確的地方，????歡迎在下面 ?? 留個(gè)言指出!

或者你有更好的想法，歡迎一起交流學(xué)習(xí)??????????