自定义放大镜插件兼容ie6

最新推荐文章于 2023-08-11 17:59:26 发布

web前端执行者

最新推荐文章于 2023-08-11 17:59:26 发布

阅读量670

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/zhxh0376/article/details/73650051

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

样式

@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

web前端执行者

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义放大镜插件兼容ie6

样式@charset "utf-8";/* CSS Document */* {padding: 0;margin: 0;}body {margin: 0px;padding: 0px;min-width:1200px;}/*相关样式*/.MagicZoomBox { background:#fff;}.MagicZoomBox span { background:url
复制链接

扫一扫