放大鏡案例

放大鏡

在這里插入圖片描述

<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>商品放大鏡</title><link rel="stylesheet" href="css/reset.css"><style>.product-intro {position: relative;width: 450px;margin: 100px 0 0 200px;border: 1px solid #ccc;}.preview {position: relative;}.enlargement {display: none;overflow: hidden;position: absolute;top: -1px;left: 450px;width: 540px;height: 540px;border: 1px solid #ccc;}.mask {display: none;position: absolute;top: 0;left: 0;width: 60%;height: 60%;background-color: rgba(228, 228, 11, 0.3);border: 1px solid rgba(122, 122, 122, .4);cursor: move;}.active {display: block;}</style>
</head><body><!-- 這里推薦用兩張大小不用的圖片，也不是只用高清圖然后縮小，因為在商品總覽列表中，會用到小圖，圖片越小加載的速度就快，能用小圖就用小圖 --><div class="product-intro"><div class="preview"><img src="images/m30.jpg" width="450" height="450" alt="m30"><div class="mask"></div></div><div class="enlargement"><img src="images/m30-big.jpg" alt="m30"></div></div><script src="js/common.js"></script><script>var oPreview = $('.preview');var oMask = $('.mask');var oEnlarge = $('.enlargement');var oEnlargeImg = $('.enlargement>img');var mouseEventMap = {mouseenter: function (e) {oMask.classList.add('active');oEnlarge.classList.add('active');},mouseleave: function (e) {oMask.classList.remove('active');oEnlarge.classList.remove('active');},mousemove: function (e) {var x = e.clientX - oMask.offsetWidth / 2 - getPosition(oPreview).left;var y = e.clientY - oMask.offsetHeight / 2 - getPosition(oPreview).top;x = Math.min(x, oPreview.offsetWidth - oMask.offsetWidth);x = Math.max(x, 0);y = Math.min(y, oPreview.offsetHeight - oMask.offsetHeight);y = Math.max(y, 0);oMask.style.left = x + 'px';oMask.style.top = y + 'px';// 展示比例   (展示區圖片寬度 - 展示區寬度) / (預覽區寬度 - 遮罩層寬度)var moveX = (oEnlargeImg.offsetWidth - oEnlarge.offsetWidth) / (oPreview.offsetWidth - oMask.offsetWidth);var moveY = (oEnlargeImg.offsetHeight - oEnlarge.offsetHeight) / (oPreview.offsetHeight - oMask.offsetHeight);oEnlargeImg.style.marginLeft = -x * moveX + 'px';oEnlargeImg.style.marginTop = -y * moveX + 'px';}}oPreview.addEventListener('mouseenter', handle, false);oPreview.addEventListener('mouseleave', handle, false);oPreview.addEventListener('mousemove', handle, false);function handle(e) {if (mouseEventMap[e.type] && typeof mouseEventMap[e.type] === 'function') {mouseEventMap[e.type](e);}}</script>
</body></html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/42018.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/42018.shtml
英文地址，請注明出處：http://en.pswp.cn/web/42018.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！