1、js写一个放大镜
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>放大镜</title> <style type="text/css"> #demo { display: block; 400px;height: 255px;margin: 50px; position: relative; border: 1px solid #ccc; } #small-box {position: relative;z-index: 1;} #float-box {display: none; 160px;height: 120px;position: absolute;background: #ffffcc;border: 1px solid #ccc;filter: alpha(opacity=50);opacity: 0.5;} #mark {position: absolute;display: block; 400px;height: 255px;background-color: #fff;filter: alpha(opacity=0);opacity: 0;z-index: 10; } #big-box {display: block;position: absolute;top: 0;left: 460px; 400px;height: 300px;overflow: hidden;border: 1px solid #ccc;z-index: 1;} #big-box img {position: absolute;z-index: 5} </style> <script> //页面加载完毕后执行 window.onload = function () { var objDemo = document.getElementById("demo"); var objSmallBox = document.getElementById("small-box"); var objMark = document.getElementById("mark"); var objFloatBox = document.getElementById("float-box"); var objBigBox = document.getElementById("big-box"); var objBigBoxImage = objBigBox.getElementsByTagName("img")[0]; objMark.onmouseover = function () { objFloatBox.style.display = "block" objBigBox.style.display = "block" } objMark.onmouseout = function () { objFloatBox.style.display = "none" objBigBox.style.display = "none" } objMark.onmousemove = function (ev) { var _event = ev || window.event; var left = _event.clientX - objDemo.offsetLeft - objSmallBox.offsetLeft - objFloatBox.offsetWidth / 2; var top = _event.clientY - objDemo.offsetTop - objSmallBox.offsetTop - objFloatBox.offsetHeight / 2; if (left < 0) { left = 0; } else if (left > (objMark.offsetWidth - objFloatBox.offsetWidth)) { left = objMark.offsetWidth - objFloatBox.offsetWidth; } if (top < 0) { top = 0; } else if (top > (objMark.offsetHeight - objFloatBox.offsetHeight)) { top = objMark.offsetHeight - objFloatBox.offsetHeight; } objFloatBox.style.left = left + "px"; objFloatBox.style.top = top + "px"; var percentX = left / (objMark.offsetWidth - objFloatBox.offsetWidth); var percentY = top / (objMark.offsetHeight - objFloatBox.offsetHeight); objBigBoxImage.style.left = -percentX * (objBigBoxImage.offsetWidth - objBigBox.offsetWidth) + "px"; objBigBoxImage.style.top = -percentY * (objBigBoxImage.offsetHeight - objBigBox.offsetHeight) + "px"; } } </script> </head> <body> <div id="demo"> <div id="small-box"> <div id="mark"></div> <div id="float-box"></div> <img src="macbook-small.jpg"/> </div> <div id="big-box"> <img src="macbook-big.jpg"/> </div> </div> </body> </html>
2、jquery写一个放大镜
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script type="text/javascript" src="https://www.longre.com/peter_js/jquery.min(1.11.1).js"></script> <style> .all{margin:50px;position: relative;} .xBox{400px;height:255px;border:1px #666 solid;position: relative;} .ceng{400px;height:255px;background:fff;opacity: 0;position: absolute;top:0;left:0;z-index: 2;} .mok{160px;height:120px;background:rgba(0,0,0,0.1);position: absolute;top:0;left:0;display:none;} .dBox{400px;height:300px;border:1px #666 solid;overflow: hidden;position: absolute;top:0;left:600px;display:block;} .dBox img{position: absolute;top:0;left:0;} </style> </head> <body> <div class="all"> <div class="xBox"> <div class="mok"> </div> <div class="ceng"></div> <img src="macbook-small.jpg" /> </div> <div class="dBox"> <img src="macbook-big.jpg" /> </div> </div> </body> </html> <script> $(function(){ $(".ceng").mouseover(function() { $(".mok").fadeIn(); $(".dBox").fadeIn(); }); $(".ceng").mouseout(function() { $(".mok").fadeOut(); $(".dBox").fadeOut(); }); $(".ceng").mousemove(function(e) { var left = e.clientX-$('.xBox').offset().left-$(".mok").width()/2 ; var top = e.clientY-$('.xBox').offset().top-$(".mok").height()/2; var mmokLeft = $(".xBox").width()-$(".mok").width(); var mmokTop = $(".xBox").height()-$(".mok").height(); if(left <= 0){ left = 0; }else if(left>mmokLeft){ left = mmokLeft; } if(top <= 0){ top = 0; }else if(top>mmokTop){ top = mmokTop; } var l = $(".dBox").width()*left/$(".mok").width(); var t = $(".dBox").height()*top/$(".mok").height(); $(".mok").css("left",left+"px"); $(".mok").css("top",top+"px"); $(".dBox img").css("left", "-"+l+"px"); $(".dBox img").css("top", "-"+t+"px"); }); }) </script>