自定义放大镜插件 兼容ie6
来源：互联网 发布：人工神经网络算法教程 编辑：程序博客网 时间：2024/05/17 17:43
样式
@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
阅读全文
0 0
- 自定义放大镜插件 兼容ie6
- ecshop版本模板的放大镜,兼容ie6+ie7+ie8+ff
- jquery Raty 评级插件 Demo (兼容IE6)
- 【jQuery】兼容IE6的图表插件Highcharts
- 放大镜插件
- IE6兼容
- jQuery 兼容ie6的固定定位插件，使用简单
- 兼容IE6的jQuery多功能表格插件Param Query Grid
- 自定义input[file]（文件上传控件）样式-兼容IE6
- uisearchbar中自定义 放大镜图标 placeolder字体颜色 文本框背景色 兼容ios7
- UISearchbar中自定义 放大镜图标 placeolder字体颜色 文本框背景色 兼容ios7
- 写了一个qq表情jquery插件（ie6&ie6+ chrome firefox兼容）
- JQUERY图片放大镜插件
- jquery放大镜插件用法
- jquery 图片放大镜插件
- jquery放大镜效果插件
- jQuery图片放大镜插件
- JQuery插件:图片放大镜
- Spring Data Redis提供的几种序列化的比较
- extern "C"
- Oracle视图
- 从零开始写Go网络通信框架（4）——全双工收发消息
- 在Firefox中关闭缓存
- 自定义放大镜插件 兼容ie6
- 【LeetCode515 Find Largest Value in Each Tree Row】二叉树每行的最大值
- 利用Flume将MySQL表数据准实时抽取到HDFS
- 编码是件有逻辑的事情
- sqlite 怎么开启wal机制
- java初学者的历程
- java并发测试用例模板
- tp5中获取参数。tp5中未定义变量
- python环境配置-Linux系统
