<!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. Ubuntu文件的复制、移动和删除命令

    先说说cp复制命令 该命令的功能是将给出的文件或文件夹复制到还有一文件或文件夹中,同MSDOS下的copy命令一样,功能十分强大. 语法: cp [选项] 源文件或文件夹 目标文件或文件夹 说明:该命 ...

  2. tc-SRM-626-DIV1-250

    枚举alice投掷骰子得到的结果的每一种情况极其数量. 枚举bob投掷骰子得到的结果的每一种情况极其数量. 然后枚举alice投掷骰子得到的结果的数量和bob投掷骰子比alice低的数量. 然后计算结 ...

  3. linux Apache rotatelogs 故障原因及解决方案未生效

    rotatelogs 截断日志.构造.但保存vhost.conf 之后.serverhttpd -k restart 还是无法成功重新启动. 日志文件: (2)No such file or dire ...

  4. 页面加速Chromium 预压 Prerendering

    前者已经推出了一个博客prefetch预加载的网页资源,以提高网页加载速度,下面我们一起来看一下,以加速网页chromium prerendering.介绍prerendering之前.先介绍两个概念 ...

  5. polay定理总结

    参考资料:url=YveSCnlx_dlXo4oGjE8w3_2QRObRXvXMbix81ppCxBGqBswxffwDN9frzY5xxaKf7GgEMY8K93JTPEhkBzY66XOaN0G ...

  6. Kd-Tree算法原理和开源实现代码

    本文介绍一种用于高维空间中的高速近期邻和近似近期邻查找技术--Kd-Tree(Kd树). Kd-Tree,即K-dimensional tree,是一种高维索引树形数据结构,经常使用于在大规模的高维数 ...

  7. SSIS从理论到实战,再到应用(5)----流程控制之Foreach循环

    原文:SSIS从理论到实战,再到应用(5)----流程控制之Foreach循环 上期回顾: SSIS从理论到实战,再到应用(4)----流程控制之For循环 上一期讲了For循环,Foreach循环相 ...

  8. HBase写的初步测试中的表现

    底 第四年HBase.在上线的机HBase集群做一个初步的测试写入性能.下面具体说明做测试内容. 说明 HBase周围环境 0.96版本号,8台region server.默认配置 写数据说明 单co ...

  9. ABP分层架构

    ABP分层架构 基于DDD的现代ASP.NET开发框架--ABP系列之3.ABP分层架构 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称. ABP ...

  10. POJ 2081 Recaman&#39;s Sequence（水的问题）

    [简要题意]:这个主题是很短的叙述性说明.挺easy. 不重复. [分析]:只需要加一个判断这个数是否可以是一个数组,这个数组的范围. // 3388K 0Ms #include<iostrea ...