<!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. uva 592 Island of Logic （收索）

      Island of Logic  The Island of Logic has three kinds of inhabitants: divine beings that always tel ...

  2. 坑爹BUG，没有详细的看还真看不出问题

    Queue queue = new LinkedList<String> (); for(int i = 0; i<20; i++) { queue.add("坑爹&quo ...

  3. NSIS：IfFileExists+Goto实现简单跳转

    原文 NSIS:IfFileExists+Goto实现简单跳转 在用户手册中有相关示例,但也许有的同学没有发现,那么我再发一个,仅供入门学习参考. IfFileExists 要检测的文件 文件存在时跳 ...

  4. 数组排序、递归——（Java学习笔记二）

    升序:      选择排序:         选定一个元素,一次和后面的元素相比较,如果选定的元素大雨后面的比较元素,就交换位置         先出现最小值,最后出现最大值. public stat ...

  5. Yii Framework2.0开发教程（5）数据库mysql性能

    继续<Yii Framework2.0开发教程(3)数据库mysql入门> 首先给予一定的尊重yii2数据库支持引进 Yii 基于 PHP's PDO一个成熟的数据库访问层的建立.它提供了 ...

  6. 第22章 职责链模式（Chain of Responsibility）

    原文 第22章 职责链模式(Chain of Responsibility) 职责链模式 导读:职责链模式是一个既简单又复杂的设计模式,刚开始学习这个设计模式的时候光示例都看了好几遍.就为了理清里面的 ...

  7. js 正则学习小记之匹配字符串优化篇

    原文:js 正则学习小记之匹配字符串优化篇 昨天在<js 正则学习小记之匹配字符串>谈到 个字符,除了第一个 个,只有 个转义( 个字符),所以 次,只有 次成功.这 次匹配失败,需要回溯 ...

  8. CSS3新功能简要

    1.CSS3 框架:    由 CSS3,您可以创建圆角.加入到该矩形阴影,使用图片绘制边框.例如 * border-radius -border-*-radius(top,left,right,bo ...

  9. 10. IDENTITY属性使用小结

    原文:10. IDENTITY属性使用小结 从SQL Server 2012开始有了Sequence,简单用列如下: CREATE SEQUENCE TestSeq START INCREMENT ; ...

  10. dozer-初识

    1.简介     dozer是一种JavaBean的映射工具,类似于apache的BeanUtils.但是dozer更强大,它可以灵活的处理复杂类型之间的映射.不 但可以进行简单的属性映射.复杂的类型 ...