javascript實(shí)現(xiàn)電商放大鏡效果
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)電商放大鏡效果的具體代碼，供大家參考，具體內(nèi)容如下
學(xué)習(xí)內(nèi)容：
1、event.pageX 屬性返回鼠標(biāo)指針的位置，相對(duì)于文檔的左邊緣。2、clientX 事件屬性返回當(dāng)事件被觸發(fā)時(shí)鼠標(biāo)指針相對(duì)于瀏覽器頁(yè)面（或客戶區(qū)）的水平坐標(biāo)。3、onmouseenter鼠標(biāo)移入4、onmouseleave鼠標(biāo)移出
案例完整代碼。html+css3+javascript
案例需求:鼠標(biāo)點(diǎn)擊左邊圖片時(shí)（鼠標(biāo)呈十字架），遮罩層顯示，右邊盒子顯示。且鼠標(biāo)移動(dòng)中心在遮罩層中心，右邊大盒子顯示鼠標(biāo)點(diǎn)到的地方，以800：350比例顯示。遮罩層只能規(guī)定左邊盒子范圍內(nèi)移動(dòng)而且不給超出。
步驟：
1. 查找元素
1.1 查找 main 總分區(qū) 1.2 查找 small 盒子 1.3 查找 small 盒子內(nèi)的 img 小圖片 1.4 查找 mask 遮罩層 1.5 查找 big 盒子 1.6 查找 big 盒子內(nèi)的 img 大圖片
2. 鼠標(biāo)移入 main 的時(shí)候
2.1 顯示 遮罩盒子 2.2 顯示 大圖分區(qū)
3. 鼠標(biāo)移出 main 的時(shí)候
3.1 隱藏 遮罩盒子 3.2 隱藏 大圖分區(qū)
4. 鼠標(biāo)在 main 移動(dòng)的時(shí)候 !!!
4.1 遮罩盒子 跟隨 鼠標(biāo)移動(dòng) 4.2 遮罩盒子 在 鼠標(biāo)中心 處理 4.3 遮罩盒子 在 分區(qū)邊界 內(nèi)移動(dòng)處理 4.4 大圖片 <反向> <按比例> 跟隨 鼠標(biāo)移動(dòng)
注意. 獲取元素偏移值和寬高
1. 獲取 分區(qū) 的 水平，垂直偏移值 2. 獲取 分區(qū) 的 寬度，高度 3. 獲取 遮罩盒子 的 寬度，高度 (隱藏的盒子無(wú)法獲取寬高) 4. 獲取 大圖片 的 寬度，高度 (隱藏的盒子無(wú)法獲取寬高)
html代碼:
<body> <!-- 整個(gè)大盒子 --> <div id='main'> <div class='small'> <!--小圖--> <img alt='' src='http://www.intensediesel.com/img/iphoneX.jpg' /> <!-- 遮擋層,黃色的小方塊 --> <div class='mask'></div> </div> <!--大層--> <div class='big'> <!--大圖--> <img alt='' src='http://www.intensediesel.com/img/iphoneX.jpg' /> </div> </div></body>
css代碼:
<style> * { margin: 0; padding: 0; } .main { width: 350px; height: 350px; margin: 100px; border: 1px solid #ccc; position: relative; } .big { width: 400px; height: 400px; position: absolute; top: 0; left: 360px; border: 1px solid #ccc; overflow: hidden; display: none; } .mask { width: 175px; height: 175px; background: rgba(255, 255, 0, 0.4); position: absolute; top: 0px; left: 0px; /* 把鼠標(biāo)指針換成移動(dòng)圖標(biāo) */ cursor: move; display: none; } .small { position: relative; height: 350px; width: 350px; } .active .mask, .active .big { display: block; } .big img { /* 相對(duì)定位：相對(duì)自己原本的位置定位，原來(lái)的位置保留的 */ position: absolute; }</style>
javascript代碼:
<script> //查找元素 var main = document.querySelector('.main'); var small = document.querySelector('.small'); //左邊小盒子 var smallImg = document.querySelector('.smallImg'); var mask = document.querySelector('.mask'); //黃色遮罩層 var big = document.querySelector('.big');//右邊小盒子 var bigImg = document.querySelector('.big .bigImg'); //2. 鼠標(biāo)移入 main 的時(shí)候 //2.1 顯示 遮罩盒子 // 2.2 顯示 大圖分區(qū) main.onmouseenter=function () { mask.style.display='block'; big.style.display='block'; }; main.onmouseleave=function () { mask.style.display='none'; big.style.display='none'; }; // 4. 鼠標(biāo)在 main 移動(dòng)的時(shí)候 !!! // 4.1 遮罩盒子 跟隨 鼠標(biāo)移動(dòng) // 4.2 遮罩盒子 在 鼠標(biāo)中心 處理 // 4.3 遮罩盒子 在 分區(qū)邊界 內(nèi)移動(dòng)處理 // 4.4 大圖片 <反向> <按比例> 跟隨 鼠標(biāo)移動(dòng) small.onmousemove=function (e) { var x=e.pageX-100-(175/2); //盒子的寬高為300px，因?yàn)槭髽?biāo)默認(rèn)在左上角。因?yàn)樾枰蜃笠苿?dòng)自身一半 var y=e.pageY-100-(175/2); 盒子的寬高為300px，因?yàn)槭髽?biāo)默認(rèn)在左上角。因?yàn)樾枰蛳乱苿?dòng)自身一半 if(x<0) x=0; //規(guī)定遮罩層移動(dòng)范圍。如果遮罩層超出了小盒子邊框，x就重置為0. if(y<0) y=0; // //規(guī)定遮罩層移動(dòng)范圍。如果遮罩層超出了小盒子邊框，y就重置為0. if(x>175) x=175; //遮罩層本身的寬高為175 if(y>175) y=175; mask.style.top=(y)+'px'; mask.style.left=(x)+'px'; bigImg.style.top=(-y*(800/350))+'px'; //右邊放大效果，以800：350顯示 bigImg.style.left=(-x*(800/350))+'px'; //在xy前面加-號(hào)是因?yàn)樾枰聪蝻@示 }</script>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. php bugs代碼審計(jì)基礎(chǔ)詳解2. html小技巧之td,div標(biāo)簽里內(nèi)容不換行3. xml中的空格之完全解說(shuō)4. ASP中解決“對(duì)象關(guān)閉時(shí),不允許操作。”的詭異問題……5. XML入門的常見問題(四)6. ASP中if語(yǔ)句、select 、while循環(huán)的使用方法7. ASP使用MySQL數(shù)據(jù)庫(kù)的方法8. ASP動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)經(jīng)驗(yàn)分享9. WMLScript的語(yǔ)法基礎(chǔ)10. msxml3.dll 錯(cuò)誤 800c0019 系統(tǒng)錯(cuò)誤:-2146697191解決方法
網(wǎng)公網(wǎng)安備