js 图片放大镜效果实现

 

我们在网站上看到的轮播 比如京东 淘宝 商品幻灯移动到大图上能看到放大的图片的效果

先看预览图

实现分析

放大的效果 是在大图上 触发onmouseover 事件触发的 鼠标移动到图片上

要实现一个选择遮罩区 图中白色的透明区 还有在右边显示对应的大图区域  动态生成遮罩区(div的一个元素) 和右侧展示区 （动态生成一个大图的固定宽高展示区 根据对应的大图位置 显示出原图的对应的部位 其余的隐藏 CSS方式 固定宽高其余的隐藏）

源码分析

先贴一下HTML 这个结构就是对应的小图 触发找到大图（准确说是替换对应大图的地址） 一般的想法 我这样的只能想到 小图 大图都放上去 对应关系找好久行了~ 还是思路最重要啊~

<div class="right-extra" style="margin:100px;">
  <!--产品参数开始-->
  <div>
    <div id="preview" class="spec-preview">
        <span class="jqzoom">
            <img jqimg="images/b1.jpg" src="images/s1.jpg" />
        </span>
    </div>
    <!--缩图开始-->
    <div class="spec-scroll"> <a class="prev">&lt;</a> <a class="next">&gt;</a>
      <div class="items">
        <ul>
          <li><img alt="佳能" bimg="images/b1.jpg" src="images/s1.jpg" onmousemove="preview(this);"></li>
          <li><img alt="佳能" bimg="images/b2.jpg" src="images/s2.jpg" onmousemove="preview(this);"></li>
          <li><img alt="佳能" bimg="images/b3.jpg" src="images/s3.jpg" onmousemove="preview(this);"></li>
          <li><img alt="佳能" bimg="images/b1.jpg" src="images/s1.jpg" onmousemove="preview(this);"></li>
          <li><img alt="佳能" bimg="images/b3.jpg" src="images/s3.jpg" onmousemove="preview(this);"></li>
          <li><img alt="佳能" bimg="images/b1.jpg" src="images/s1.jpg" onmousemove="preview(this);"></li>
          <li><img alt="佳能" bimg="images/b2.jpg" src="images/s2.jpg" onmousemove="preview(this);"></li>
          <li><img alt="佳能" bimg="images/b1.jpg" src="images/s1.jpg" onmousemove="preview(this);"></li>
          <li><img alt="佳能" bimg="images/b2.jpg" src="images/s2.jpg" onmousemove="preview(this);"></li>
          <li><img alt="佳能" bimg="images/b2.jpg" src="images/s2.jpg" onmousemove="preview(this);"></li>
          <li><img alt="佳能" bimg="images/b1.jpg" src="images/s1.jpg" onmousemove="preview(this);"></li>
          <li><img alt="佳能" bimg="images/b2.jpg" src="images/s2.jpg" onmousemove="preview(this);"></li>
        </ul>
      </div>
    </div>
    <!--缩图结束-->
  </div>
  <!--产品参数结束-->

 

用的jquery实现的 首先就是事件触发 .jqzoom元素触发jqueryzoom 传入参数xzoom yzoom 

//图片放大镜效果
$(function(){
   
   $(".jqzoom").jqueryzoom({xzoom:380,yzoom:410});
});

然后来看下定义的地方 options这个就是配置参数 =

{xzoom:380,yzoom:410}

 下面是首先执行的效果  合并配置项 执行的 是jquery新添加的方法jqueryzoom 同时传入参数

