仿淘宝商品放大镜效果
效果图：
源码：
DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>title><style>* {margin: 0;padding: 0;}img {vertical-align: top;}.box {width: 350px;height: 350px;margin:100px;border: 1px solid #ccc;position: relative;}.big {width: 450px;height: 450px;position: absolute;top: 0;left: 360px;border: 1px solid #ccc;overflow: hidden;display: none;}.mask {width: 100px;height: 100px;background: rgba(255, 255, 0, 0.4);position: absolute;top: 0;left: 0;cursor: move;display: none;}.small {position: relative;}.big img {position: absolute;top: 0;left: 0;}style>
head>
<body>
<div class="box" id="fdj"><div class="small"><img src="001.jpg" alt=""/><div class="mask">div>div><div class="big"><img src="0001.jpg" alt=""/>div>
div>
body>
html>
<script>var fdj = document.getElementById("fdj"); // 获得最大的盒子var small = fdj.children[0]; // 获得small 小图片 350盒子var big = fdj.children[1]; // 获得 大图片 800 盒子var mask = small.children[1]; // 小的黄色盒子var bigImage = big.children[0]; // 大盒子里面的图片
small.onmouseover = function() { // 鼠标经过显示出他们
mask.style.display = "block";big.style.display = "block";}small.onmouseout = function() {mask.style.display = "none";big.style.display = "none";}// 鼠标在small 内移动var x = 0;var y = 0;small.onmousemove = function(event) {var event = event || window.event;x = event.clientX - this.offsetParent.offsetLeft - mask.offsetWidth /2; // 再某个盒子内的坐标//alert(this.offsetLeft);
y = event.clientY - this.offsetParent.offsetTop - mask.offsetHeight /2;if(x < 0){x = 0;}else if(x > small.offsetWidth - mask.offsetWidth){x = small.offsetWidth - mask.offsetWidth;}if(y<0){y = 0;}else if(y > small.offsetHeight - mask.offsetHeight){y = small.offsetHeight - mask.offsetHeight;}mask.style.left = x + "px";mask.style.top = y + "px";/*计算 ： 夫子 一顿吃 2个馒头 娇子 一顿 4个馒头问 夫子今天吃了 3个馒头 娇子应该吃几个？ *//*计算出他们的倍数 4 / 2 2倍3 * 2 == 6个 *//* 大图盒子 / 小图盒子 倍数我们 再小图移动的距离 * 倍数 == 大图的位置*/bigImage.style.left = -x * big.offsetWidth /small.offsetWidth + "px";
bigImage.style.top = -y * big.offsetHeight /small.offsetHeight + "px";
}
script>
转载于:https://www.cnblogs.com/alex-xxc/p/10003403.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！