本文主要是介绍前端-css-js，放大镜，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1.html骨架如下
<body><div class="box" id="box"><div class="smallbox" id="smbox"><img src="images/1.jpg" alt="" /><div class="smalldiv" id="smdiv"></div> </div><div class="bigdiv" id="bigdiv"><img src="images/1.jpg" alt="" id="bigimg" /></div></div>
</body>2.用CSS调整成如下样子即可
可以这样理解，页面中，有2个图（smallimg，bigimg）。还有两个div（smalldiv是透明图，bigdiv展示大图用）。
两个div都分别比两个图小。
小div（透明图）跟随鼠标在小图上移动（这是小div在动），同时大图再大div中移动（这是大图在动），但是整体的感觉，依然是，2个div压住2个图，并展示2个图的部分内容。
<style type="text/css">*{margin: 0;padding: 0;}.box {width: 400px;height: 400px;position: relative;top:20px;left:100px;background-color: #fff;}.box .smallbox img{width: 400px;height: 400px;}.box .smallbox{position: relative;}.box .smallbox .smalldiv{opacity: 0.3;width: 300px;height: 300px;background-color: #f0f;position: absolute;top:0;left:0;cursor: move;/*display:none;*/}.box .bigdiv {position: absolute;top :0;left : 420px;width: 600px;height: 600px;border: 1px solid #000;/*overflow: hidden;*//*display: none;*/}.box .bigdiv img{position: absolute;top:0;left:0;}
</style>3.保证2个比例，即可实现。
①小图/小div == 大图/大div，这里原图是800*800，所以我将大div设置为600*600，将小图和小div设置为400*400，300*300。如此这样，400/300 == 800/600
②再计算小div的移动位置时，大图对应的移动位置应当与之相反，且是一个比值。
即（小图的移动距离 * （-1）* （大图宽高/小图宽高） ）
或（小图的移动距离 * （-1）* （大div宽高/小div宽高） ）
4.js代码如下。主要能计算出小div（透明图）的位置即可。
小div的位置，应当是当前鼠标的clientX - 小div距离左侧屏幕的位置。
js代码中，小div距离左侧屏幕的位置恰巧等于box距离左侧屏幕位置。
<script type="text/javascript">onload=function(){var box = document.getElementById("box");var smbox = document.getElementById("smbox");var smdiv = document.getElementById("smdiv");var bigdiv = document.getElementById("bigdiv");var bigimg = document.getElementById("bigimg");smbox.onmousemove = function(event){var event = event|| window.event;var x = event.clientX - box.offsetLeft - smdiv.offsetWidth/2;//鼠标现在距离box左边的距离var y = event.clientY - box.offsetTop - smdiv.offsetHeight/2;if(x <0 ){x = 0;}if(x > box.offsetWidth - smdiv.offsetWidth){x = box.offsetWidth - smdiv.offsetWidth;}if(y < 0 ){y= 0 ;}if(y > box.offsetHeight - smdiv.offsetHeight){y = box.offsetHeight - smdiv.offsetHeight;}smdiv.style.left = x + "px";smdiv.style.top = y + "px";bigimg.style.left = x *(-1) * (bigdiv.offsetWidth/smdiv.offsetWidth) + "px";bigimg.style.top = y *(-1) * (bigdiv.offsetHeight/smdiv.offsetHeight) +"px";}smbox.onmouseover = function(){smdiv.style.display = "block";bigdiv.style.display = "block";}smbox.onmouseout = function(){smdiv.style.display = "none";bigdiv.style.display = "none";}}
</script>这篇关于前端-css-js，放大镜的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
