<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>图片放大镜</title>

</head>

<style>

*{ padding:0; margin:0}

.fdj{}

.fdj .small-wrap{ overflow:hidden; float:left}

.fdj .small-main{ width:266px; height:231px; position:relative}

.fdj .small-main img{ width:100%; height:100%}

.fdj .small-main .mask{ display:none; cursor:crosshair; position:absolute; left:0; top:0;width:100px; height:80px; background:rgba(0,0,0,.3)}

.fdj .bot-main{ width:266px; height:70px; overflow:hidden; position:relative;background-color: #F1F0F0; margin-top:2px;}

.fdj .bot-main .btn{ z-index:99; cursor:pointer; position:absolute; top:0; width:14px; height:70px; background-color:#ccc; color:#fff; line-height:70px; text-align:center}

.fdj .bot-main .prev{ left:0;}

.fdj .bot-main .next{ right:0;}

.fdj .bot-main .pic-list{ width:238px; height:70px; position:absolute; left:14px;}

.fdj .bot-main .list{ width:3000px; position:absolute; left:0; top:0;}

.fdj .bot-main .list li{ float:left; list-style:none}

.fdj .bot-main .list img{ width:70px; height:46px; margin:12px 0 0 4px;border:2px solid #F1F0F0}

.fdj .bot-main .list .active img{border:2px solid #959595}

.fdj .big-wrap{width:266px; height:231px; border:1px solid #ccc; float:left; overflow:hidden; display:none; position:relative}

.fdj .big-wrap img{ position:absolute; left:0; top:0; min-width:600px; min-height:700px;}

</style>

<body>

<div class="fdj imageZoom">

    <div class="small-wrap">

        <div class="small-main">

            <img src="http://0.thumb.pc6.com/thumb/up/2016-1/2016126154311097190_225_260.jpg">

            <div class="mask"></div>

        </div>

        <div class="bot-main">

            <span class="btn prev">《</span>

            <div class="pic-list">

                <ul class="list">

                    <li class="active"><img src="http://0.thumb.pc6.com/thumb/up/2016-1/2016126154311097190_225_260.jpg"></li>

                    <li><img src="http://www.guanfang123.com/Uploads/Picture/20150925/5604e6e0ced0c.jpg"></li>

                    <li><img src="http://www.guanfang123.com/Uploads/Picture/20150925/5604e6888e257.jpg"></li>

                    <li><img src="http://www.guanfang123.com/Uploads/Picture/20150925/5604e5bedce24.jpg"></li>

                    <li><img src="http://www.guanfang123.com/Uploads/Picture/20150925/5604e481ac8e8.png"></li>

                    <li><img src="http://www.guanfang123.com/Uploads/Picture/20150925/5604e2c9725f8.jpg"></li>

                    <li><img src="http://www.guanfang123.com/Uploads/Picture/20150923/56023b44d65e2.jpg"></li>

                </ul>

            </div>

            <span class="btn next">》</span>

        </div>

    </div>

    <div class="big-wrap"><img src="http://0.thumb.pc6.com/thumb/up/2016-1/2016126154311097190_225_260.jpg"></div>

</div>

<script src="soft/js/global.js"></script>

<script>

;(function(){

    $.fn.imageZoom = function(options){

        var defaults = {};

        var sets = $.extend(defaults , options);

        this.each(function(){

            var _this=$(this);

            var small_wrap=_this.find(".small-main");//小图

            var big_wrap=_this.find(".big-wrap");//大图

            var mask=_this.find(".mask");//遮罩

            var oul=_this.find('ul');

            var oli=oul.find('li');

            var i=0,small_w,small_h,big_w,big_h,blc_w,blc_h;

            oul.width(oli.outerWidth(true)*oli.length);

            //切换缩略图

            _this.find('.next').click(function(){

                i>=oli.length-3?i=0:i++;

                oul.animate({'left':-i*oli.outerWidth(true)});

            });

            _this.find('.prev').click(function(){

                i<=0?i=oli.length-3:i--;

                oul.animate({'left':-i*oli.outerWidth(true)});

            });

            oli.hover(function(){

                var _src=$(this).find("img").attr('src');

                $(this).addClass("active").siblings().removeClass("active");

                small_wrap.find("img").attr("src",_src);

                big_wrap.find("img").attr("src",_src);

            });

            //小图移动

            small_wrap.mousemove(function(e){

                small_w=small_wrap.width()-mask.width();

                small_h=small_wrap.height()-mask.height();

                big_w=big_wrap.find("img").width()-big_wrap.width();

                big_h=big_wrap.find("img").height()-big_wrap.height();

                blc_w=small_w/big_w;

                blc_h=small_h/big_h;

                mask.show();

                big_wrap.show();

                var maskLeft = mask.position().left;

                var maskTop = mask.position().top;

                var X=e.pageX-mask.width()/2;

                var Y=e.pageY-mask.height()/2;

                if(X<=0){X=0};

                if(Y<=0){Y=0};

                if(X>=$(this).width()-mask.width()){

                    X=$(this).width()-mask.width()

                };

                if(Y>=$(this).height()-mask.height()){

                    Y=$(this).height()-mask.height()

                };

                mask.css({'left':X,'top':Y});

                big_wrap.find("img").css({'left':-X/blc_w,'top':-Y/blc_h});

            }).mouseout(function(){

               mask.hide();

               big_wrap.hide();

            });

        });

    };

})(jQuery)

$(function(){

    $('.imageZoom').imageZoom();

})

</script>

</body>

</html>

实例截图：

jquery 产品查看放大镜组件的更多相关文章

  1. 基于jQuery仿淘宝产品图片放大镜代码

    今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...

  2. 基于jQuery仿淘宝产品图片放大镜特效

    在开发商城的时候,往往会用到图片的放大功能,这里把自己在近期项目中使用的放大镜特效做一下总结(非插件). 放大镜效果 常用的js组件jquery.imagezoom,jquery.jqzoom,jqu ...

  3. Jquery图片上传组件，支持多文件上传

    Jquery图片上传组件,支持多文件上传http://www.jq22.com/jquery-info230jQuery File Upload 是一个Jquery图片上传组件,支持多文件上传.取消. ...

  4. 分享一个discuz touch端的jQuery下拉刷新组件

    在线Demo 最近装了个discuz论坛, 趣股VIP吧,发现里面内置的jQuery上拉刷新组件写得还行,STATICURL可以用'http://o9gzet7tk.bkt.clouddn.com/i ...

  5. jquery图片查看插件，支持旋转、放大、缩小、拖拽、缩略图（仿qq图片查看）

    最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...

  6. js,onblur后下一个控件获取焦点判断、html当前活跃控件、jquery版本查看、jquery查看浏览器版本、setTimeout&setInterval

    需求: input控件在失去焦点后直接做验证,验证通不过的话,显示相应错误.但是如果失去焦点后点击的下个控件是比较特殊的控件(比如,退出系统),那么不执行验证操作,直接退出系统(防止在系统退出前,还显 ...

  7. jquery星级评论打分组件

    <!DOCTYPE HTML><html> <head> <meta charset="utf-8"><title>jq ...

  8. 查看 activex 组件的方法

    查看 activex 组件的方法 可以使用的工具COMRaider 直接安装 并选择对应的类型即可查看相关的信息,比OLE/COM Object Viewer 简洁方便. 具体的操作如下: 随意选择一 ...

  9. 基于jQuery封装的分页组件

    前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...

随机推荐

  1. 【源代码】Set集合源代码剖析

    注:下面源代码基于jdk1.7.0_11 Set集合事实上是对Map集合的封装,Map集合存储的是键值对,那么我们将值隐藏,不向外界暴露,这样就形成了Set集合. 相应Map集合的两个非常重要的实现H ...

  2. 于PsIsSystemThread无论是在线程系统线程标识获得

    我一直好奇一个进程的所有线程改变线程标志Terminated mov edi, edi ; IoIsSystemThread push ebp mov ebp, esp mov eax, [ebp+a ...

  3. C++11于once_flag，call_once分析的实现

    基于该分析llvm的libc++,代替gun的libstdc++,由于libstdc++的代码里太多宏了,看起来蛋疼. 在多线程编程中,有一个常见的情景是某个任务仅仅须要运行一次.在C++11中提供了 ...

  4. Android与服务器端数据交互（转）

    上一节中我们通过http协议,采用HttpClient向服务器端action请求数据.当然调用服务器端方法获取数据并不止这一种.WebService也可以为我们提供所需数据,那么什么是webServi ...

  5. document.all使用

    document.all 一个. document.all它是在页面中的所有元素的集合.例如:      document.all(0)一个元素 二. document.all能够推断浏览器是否是IE ...

  6. UIMenuController,UIPasteboard:复制，粘贴详细解释

    首先,这四个地图.我想实现的功能.[一张照片讲一个复制到另一UIimageView上] 实现代码例如以下: -(IBAction)panGestureTop:(UILongPressGestureRe ...

  7. android控制控制的显示顺序

    在android中假设首先在xml中静态加入了一个控件,剩下的控件都是通过addView动态加入.那么假设有控件覆盖的情况(比方说使用FrameLayout或者RelativeLayout),先加入得 ...

  8. 军医王-moTestin云测试看好移动医疗行业

    看医生汪谟军:Testin云測在移动医疗产业大有可为 2014/10/21 · Testin · 开发人员訪谈 日常生活可能常常碰到这种情况:突然遇上头疼脑热.小病小痛,去医院又不方便:非常想了解家人 ...

  9. 配置路线图RouteMap注意事项

    路线图RouteMap一个特征是First Match Win.假设没有人RouteMap实例都满足,那么.默认拒绝操作,然后配置路线图时,有一点需要特别注意.否则容易出错,这是默认的处理.通常的做法 ...

  10. 微信JS-SDK使用权限签名算法的服务端实现(.net版本)

    原文:微信JS-SDK使用权限签名算法的服务端实现(.net版本) 一.概要 微信此次开放JS接口,开放了一大批api权限,即使在未认证的订阅号也可以使用图像接口,音频接口,智能接口,地理位置,界面操 ...