(function($){

        $.fn.jqueryzoom = function(options){
        var settings = {
                xzoom: 200,//zoomed width default width
                yzoom: 200,//zoomed div default width
                offset: 10,    //zoomed div default offset
                position: "right",//zoomed div default position,offset position is to the right of the image
                lens:1, //zooming lens over the image,by default is 1;
                preload: 1
            };
            /*配置存在 替换默认配置*/
            if(options) {
                /*jquery.extend() target为空 给jquery本身添加新方法 这里合并settings默认配置参数 和 设置的配置参数options
                后面的options覆盖前面的默认值
                也就是 xzoom 和yzoom值 替换成设置的值*/
                $.extend(settings, options);
            }

 

下面就是重要的地方了 主要实现放大镜的地方  首先要动态添加遮罩区 和 右侧大图展示区 $(this) 指的是span的 jquery对象 就是我们鼠标移动到大图上面触发的事件

 首先就是找到span元素到父级元素  [id="preview" class="spec-preview" div]  的 左右距离 

然后获取span元素到父元素 顶部的距离 同时获取图片的宽和 高 （包括边框的宽度 ）

以上省略两部

动态添加遮罩 和 右侧大图展示区 元素div  遮罩在span里面  右侧大图展示在span的外层

 

 

        $(this).hover(function(){

            var imageLeft = this.offsetLeft;//   span元素右边框到包裹span父级元素的左边距
            var imageRight = this.offsetRight;// span元素右边框到包裹span父级元素的右边距

            var imageTop =  $(this).get(0).offsetTop;// span 第一个DOM元素 顶部边框到包裹span的父元素的顶部距离
            var imageWidth = $(this).children('img').get(0).offsetWidth;//span下第一个图片DOM 的宽度 图片宽度和边框的宽度
            var imageHeight = $(this).children('img').get(0).offsetHeight;


            noalt= $(this).children("img").attr("alt");
//获取span下图片的属性jqimg
            var bigimage = $(this).children("img").attr("jqimg");
// span下图片的属性alt设置为空
            $(this).children("img").attr("alt",'');

                    /*动态加入 遮罩层 和 右侧 对应图显示div */
            if($("div.zoomdiv").get().length == 0){
                //如果没有找到类名为zoomdiv的div元素  数量为0时
                //在span的后面插入
                // 对应大图部位显示 尺寸

            $(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");

//span元素内部最后插入内容 遮罩层~jqZoomPup
            $(this).append("<div class='jqZoomPup'>&nbsp;</div>");

            }
                    /*动态加入 遮罩层 和 右侧 对应图显示div  闭合*/


            if(settings.position == "right"){

            if(imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width){

            leftpos = imageLeft  - settings.offset - settings.xzoom;

            }else{

            leftpos = imageLeft + imageWidth + settings.offset;
            }
            }else{
            leftpos = imageLeft - settings.xzoom - settings.offset;
            if(leftpos < 0){

            leftpos = imageLeft + imageWidth  + settings.offset;

            }

            }

/*设置右边展示图 位置 大小*/
            $("div.zoomdiv").css({ top: imageTop,left: leftpos });

            $("div.zoomdiv").width(settings.xzoom);

            $("div.zoomdiv").height(settings.yzoom);

            $("div.zoomdiv").show();

            if(!settings.lens){
              $(this).css('cursor','crosshair');
            }



// body内元素移动触发mousemove事件
                   $(document.body).mousemove(function(e){



                   mouse = new MouseEvent(e);

                   /*$("div.jqZoomPup").hide();*/

                    /*获取原图的宽高 带边框宽度 */
                    var bigwidth = $(".bigimg").get(0).offsetWidth;

                    var bigheight = $(".bigimg").get(0).offsetHeight;

                    var scaley ='x';

                    var scalex= 'y';


                    if(isNaN(scalex)|isNaN(scaley)){
                    //宽高比 宽度
                    var scalex = (bigwidth/imageWidth);
                    // 高宽比  高度
                    var scaley = (bigheight/imageHeight);



                    /*遮罩层 宽度 类jqZoomPup的元素 宽 设置为 */
                    // 得到遮罩层的宽高~
                    $("div.jqZoomPup").width((settings.xzoom)/scalex );

                    $("div.jqZoomPup").height((settings.yzoom)/scaley);

                    if(settings.lens){
                    $("div.jqZoomPup").css('visibility','visible');
                    }

                   }


                     /*鼠标获取点的X轴距离 */
                    xpos = mouse.x - $("div.jqZoomPup").width()/2 - imageLeft;

                    ypos = mouse.y - $("div.jqZoomPup").height()/2 - imageTop ;

                    if(settings.lens){

                    xpos = (mouse.x - $("div.jqZoomPup").width()/2 < imageLeft ) ? 0 : (mouse.x + $("div.jqZoomPup").width()/2 > imageWidth + imageLeft ) ?  (imageWidth -$("div.jqZoomPup").width() -2)  : xpos;

                    ypos = (mouse.y - $("div.jqZoomPup").height()/2 < imageTop ) ? 0 : (mouse.y + $("div.jqZoomPup").height()/2  > imageHeight + imageTop ) ?  (imageHeight - $("div.jqZoomPup").height() -2 ) : ypos;

                    }


                    if(settings.lens){

                    $("div.jqZoomPup").css({ top: ypos,left: xpos });

                    }



                    scrolly = ypos;

                    $("div.zoomdiv").get(0).scrollTop = scrolly * scaley;

                    scrollx = xpos;

                    $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;


                    });
            }