JS實(shí)現(xiàn)電商放大鏡效果

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:31:48

JS實(shí)現(xiàn)電商放大鏡效果

JS實(shí)現(xiàn)電商放大鏡效果:前端JS電商放大鏡效果，供大家參考，具體內(nèi)容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>26-電商放大鏡</title> <style type=text

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JS實(shí)現(xiàn)電商放大鏡效果:前端JS電商放大鏡效果，供大家參考，具體內(nèi)容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>26-電商放大鏡</title> <style type=text

前端JS電商放大鏡效果，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>26-電商放大鏡</title>
 <style type="text/css">
 
 *{
 padding: 0;
 margin: 0;
 }
 #left{
 padding: 0;
 margin: 0;
 width: 400px;
 height: 400px;
 border: 2px solid blue;
 background: url(http://chuantu.biz/t6/17/1503469475x2063891122.jpg) no-repeat;
 float: left;
 cursor: crosshair;
 position: relative;
 box-sizing: border-box;
 }
 #box{
 width: 200px;
 height: 200px;
 background: white;
 opacity: 0.6;
 position: absolute;
 top: 0;
 left: 0;
 display: none;
 box-sizing: border-box;
 }
 #cover{
 width: 400px;
 height: 400px;
 background: red;
 position: absolute;
 left: 0;
 top: 0;
 opacity: 0;
 box-sizing: border-box;
 }
 #right{
 width: 400px;
 height: 400px;
 border: 2px solid black;
 overflow: hidden;
 position: relative;
 display: none;
 box-sizing: border-box;
 }
 #rpic{
 position: absolute;
 }
 </style>

 <script type="text/javascript">
 
 window.onload = function(){
 var left = document.getElementById("left");
 var right = document.getElementById("right");
 var rpic = document.getElementById("rpic");
 var box = document.getElementById("box");
 var cover = document.getElementById("cover");

 // 給左側(cè)加鼠標(biāo)移動(dòng)事件
 cover.onmousemove = function(){

 //獲得事件對(duì)象
 var ev = window.event;
 var mouse_left = ev.offsetX || ev.layerX;
 var mouse_top = ev.offsetY || ev.layerY;
 // document.title = mouse_left + '|' + mouse_top;

 //計(jì)算色塊的位置
 var box_left = mouse_left - 100;
 var box_top = mouse_top - 100;

 // 判斷是否超出
 if (box_left < 0) {
 box_left = 0;
 }
 if (box_left > 200) {
 box_left = 200;
 }
 if (box_top < 0) {
 box_top = 0;
 }
 if (box_top > 200) {
 box_top = 200;
 }

 // 讓色塊移動(dòng)
 box.style.left = box_left + 'px';
 box.style.top = box_top + 'px';

 //計(jì)算右側(cè)圖片位置
 var rpic_left = box_left*-2;
 var rpic_top = box_top*-2;

 // 讓右側(cè)移動(dòng)
 rpic.style.left = rpic_left + 'px';
 rpic.style.top = rpic_top + 'px';

 }

 //給左側(cè)加鼠標(biāo)移入事件
 cover.onmouseover = function(){
 // 讓左側(cè)色塊和右側(cè)隱藏
 box.style.display = 'block';
 right.style.display = 'block';
 }

 // 給左側(cè)加鼠標(biāo)移出事件
 cover.onmouseout = function(){
 // 讓左側(cè)色塊和右側(cè)隱藏
 box.style.display = 'none';
 right.style.display = 'none';
 }
 }

 </script>
</head>
<body>
 <div id="left">
 <div id="box"></div>
 <div id="cover"></div>
 </div>
 <div id="right">
 <img src="http://chuantu.biz/t6/17/1503469419x2063891122.jpg" id="rpic">
 </div>
</body>
</html>

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JS實(shí)現(xiàn)電商放大鏡效果

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：電商實(shí)現(xiàn) js

熱門焦點(diǎn)

JS實(shí)現(xiàn)電商放大鏡效果

JS實(shí)現(xiàn)電商放大鏡效果

JS實(shí)現(xiàn)電商放大鏡效果

最新推薦

猜你喜歡

熱門推薦