JS實現電商放大鏡效果

來源：懂視網責編：小采時間：2020-11-27 22:31:48

JS實現電商放大鏡效果

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

推薦度：

點擊下載本文 文檔為doc格式

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

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

<!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");

 // 給左側加鼠標移動事件
 cover.onmousemove = function(){

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

 //計算色塊的位置
 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;
 }

 // 讓色塊移動
 box.style.left = box_left + 'px';
 box.style.top = box_top + 'px';

 //計算右側圖片位置
 var rpic_left = box_left*-2;
 var rpic_top = box_top*-2;

 // 讓右側移動
 rpic.style.left = rpic_left + 'px';
 rpic.style.top = rpic_top + 'px';

 }

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

 // 給左側加鼠標移出事件
 cover.onmouseout = function(){
 // 讓左側色塊和右側隱藏
 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>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JS實現電商放大鏡效果

推薦度：

點擊下載本文 文檔為doc格式

標簽：電商實現 js

熱門焦點

JS實現電商放大鏡效果

JS實現電商放大鏡效果

JS實現電商放大鏡效果

最新推薦

猜你喜歡

熱門推薦