模仿淘宝商品展示 图片放大
![小图片](https://pic002.cnblogs.com/images/2012/374327/2012040913072487.jpg)
sad
s
1
<script type="text/javascript"> 2 $(function () { 3 4 var offset; 5 var x, y, top, left; //放大区域的div位置记录计算 6 7 8 var EnlargeImg_width, EnlargeImg_height; //要放大图片的高和宽 9 10 var Movediv_width, Movediv_height; 11 12 $(".small-img").mousemove(function (e) { 13 14 var children_dom; //要放大图片的doc 15 16 var parent = $(this); 17 18 children_dom = parent.children('.a-img'); 19 20 EnlargeImg_width = children_dom.width(); 21 EnlargeImg_height = children_dom.height(); 22 23 Movediv_width = EnlargeImg_width / 3; 24 Movediv_height = EnlargeImg_height / 3; 25 26 children_dom = parent.children('.img-div-area'); 27 28 children_dom.css({ 29 'width': Movediv_width + 'px', 30 'height': Movediv_height + 'px', 31 'display': 'block' 32 }); 33 move(e); 34 }); 35 36 function move(e) { 37 offset = $(".small-img").offset(); 38 top = offset.top; 39 left = offset.left; 40 x = e.pageX - 4; 41 y = e.pageY - 4; 42 top = y - top - Movediv_height / 2; 43 left = x - left - Movediv_width / 2; 44 if (top < 0) { 45 top = 0; 46 } 47 if (left < 0) { 48 left = 0; 49 } 50 if (top + Movediv_height >= EnlargeImg_height) { 51 top = $(".a-img").height() - Movediv_height - 4; 52 } 53 if (left + Movediv_width >= EnlargeImg_width) { 54 left = $(".a-img").width() - Movediv_width - 4; 55 } 56 $(".img-div-area").css( 57 { 'top': top + "px", 58 'left': left + "px" 59 } 60 ); 61 var position_x, position_y; 62 63 $('#EnlargeImg').css({ 64 'background-position': (-(1024 / EnlargeImg_height) * left) + 'px ' + (-(768 / EnlargeImg_width) * top) + 'px ' 65 }); 66 } 67 68 $(".img-div-area").mousemove(function (e) { 69 move(e); 70 }); 71 }); 72 73 </script>
css样式
<style type="text/css"> .small-img { cursor: move; position: relative; float: left; border: 4px solid #CCC; } .a-img, #EnlargeImg { width: 240px; height: 320px; display: block; z-index: 1001; } .img-div-area { display: none; border: 4px solid gray; position: absolute; z-index: 1000; background-color: White; /*IE*/ filter: alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; } #EnlargeImg { background-image: url('http://pic002.cnblogs.com/images/2012/374327/2012040913072487.jpg'); float: left; border: 4px solid gray; } </style>
下面是html代码
<div class="small-img"> <img src="http://pic002.cnblogs.com/images/2012/374327/2012040913072487.jpg" class="a-img" alt="小图片" /> <div class="img-div-area"> </div> </div> <div id="EnlargeImg"> </div>
ad