模仿淘宝商品展示 图片放大

小图片
 
 
 

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

posted @ 2012-04-09 13:26  cheng1234xiang  阅读(1665)  评论(2)  编辑  收藏  举报