這篇文章主要爲大家詳細介紹了JavaScript實現圖片放大鏡效果,具有一定的參考價值,感興趣的小夥伴們可以參考一下
本文實例爲大家分享了js實現圖片放大鏡效果的具體代碼,供大家參考,具體內容如下
1、結構佈局HTML代碼
<div class="leftcon" id="left"> <img src="~/Content/images/風景-1.jpg" /> <div class="slide_box" id="box"></div> </div> <div class="rightcon" id="right"> <img src="~/Content/images/風景-1.jpg" /> </div>
2、修飾結構css樣式代碼
img { display: block; }.leftcon { width: 350px;height: 350px; margin: 100px 20px 0px 312px; float: left;position: relative; box-shadow: 3px 3px 10px 0 #111111; /*給圖片施加陰影效果 */ -webkit-box-shadow: 3px 3px 10px 0 #111111; /*兼容性處理*/ -moz-box-shadow: 3px 3px 10px 0 #111111; }.leftcon img { width: 100%;height: 100%; }.leftcon .slide_box { display: none; /*將小方塊盒子隱藏*/ position: absolute;top: 0;left: 0; width: 175px;height: 175px; background: #000;opacity: 0.3; cursor: move; /*改變鼠標的形狀*/ }.rightcon { display: none; /*將右邊div隱藏*/ width: 350px;height: 350px; margin-top: 100px;float: left; overflow: hidden;position: relative; }.rightcon img { width: 200%;height: 200%; position: absolute;left: 0px;top: 0px; }
3、js獲取事件對象
1)、Event是獲取事件對象,對象代表事件的狀態,比如事件在其中發生的元素、鍵盤按鍵的狀態、
鼠標的位置、鼠標按鈕的狀態,envet是windows的一個屬性。 放大鏡實現方法(獲取右邊圖片定位)
2)、e.clientY:返回事件觸發時鼠標相對於元素視口的Y座標。
e.clientX:返回事件觸發時鼠標相對於元素視口的X座標。
這裏的元素視口實際上代指就是瀏覽器,clientX是鼠標距離瀏覽器左邊框的距離,
clientY是鼠標距離瀏覽器上邊框的距離。
offsetTop獲取對象相對於版面或由offsetTop屬性指定的父座標的計算頂端位置。
這裏就是左邊的div相對於body即瀏覽器窗口的縱向距離
offsetLeft獲取對象相對於版面或由offsetLeft屬性指定的父座標的計算頂端位置。
這裏就是左邊的div相對於body即瀏覽器窗口的縱橫向距離
offsetHeight是對象的可見高度。這裏是指小滑塊的高度
offsetHeight是對象的可見寬度。這裏是指小滑塊的寬度
var leftone = document.getElementById('left'); var rightone = document.getElementById('right'); var box = document.getElementById('box'); var rimg = rightone.getElementsByTagName("img")[0]; function getPosition(e){ //這裏的參數e就是代表event //首先我們要去判斷事件源,獲取事件源,也就是e var e=e||window.event; //實現兼容 //理解: //這個表達式寫全是這樣:var e=event?event||window.event; //如果存在event,那麼var e=event;而如果不存在event, //那麼var e=window.event.那麼可以看出確實能實現兼容 var top = e.clientY-leftone.offsetTop-box.offsetHeight/2; //計算小圖容器裏的鼠標座標(要減去最外層的偏移) var left = e.clientX-leftone.offsetLeft-box.offsetWidth/2; //這裏爲什麼除以2?是因爲我們不除以2的話,事件源也就是鼠標就在這個小滑塊的的右下角,並不美觀 //我們要讓鼠標位於滑塊的中心,所以寬高各減去一半 //邊界判斷 //獲取小滑塊最大縱向移動距離 var maxtop = leftone.offsetHeight - box.offsetHeight; //獲取小滑塊最大橫向移動距離 var maxleft = leftone.offsetWidth - box.offsetWidth; var mintop = 0; //獲取小滑塊最小縱向移動距離 var minleft = 0; //獲取小滑塊最大縱向移動距離 var mvtop; //定義小滑塊的縱向移動距離 var mvleft; //定義小滑塊的橫向移動距離 // 判斷 if (top<mintop) { box.style.top = mintop + "px"; mvtop = mintop; //理解: //top是鼠標到瀏覽器的垂直距離-左邊div頂部到瀏覽器的垂直距離-小滑塊的高度的一半。 //那麼現在鼠標在小滑塊的中心,也就是說,top就等於小滑塊的頂部到左邊div的垂直距離 //如果top<0,就是說小滑塊和左邊div頂部重合,就讓小滑塊的top值爲0,即鼠標繼續向上移動, //小滑塊不在移動,從而讓小滑塊的移動範圍不能超過左邊div的寬高範圍 //下方同理 }else if(top>maxtop){ box.style.top = maxtop + "px"; mvtop = maxtop; //如果top>maxtop,就是說小滑塊和左邊div底部重合,就讓小滑塊的top值爲maxtop, //即鼠標繼續向下移動,小滑塊不在移動,從而讓小滑塊的移動範圍不能超過左邊div的寬高範圍 }else{ box.style.top = top + "px"; mvtop = top; //不超過邊界,則小滑塊的垂直移動距離就等於top,即小滑塊的頂部到左邊div的垂直距離 } if(left<minleft){ box.style.left = minleft + "px"; mvleft = minleft }else if(left>maxleft){ box.style.left = maxleft + "px"; mvleft = maxleft }else{ box.style.left = left + "px"; mvleft = left; } //因爲右邊div的圖片是左邊div的圖片的兩倍,而左邊div和右邊div都是小滑塊的寬高的兩倍, //而要讓右邊div放大左邊的小滑塊的包圍圖片,所以右邊大圖的定位座標是小滑塊的兩倍,這樣才能進行映射 //右側圖片跟着運動:左側小滑塊移動多少,右側跟着移動他的2倍即可 rimg.style.top = -mvtop*2 + "px"; rimg.style.left = -mvleft*2 + "px"; }
4、鼠標移入、移出事件
左側盒子鼠標移入,小滑塊和右側圖片顯示,銜接鼠標移動效果
onmouseenter 事件類似於 onmouseover 事件。 唯一的區別是 onmouseenter 事件不支持冒泡。
//鼠標移動效果 leftone.onmousemove = function(e){ var e=e||window.event; //判斷事件源 box.style.display = "block"; getPosition(e); rightone.style.display = "block"; } //鼠標移出效果 leftone.onmouseleave = function(e){ var e=e||window.event; //判斷事件源 box.style.display = "none"; rightone.style.display = "none"; }
5、效果圖
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持神馬文庫。