原生js實現放大鏡效果

標籤：頁面   邏輯   cli   tle   get   function   放大   .com   也有   

 放大鏡效果主要涉及3個滑鼠事件：

1.onmouseover，滑鼠移入浮動小方塊和顯示放大的地區顯示；

2.onmousemove，滑鼠移動，小方塊和放大地區一起移動；

3.onmouseout，滑鼠移除小方塊和放大地區消失。

其實放大鏡效果最主要的是小方塊與放大地區的比例及位置：

<div id="small_box"><div class="small_Pic"><div id="float_box"></div><img src="1.png"  /></div></div><div id="big_box"><div class="big_Pic"><img src="1.png"  /></div></div>

*{padding: 0;margin: 0;}img{border: none;}#small_box{width: 350px;height: 175px;border: 1px solid #666;overflow: hidden;position: relative;top:200px;left: 100px;display: inline-block;}.small_Pic img{width: 350px;height: 175px;}#big_box{width: 350px;height: 175px;border: 1px solid #666;position: absolute;top:200px;left: 500px;overflow: hidden;display: none;}.big_Pic img{width: 1400px;height: 700px;position: absolute;}#float_box{width: 100px;height: 50px;background-color: #000;opacity: 0.5;position: absolute;    display: none;cursor: move;z-index: 99;}

js代碼：

window.onload=function(){/*擷取頁面元素*/var small_box=document.getElementById(‘small_box‘);var float_box=document.getElementById(‘float_box‘);var big_box=document.getElementById(‘big_box‘);var big_box_img=big_box.getElementsByTagName(‘img‘)[0];        /*滑鼠移入時，放快與放大地區顯示*/small_box.onmouseover=function(e){float_box.style.display=‘block‘;big_box.style.display=‘block‘;}/*滑鼠移動時觸發*/small_box.onmousemove=function(e){e=e||window.event;  //e.clientX是被觸發時滑鼠指標向對於瀏覽器頁面的水平座標var float_box_left=e.clientX-small_box.offsetLeft-50;  //求出滑鼠位於浮動層的中心var float_box_top=e.clientY-small_box.offsetTop-25;var left=float_box.offsetLeft*big_box_img.offsetWidth/small_box.offsetWidth;//求的x2值，即圖片位移方框的左距var top=float_box.offsetTop*big_box_img.offsetHeight/small_box.offsetHeight;//求的x2值，即圖片位移方框的高度 big_box_img.style.left=-left+‘px‘; big_box_img.style.top=-top+‘px‘; /*控制浮動層不能超出方框的範圍*/if(float_box_left<0){float_box.style.left=0;}else if(float_box_left>(small_box.offsetWidth-100)){float_box.style.left=small_box.offsetWidth-100+‘px‘;}else{float_box.style.left=float_box_left+‘px‘;}if(float_box_top<0){float_box.style.top=0;}else if(float_box_top>(small_box.offsetHeight-50)){float_box.style.top=small_box.offsetHeight-50+‘px‘;}else{float_box.style.top=float_box_top+‘px‘;}}/*滑鼠移出時觸發*/small_box.onmouseout=function(){float_box.style.display=‘none‘;big_box.style.display=‘none‘;}}

效果是實現了，但是由於除數時有小數點的偏差，可能效果也有一點偏差，大致就是這樣。最重要的還是實現效果中的思維邏輯。

推薦網址：http://www.imooc.com/learn/32，放大鏡教學視頻。

原生js實現放大鏡效果