样式
@charset "utf-8"; /* CSS Document */ * {padding: 0;margin: 0;} body {margin: 0px;padding: 0px;min-width:1200px;} /*相关样式*/ .MagicZoomBox { background:#fff;} .MagicZoomBox span { background:url(../images/darkbg.png) repeat}//鼠标移动的背景图片 .MagicZoomSum span { border:1px solid #ddd;} .MagicZoomSum span.sel { border:1px solid #f60;} .showpage { width:400px; position:relative;} .showpage a { display:block; width:15px; border:1px solid #ddd; height:60px; line-height:60px; background:#eee; text-align:center; font-size:18px; top:4px; position:absolute; left:0; text-decoration:none; color:#999;} .showpage .next { left:auto; right:-40px;} .showpage a:hover { background:#ccc; color:#777;} body.product-detail .product-detail-content{ padding: 20px; } .showSum{ } .tsShopContainer{ width: 420px; height: 420px; border: solid 1px #E3E3E3; text-align: center; vertical-align: middle; padding: 10px; float: left; } .showBox{ width: 400px; height: 400px; } .showBox.loadings{ overflow: hidden; } .showBox.loadings img{ max-width: 400px; max-height: 400px; } .showBox a{ margin:0 auto; } .MagicZoomSum span.sel{ border-color: #f56515; } .MagicZoomSum span{ border: 1px solid #E3E3E3; } /*如果direction 属性是 Y 将showpage 的class 设置为 pageList MagicZoomSum*/ .MagicZoomSum.panelY { float: left; left: 0; margin-right:10px; top:20px; width:72px } .pageList{ width: 70px; text-align: center; position: absolute; } .pageList a{ height: 20px; display: inline-block; width: 70px; left: 0; position: absolute; background-color: #f7f7f7; line-height: 22px; } .pageList i{ font-size: 22px; } .pageList .next{ top:414px; right: 0; } .pageList .last{ top:-7px; } .MagicZoomSum.panelX { float: left; left: 20px; margin-bottom:10px; }html 文档包含api 和使用方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-CN"> <title>商品放大镜</title> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="copyright" content="" /> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/MagicZoomJquery.js"></script> <link href="css/common.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(document).ready(function(){ var showproduct = { "boxid":"showBox", "sumid":"showSum", magicNumber:2,//缩放的比例默不穿默认是2 "boxw": 400,//放大显示容器的宽度 "boxh": 400,//放大显示容器的宽度 "sumw": 70,//列表每个宽度,该版本中请把宽高填写成一样 "sumh": 70,//列表每个高度,该版本中请把宽高填写成一样 "sumi": 7,//列表间隔 "sums": 5,//列表显示个数 "sumsel": "sel", "step":1, direction:"X", //如果设置的是X是 去掉showpage 中的pageList "sumborder":1,//列表边框,没有边框填写0,边框在css中修改 "lastid":"showlast", "nextid":"shownext" };//参数定义 $.MagicZoom.MagicZoomInit(showproduct,function(){ $("#showBox").removeClass("loadings") }); }); </script> </head> <body> <div style="width:600px; margin:0 auto;"> <p>欢迎使用常用商品详情页商品放大镜效果,兼容IE6及以上版本</p> <p style="padding-bottom:50px;">图片标签上请务必注意width和height的值,这是必要的值,图片随意形状,随意大小,但必须填写该两个值,图片个数大于1就行,数量不固定</p> <!--页面必要代码,img标签上请务必带上图片真实尺寸px--> <p class="showpage "> <a href="javascript:void(0);" class="last" id="showlast"> < </a> <a href="javascript:void(0);" class="next" id="shownext"> > </a> </p> <div id="showSum" class="showSum"></div><!--展示图片里边--> <div class="tsShopContainer"> <div id="showBox" class="showBox loadings" > <img src="images/photos/img01.png" /> <img src="images/photos/img02.png" /> <img src="images/photos/img03.png" /> <img src="images/photos/img04.png" /> <img src="images/photos/img05.png" /> <img src="images/photos/img06.png" /> <img src="images/photos/img07.png" /> <img src="images/photos/img08.png" /> <img src="images/photos/img09.png" /> </div><!--展示图片盒子--> </div> </div> </body> </html>核心javascript 代码 源码
/* */ jQuery.MagicZoom = { isLoad:true, tsScrollResize:function(maxWidth,maxHeight,id){ var maxWidth =maxWidth; var maxHeight = maxHeight; var myimgList = $("#"+id).find("img"); var self=this; $.each(myimgList,function(index){ myimg=this; var imgNew = new Image(); imgNew.src = myimg.src; //将myimg存起来,相当于一个参数,不然异步的时候执行太快,一直是最后一张图 imgNew.preImg = myimg; //这个是为了防遨游等浏览器,图片宽、高加为0执行 if (imgNew.width == 0 || imgNew.height == 0) { imgNew.onload = function () { self.tsScrollResizeHd(imgNew, maxWidth, maxHeight, this.preImg); }; } else { if(index==myimgList.length-1){ self.isLoad=false; } self.tsScrollResizeHd(imgNew, maxWidth, maxHeight, myimg); } }); }, tsScrollResizeHd:function(imgNew, maxWidth, maxHeight, myimg) { var hRatio; var wRatio; var Ratio = 1; var w = imgNew.width; var h = imgNew.height; wRatio = maxWidth / w; hRatio = maxHeight / h; if (maxWidth == 0 && maxHeight == 0) { Ratio = 1; } else if (maxWidth == 0) { if (hRatio < 1) Ratio = hRatio; } else if (maxHeight == 0) { if (wRatio < 1) Ratio = wRatio; } else if (wRatio < 1 || hRatio < 1) { Ratio = (wRatio <= hRatio ? wRatio : hRatio); } if (Ratio < 1) { w = w * Ratio; h = h * Ratio; } if (h % 2 != 0) {2 h = h - 1; } myimg.height = h; myimg.width = w; $(myimg).css({"width":w+"px",height:h+"px"}); }, MagicZoomInit:function(_obj,callback){ var self=this; var _box = $("#"+_obj.boxid); var _sum = $("#"+_obj.sumid); var _magicNumber=_obj.magicNumber||2 var time=setInterval(function(){ if(self.isLoad){ self.tsScrollResize(_obj.boxw,_obj.boxh,_obj.boxid); }else{ clearInterval(time); _box.addClass("MagicZoomBox"); _sum.addClass("MagicZoomSum"); _obj.step=_obj.step||1; var _last,_next; var _imgarr = _box.find("img"); var _length = _imgarr.length; var _index = 0; var _arr = new Array(); _sum.html(""); _sum.append("<p style='position:absolute;left:0;top:0;'></p>"); var _sumbox = _sum.find("p"); for(var i=0;i<_length;i++){ _arr[i] = new Array(); _arr[i][0] = _imgarr.eq(i).attr("src"); _arr[i][1] = _imgarr.eq(i).attr("width"); _arr[i][2] = _imgarr.eq(i).attr("height"); var _scale = _arr[i][1]/_arr[i][2]; if(_scale == 1){ _arr[i][3] = _obj.boxw;//width _arr[i][4] = _obj.boxh;//height _arr[i][5] = 0;//top _arr[i][6] = 0;//left _arr[i][7] = _obj.boxw/_magicNumber; _arr[i][8] = _obj.boxw*_magicNumber;//width _arr[i][9] = _obj.boxh*_magicNumber;//height _sumbox.append("<span><img src='"+_imgarr.eq(i).attr("src")+"' width='"+_obj.sumw+"' height='"+_obj.sumh+"' /></span>"); } if(_scale > 1){ _arr[i][3] = _obj.boxw;//width _arr[i][4] = _obj.boxw/_scale; _arr[i][5] = (_obj.boxh-_arr[i][4])/_magicNumber; _arr[i][6] = 0;//left _arr[i][7] = _arr[i][4]/_magicNumber; _arr[i][8] = _obj.boxh*_magicNumber*_scale;//width _arr[i][9] = _obj.boxh*_magicNumber;//height var _place = _obj.sumh - (_obj.sumw/_scale); _place = _place/_magicNumber; _sumbox.append("<span><img src='"+_imgarr.eq(i).attr("src")+"' width='"+_obj.sumw+"' style='top:"+_place+"px;' /></span>"); } if(_scale < 1){ _arr[i][3] = _obj.boxh*_scale;//width _arr[i][4] = _obj.boxh;//height _arr[i][5] = 0;//top _arr[i][6] = (_obj.boxw-_arr[i][3])/_magicNumber; _arr[i][7] = _arr[i][3]/_magicNumber; _arr[i][8] = _obj.boxw*_magicNumber;//width _arr[i][9] = _obj.boxw*_magicNumber/_scale; var _place = _obj.sumw - (_obj.sumh*_scale); _place = _place/_magicNumber; _sumbox.append("<span><img src='"+_imgarr.eq(i).attr("src")+"' height='"+_obj.sumh+"' style='left:"+_place+"px;' /></span>"); } } _imgarr.remove(); _sum.append("<div style='clear:both;width:100%;'></div>"); var _sumarr = _sum.find("span"); var _sumimg = _sum.find("img"); _sumarr.eq(_index).addClass(_obj.sumsel); var _border = _obj.sumborder*2 + _obj.sumh; /* var _border =_obj.sumh;*/ var _sumwidth = (_border+_obj.sumi)*_obj.sums; var _sumboxwidth = (_border+_obj.sumi)*_length; if(_obj.direction=="X") { _sum.css({ "overflow": "hidden", "height": _border + "px", "width": _sumwidth + "px", "position": "relative" }).addClass("panelX"); _sumbox.css({ "width":_sumboxwidth+"px" }); _sumarr.css({ "float":"left", "margin-left":_obj.sumi+"px", "width":_obj.sumw+"px", "height":_obj.sumh+"px", "overflow":"hidden", "position":"relative" }); } if(_obj.direction=="Y"){ /*if(_length>_obj.sums){ //待定 _sumwidth=(_sumwidth-_obj.sumi*2) //消除上下滚动间隔的误差 }*/ _sum.css({ "overflow": "hidden", "height": _sumwidth+ "px", "width":_border+ "px", "position": "relative" }).addClass("panelY");; _sumbox.css({ "height":_sumboxwidth+"px", }); _sumarr.css({ "float":"left", "margin-bottom":_obj.sumi+"px", "width":_obj.sumw+"px", "height":_obj.sumh+"px", "overflow":"hidden", "position":"relative" }); } _sumimg.css({ "max-width":"100%", "max-height":"100%", "position":"relative" }); _box.append("<div style='position:relative;'><b style='display:block;'><img style='display:block;' src='' /></b><span style='position:absolute;left:0;top:0;display:none;z-index:5;'></span></div><p style='position:absolute;overflow:hidden;top:0;display:none;'><img style='max-width:none;max-height:none;position:relative;left:0;top:0;' src='' /></p>"); var _glass = _box.find("span"); var _boximg = _box.find("b img"); var _imgout = _box.find("div"); var _showbox = _box.find("p"); var _showimg = _box.find("p img"); _box.css({ "width":_obj.boxw+"px", "height":_obj.boxh+"px", "position":"relative" }); var _showboxleft = _obj.boxw + 10; _showbox.css({ "width":_obj.boxw+"px", "height":_obj.boxh+"px", "left":_showboxleft+"px" }); var imgPlaces = function(){ _showimg.attr("src",_arr[_index][0]); _boximg.attr("src",_arr[_index][0]); _boximg.css({ "width":_arr[_index][3]+"px", "height":_arr[_index][4]+"px" }); _imgout.css({ "width":_arr[_index][3]+"px", "height":_arr[_index][4]+"px", "top":_arr[_index][5]+"px", "left":_arr[_index][6]+"px", "position":"relative" }); _glass.css({ "width":_arr[_index][7]+"px", "height":_arr[_index][7]+"px" }); _showimg.css({ "width":_arr[_index][8]+"px", "height":_arr[_index][9]+"px" }); }; imgPlaces(); _imgout.mousemove(function(e){ var _gl_w = _glass.width()/2; var _maxX = _imgout.width()-_gl_w; var _maxY = _imgout.height()-_gl_w; var _moveX = 0,_moveY = 0; var _nowX = e.pageX - _imgout.offset().left; var _nowY = e.pageY - _imgout.offset().top; var _moveX = _nowX-_gl_w,_moveY = _nowY-_gl_w; if(_nowX <= _gl_w){ _moveX = 0; } if(_nowX >= _maxX){ _moveX = _maxX-_gl_w; } if(_nowY <= _gl_w){ _moveY = 0;} if(_nowY >= _maxY){ _moveY = _maxY-_gl_w;} _glass.css({"left":_moveX+"px","top":_moveY+"px"}); var _imgX = -_moveX*_showbox.width()/_glass.width(); var _imgY = -_moveY*_showbox.width()/_glass.width(); _showimg.css({"left":_imgX+"px","top":_imgY+"px"}); });//mouse END _imgout.mouseenter(function(){ _glass.css("display","block"); _showbox.css("display","block"); }); _imgout.mouseleave(function(){ _glass.css("display","none"); _showbox.css("display","none"); }); //列表部分 var _nextbtn = $("#"+_obj.nextid); var _lastbtn = $("#"+_obj.lastid); var _moveindex = 0;//索引移动 var _sumListMove = function(){ var _leftmove = -_moveindex*(_border+_obj.sumi); if(_sumbox.is(":animated")){_sumbox.stop(true,true);} if(_obj.direction=="Y"){ _sumbox.animate({top:_leftmove+"px"},300); }else{ _sumbox.animate({left:_leftmove+"px"},300); } _sumarr.eq(_index).addClass(_obj.sumsel).siblings().removeClass(_obj.sumsel); imgPlaces(); };//fun END if(_length <= _obj.sums){ var _place = (_obj.sums-_length)*_border/_magicNumber; if(_obj.direction=="Y"){ _sumbox.animate({top:0+"px"},300); _sum.css({top:0}); }else{ _sumbox.animate({left:0+"px"},300); _sum.css({left:0}); } /* 居中设置办法*/ /*if(_obj.direction=="Y"){ _sumbox.animate({top:_place+"px"},300); }else{ _sumbox.animate({left:_place+"px"},300); }*/ _nextbtn.hide(); _lastbtn.hide(); _nextbtn.click(function(){ _index+=_obj.step; if(_index >= _length){ _index=_length-1;} _sumarr.eq(_index).addClass(_obj.sumsel).siblings().removeClass(_obj.sumsel); imgPlaces(); }); _lastbtn.click(function(){ _index-=_obj.step; if(_index <= 0){ _index=0;} _sumarr.eq(_index).addClass(_obj.sumsel).siblings().removeClass(_obj.sumsel); imgPlaces(); }); }else{ var _maxNum = _length-_obj.sums; _nextbtn.click(function(){ _moveindex+=_obj.step;; if(_moveindex >= _maxNum){ _moveindex=_maxNum; } if(_index <= _moveindex){ _index=_moveindex;} _sumListMove(); }); _lastbtn.click(function(){ _moveindex-=_obj.step; if(_moveindex <= 0){ _moveindex=0;} if(_index >= _moveindex+_obj.sums){ _index=_moveindex+_obj.sums-1;} _sumListMove(); }); }//if END _sumarr.hover(function(){ _index = $(this).index(); _sumarr.eq(_index).addClass(_obj.sumsel).siblings().removeClass(_obj.sumsel); imgPlaces(); }); if(callback){ callback(); } } },300) }//MagicZoomInit END }//MagicZoom END如有问题 和新的需求 请联系 1015003209@qq.com