演示效果:
代码:
<!DOCTYPE html> <html> <head> <title>test</title> <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script> <style type="text/css"> *{padding: 0; margin: 0;} #box{ width: 700px; margin: 10px auto; } .left,.right{float: left;} .bottom>div{ float: left; margin-left: 4px; } .right{ margin-left: 50px; width: 300px; height: 300px; background: #ccc; overflow: hidden; display: none; } .mouseOn{ background-color: orange; padding: 3px; } .top{position: relative;} #inner{ background-color: blue; opacity: 0.3; width: 60px; height: 60px; position: absolute; left: 0px; top: 0px; display: none; } .right{position: relative;} .right img{ position: absolute; } </style> </head> <body> <div id="box"> <div class="left"> <div class="top"> <!--左侧图片区--> <img src="images/1.jpg" width="300px" height="300px"> <div id="inner"></div> </div> <div class="bottom"> <div><img src="images/1.jpg" width="55px" height="40px" class="mouseOn"></div> <div><img src="images/6.jpg" width="55px" height="40px"></div> <div><img src="images/7.jpg" width="55px" height="40px"></div> <div><img src="images/8.jpg" width="55px" height="40px"></div> <div><img src="images/9.jpg" width="55px" height="40px"></div> </div> </div> <div class="right"><img src="images/1.jpg" width="1500px" height="1500px"></div> </div> <script type="text/javascript"> $(".bottom").find('img').mouseover(function(event) { /* Act on the event */ $(".bottom img").removeClass("mouseOn") //增加橙色边框 $(this).addClass("mouseOn").siblings().removeClass("mouseOn"); //删除其它橙色边框 $(".top img").attr('src', $(this).attr("src")); //将上方大图改变 $(".right img").attr('src', $(this).attr("src")); //改变右方大图 }); $(".top").mousemove(function(e){ $("#inner").show(); //显示蓝色小方块 $(".right").show(); //显示右方放大图 var left = e.pageX - $("#inner").width()/2 - $(".top").offset().left; //小方块left属性 var top = e.pageY - $("#inner").height()/2 - $(".top").offset().top; //小方块top属性 var max = $(".top").width()-$("#inner").width(); //小方块最大移动距离 //防止小方块越界 if(left < 0) left = 0; if(left > max) left = max; if(top < 0) top = 0; if(top > max) top = max; //移动小方块 $("#inner").css({ "left": left, "top": top }) //移动放大图,5倍放大比例 $(".right img").css({ "left": -5*left, "top": -5*top }) }).mouseleave(function(){ $(".right").hide(); $("#inner").hide(); }) </script> </body> </html>