Javascript手把手教你做商品放大镜效果
生活随笔
收集整理的這篇文章主要介紹了
Javascript手把手教你做商品放大镜效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html><!--放大鏡的原理是設置兩張圖片一張正常 一張放大后的放大后的設為隱藏 鼠標移入時候顯示 然后在正常那邊有一個小框鼠標移動時候移動小框 然后拿小框left/top除以圖片的寬/高得到一個比值,拿比值去乘以大圖片的寬/高就可以得到大圖片要移動的距離--><head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}.wrap {width: 650px;height: 432px;position: relative;}.box {position: relative;width: 650px;height: 432px;}.box img {width: 650px;height: 432px;}.bigImg {width: 650px;height: 432px;overflow: hidden;position: absolute;top: 0;left: 660px;display: none;}.bigImg img {position: absolute;width: 1300px;height: 864px;}.moveBox {display: none;position: absolute;width: 325px;height: 216px;top: 0;left: 0;background: rgba(255, 0, 255, 0.3);}</style></head><body><div class="wrap"><div class="box"><img src="timg.jpg" alt="" /><div class="moveBox"></div></div><div class="bigImg"><img src="timg.jpg" alt="" /></div></div></body><script>//布局的話就是需要準備兩張圖片 一張正常 一張是放大后的;// 獲取放圖片的框框var box = document.getElementsByClassName('box')[0];// 獲取移動的紅色小框框 var moveBox = document.getElementsByClassName('moveBox')[0];// 獲取右邊放大鏡的框框var big = document.getElementsByClassName('bigImg')[0];// 獲取右邊放大鏡里面的圖片 var bigImg = big.getElementsByTagName('img')[0];// 鼠標移入放圖片框框觸發移入事件;顯示紅色盒子和右邊放大鏡box.onmouseenter = function() {moveBox.style.display = 'block';big.style.display = 'block';// 鼠標在盒子中移動時觸發的事件 box.onmousemove = function(ev) {var ev = ev || event;
// 獲取鼠標在盒子內的x/y值 等于鼠標位置減去大盒子的offsetleft/top 然后為了鼠標居于紅色盒子中心所以要減去小盒子的寬/高的一半;var x = ev.clientX - box.offsetLeft - moveBox.offsetWidth / 2;var y = ev.clientY - box.offsetTop - moveBox.offsetHeight / 2;//設置邊界 小于0 或者大于大盒子減小盒子的寬/高;if (x < 0) {x = 0;} else if (x > box.offsetWidth - moveBox.offsetWidth) {x = box.offsetWidth - moveBox.offsetWidth;}if (y < 0) {y = 0;} else if (y > box.offsetHeight - moveBox.offsetHeight) {y = box.offsetHeight - moveBox.offsetHeigth;}
// 將得到的x/y值 賦予小盒子的left/top 小盒子就會跟著鼠標移動moveBox.style.left = x + 'px';moveBox.style.top = y + 'px';// 然后用得到的x/y去除以大盒子的寬/高 得到一個比值var proX = x / box.offsetWidth;var proY = y / box.offsetHeight;
// 比值乘以大圖片的寬/高就是大圖片的移動距離var imgX = proX * bigImg.offsetWidth;var imgY = proY * bigImg.offsetHeight;//注意大圖片的移動方向應該與鼠標移動方向相反所以要乘以負數bigImg.style.left = -imgX + 'px';bigImg.style.top = -imgY + 'px';};
// 最后鼠標移開大大盒子事件 將小紅色盒子和右邊放大鏡設為隱藏并且清空事件box.onmouseleave = function() {moveBox.style.display = 'none';big.style.display = 'none';box.onmousemove = box.onmouseleave = null;}};</script></html>
放大鏡demo下載
總結
以上是生活随笔為你收集整理的Javascript手把手教你做商品放大镜效果的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： impress.js 中文版 学习
- 下一篇： Java Lambda 筛选 filte