此功能类似于淘宝上的商品的查看,如果鼠标移动到小图上就会在相应的位置显示出大图。如果自己写这些代码,会很痛苦。官方网站上提供了一个类库——jquery.jqzoom.js;只需要引入次类库,引用此类库,添加一些css代码即可实现此功能;
HTML框架如下:
1 <div class="jqzoom"> 2 <img src="images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/> 3 </div>
注意,img中必须有jqimg属性,这个属性放的是大图的地址;
js代码如下:
1 <script type="text/javascript"> 2 $(function () { 3 $(".jqzoom").jqueryzoom({ 4 xzoom: 300, //放大图的宽度(默认是200) 5 yzoom: 300, //放大图的高度(默认是200) 6 offset: 10, //离原图的距离(默认是10) 7 position: "right", //放大图的定位(默认是"right") 8 preload: 1 9 }) 10 }) 11 </script>
用法:$(".jqzoom").jqueryzoom
如果只添加这么多代码效果会出来,但是不是那么的理想。为了更加美观,必须添加如下的css代码:
1 <style type="text/css"> 2 .jqzoom{ 3 border:1px solid #BBB; 4 float:left; 5 position:relative; 6 padding:0px; 7 cursor:pointer; 8 } 9 10 /*jQzoom*/ 11 div.zoomdiv { 12 z-index: 999; 13 position : absolute; 14 top:0px; 15 left:0px; 16 width : 200px; 17 height : 200px; 18 background: #ffffff; 19 border:1px solid #CCCCCC; 20 display:none; 21 text-align: center; 22 overflow: hidden; 23 } 24 div.jqZoomPup { 25 z-index : 999; 26 visibility : hidden; 27 position : absolute; 28 top:0px; 29 left:0px; 30 width : 50px; 31 height : 50px; 32 border: 1px solid #aaa; 33 background: #ffffff url(../images/zoomlens.gif) 50% top no-repeat;; 34 opacity: 0.5; 35 -moz-opacity: 0.5; 36 -khtml-opacity: 0.5; 37 filter: alpha(Opacity=50); 38 } 39 </style>