<!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>
1 回答
- 1 回答
- 0 关注
- 1842 浏览
添加回答
举报
0/150
提交
取消