首頁 > 開發者 > JavaScript
標籤：block cursor none ansi osi border body hidden meta
上例圖：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 .box { 13 width: 350px; 14 height: 467px; 15 margin: 100px; 16 border: 1px solid #ccc; 17 position: relative; 18 /*overflow: hidden;*/ 19 } 20 21 .big { 22 width: 400px; 23 height: 400px; 24 position: absolute; 25 top: 0; 26 left: 360px; 27 border: 1px solid #ccc; 28 overflow: hidden; 29 /*display: none;*/ 30 opacity: 0.1; 31 z-index: -1; 32 /*transform: translateX(-500px) scale(0);*/ 33 transition: all .4s; 34 } 35 36 .mask { 37 width: 175px; 38 height: 175px; 39 background: rgba(255, 255, 0, 0.4); 40 position: absolute; 41 top: 0px; 42 left: 0px; 43 cursor: move; 44 display: none; 45 } 46 47 .small { 48 position: relative; 49 } 50 .box:hover .mask{ 51 display: block; 52 } 53 .box:hover .big{ 54 transform: translateX(0px) scale(1); 55 opacity: 1; 56 z-index: 1; 57 /*display: block;*/ 58 } 59 </style> 60 </head> 61 <body> 62 <div class="box" id="box"> 63 <div class="small"><!--小層--> 64 <img src="img/small2.jpg" width="350" /> 65 <div class="mask" id="mask"></div><!--遮擋層--> 66 </div> 67 <div class="big" id="big"><!--大層--> 68 <img src="img/big2.jpg" width="800" /><!--大圖--> 69 </div> 70 </div> 71 </body> 72 </html> 73 <script> 74 /*以下注釋的代碼用CSS代替了*/ 75 // var box = document.getElementById("box"); 76 // var mask = document.getElementById("mask"); 77 // var big = document.getElementById("big"); 78 79 // box.onmouseover = function () { 80 // mask.style.display = "block"; 81 // big.style.display = "block"; 82 // } 83 // box.onmouseout = function () { 84 // mask.style.display = "none"; 85 // big.style.display = "none"; 86 // } 87 88 /** 89 * 1.滑鼠移上大分區，遮罩層和大圖顯示 90 * 2.滑鼠移出大分區，遮罩層和大圖隱藏 91 * 3.滑鼠在大分區內移動的時候，遮罩層跟滑鼠移動，大圖也跟著移動 92 * */ 93 94 var box = document.getElementById("box"); 95 var mask = document.getElementById("mask"); 96 var bigImg = document.getElementById("big").children[0]; 97 box.onmousemove = function (event) { 98 var pageX = event.pageX; 99 var pageY = event.pageY;100 // 資料有了，我們希望盒子跟著滑鼠走101 // 由於盒子是絕對位置，所以基於頁面擷取到的座標要做處理102 // 目標資料 = 滑鼠在頁面的座標 - 大盒子距離頁面的座標103 var boxOffsetLeft = box.offsetLeft ;104 var boxOffsetTop = box.offsetTop;105 var boxOffsetWidth = box.offsetWidth;106 var boxOffsetHeight = box.offsetHeight;107 108 var maskOffsetWidth = mask.offsetWidth;109 var maskOffseetHeight = mask.offsetHeight;110 // 讓滑鼠在mask盒子中心拖拽移動111 var mX = pageX - boxOffsetLeft -maskOffsetWidth/2;112 var mY = pageY - boxOffsetTop - maskOffseetHeight/2;113 // 以下判斷mask盒子是否越出父盒子114 if(mX < 0) {115 mX = 0 ;116 }117 if(mY < 0) {118 mY = 0 ;119 }120 if(mX > boxOffsetWidth - maskOffsetWidth) {121 mX = boxOffsetWidth -maskOffsetWidth;122 }123 if(mY > boxOffsetHeight - maskOffseetHeight) {124 mY = boxOffsetHeight - maskOffseetHeight;125 }126 // 設定mask盒子位置127 mask.style.left = mX + "px";128 mask.style.top = mY + "px";129 // 擷取比例設定大圖等比例的位置130 var bili = bigImg.offsetWidth/boxOffsetWidth;131 bigImg.style.marginLeft = -mX*bili + "px";132 bigImg.style.marginTop = -mY*bili + "px";133 134 135 }136 137 </script>
JavaScript--放大鏡
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
