<!DOCTYPE html><html><head><meta charset="UTF-8"><title>放大鏡</title><script src="http://libs.baidu.com/jquery/1.10.0/jquery.min.js"></script><script>? ? $(function(){? ? ? ? $(document).on("mouseover","#mark",function(){? ? ? ? ? ? $("#float-box").show();?? ? ? ? ? ? $("#big-box").show();? ? ? ? }); ?? ? ? ? $(document).on("mouseout","#mark",function(){? ? ? ? ? ? $("#float-box").hide();?? ? ? ? ? ? $("#big-box").hide(); ? ?? ? ? ? });? ? ? ? $(document).on("mousemove","#mark",function(ev){? ? ? ? ? ? var left = ev.pageX - $("#demo").offset().left - $("#small-box").offset().left - $("#float-box").width()/2,? ? ? ? ? ? ? ? top = ev.pageY - $("#demo").offset().top - $("#small-box").offset().top - $("#float-box").height()/2;? ? ? ? ? ? ? ??? ? ? ? ? ??? ? ? ? ? ? if(left < 0){? ? ? ? ? ? ? ? left = 0;? ? ? ? ? ? }else if(left > ($("#mark").width() - $("#float-box").width())){? ? ? ? ? ? ? ? left = $("#mark").width() - $("#float-box").width();? ? ? ? ? ? }? ? ? ? ? ? if(top < 0){? ? ? ? ? ? ? ? top = 0;? ? ? ? ? ? }else if(top > ($("#mark").height() - $("#float-box").height())){? ? ? ? ? ? ? ? top = $("#mark").height() - $("#float-box").height();? ? ? ? ? ? }? ? ? ? ? ??? ? ? ? ? ? ? ??? ? ? ? ? ? $("#float-box").css({"left":left+"px","top":top+"px"});? ? ? ? ? ??? ? ? ? ? ? var percentX = left / ($("#mark").width() - $("#float-box").width()),? ? ? ? ? ? ? ? percentY = top / ($("#mark").height() - ?$("float-box").height());? ? ? ? ? ? ? ??? ? ? ? ? ? $("#big-box img").eq(0).css({"left": -percentX*($("#big-box img").eq(0).width() - $("#big-box").width())+"px","top": -percentY*($("#big-box img").eq(0).height() - $("#big-box").height())+"px"});? ? ? ? ? ??? ? ? ? });? ? })</script><style type="text/css">* {margin: 0;padding: 0}#demo {display: block;width: 400px;height: 255px;margin: 50px;position: relative;border: 1px solid #ccc;}#small-box {position: relative;z-index: 1;}#float-box {display: none;width: 160px;height: 120px;position: absolute;background: #ffffcc;border: 1px solid #ccc;filter: alpha(opacity=50);opacity: 0.5;cursor: move;}#mark {position: absolute;display: block;width: 400px;height: 255px;z-index: 10;background: #fff;filter: alpha(opacity=0);opacity: 0;cursor: move;}#big-box {display: none;position: absolute;top: 0;left: 460px;width: 400px;height: 300px;overflow: hidden;border: 1px solid #ccc;z-index: 1;;}#big-box img {position: absolute;z-index: 5}</style></head><body><div id="demo"><div id="small-box"><div id="mark"></div><div id="float-box"></div><img src="http://img1.sycdn.imooc.com//537d77fb0001559d04000255.jpg"/></div><div id="big-box"><img src="http://img1.sycdn.imooc.com//537d781b0001c04210240654.jpg"/></div></div></body></html>
放大鏡是小圖預(yù)覽鼠標(biāo)指針為什么不是中間，反而有點(diǎn)偏右下角？
o緣來(lái)是你o
2016-05-18 16:07:51