<!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. 理解Java虚拟机体系结构（转）

    1 概述 众所周知,Java支持平台无关性.安全性和网络移动性.而Java平台由Java虚拟机和Java核心类所构成,它为纯Java程序提供了统一的编程接口,而不管下层操作系统是什么.正是得益于Jav ...

  2. Oracle存储过程的简单示例

    ---创建一个表 create table TESTTABLE (   id1  VARCHAR2(12),   name VARCHAR2(32) ) select t.id1,t.name fro ...

  3. FutureTask解析（转）

    站在使用者的角度,future是一个经常在多线程环境下使用的Runnable,使用它的好处有两个:1. 线程执行结果带有返回值2. 提供了一个线程超时的功能,超过超时时间抛出异常后返回. 那,怎么实现 ...

  4. WordPress添加评论回复的电子邮件警报通知

    评论回复帖子,主动发送电子邮件通知评论员,这是提高的一大举措的用户体验.倡导孟一直在使用Willin Kan主评论回复电子邮件警报通知码,我相信很多人也使用,假设你没有使用.最好的尝试. 根据自己的需 ...

  5. 关于ACM，关于CSU

    原文地址:http://tieba.baidu.com/p/2432943599 前言: 即将进入研二,ACM的事情也渐渐远去,记忆终将模糊,但那段奋斗永远让人热血沸腾.开个贴讲讲ACM与中南的故事, ...

  6. asp.net学习之 数据绑定控件--List数据绑定控件

    原文:asp.net学习之 数据绑定控件--List数据绑定控件 List控件(如 CheckBoxList.DropDownList.ListBox 和 RadioButtonList 类)继承自L ...

  7. Building a RESTful Web Service(转)

    Building a RESTful Web Service This guide walks you through the process of creating a "hello wo ...

  8. bigdata_spark_源码修改_本地环境搭建_eclise

    Eclipse 下开发调试环境的配置该小节中使用的各项工具分别为:mac (Windows 7)+Eclipse Java EE 4.4.2+Scala 2.10.4+Sbt 0.13.8+Maven ...

  9. springmvc4

    web项目(使用html视图解析器)   完整配置springmvc4,最终视图选择的是html,非静态文件. 最近自己配置spring的时候,遇到很多问题,由于开发环境和版本的变化导致网友们给出的建 ...

  10. 完整详细的说明GCD列（一）dispatch_async;dispatch_sync;dispatch_async_f;dispatch_sync_f

    为什么要写这个系列,由于百度了一下.我们正在寻找一个非常比较片面的Blog.抄来抄去,写作是很粗糙. 所以,我想写这个系列,尝试记录官方网站GCD强大的全功能的表达.为了方便他们,也方便他人,假设有发 ...