<!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. （spring-第14回【IoC基础篇】）国际化信息 (转)

    国际化又称为本地化. 当你把手机的language由中文切换到英文时,你的微信也相应改用英语,这就是i18n国际化.一般来说,应用软件提供一套不同语言的资源文件,放到特定目录中,应用根据不同语言的操作 ...

  2. 活锁（livelock）

    活锁(livelock) 活锁指的是任务或者执行者没有被阻塞,由于某些条件没有满足,导致一直重复尝试,失败,尝试,失败. 活锁和死锁的区别在于,处于活锁的实体是在不断的改变状态,所谓的“活”, 而处于 ...

  3. 关于cocos2dx导入安卓项目至eclipse的诸多问题

    看视频实在是有点蛋疼,尽管我也想在苹果上做,可是奈何自己是一个小屌丝,根本买不起高富帅的装备.所以仅仅能硬着头皮去处理win以下的问题. 在把用C++语言编写的cocos2dx项目编译编译完毕之后,导 ...

  4. swift 笔记 (七) —— 关闭

    关闭 封闭件是从包括以下各项的组.它可以在代码被发送"片"... 行,不纠结的定义.继续. swift的闭包,有点像C和Objective-C语言里的 代码块 {--}  闭包能够 ...

  5. Cordova 使用经验

    1. 需要下载ant,ant需要的文件: build.xml <?xml version="1.0" ?> <project name ="antPro ...

  6. FFmpeg资料来源简单分析：libswscale的sws_getContext()

    ===================================================== FFmpeg库函数的源代码的分析文章: [骨架] FFmpeg源码结构图 - 解码 FFmp ...

  7. async和await关键字实现异步编程

    async和await关键字实现异步编程 异步编程   概念 异步编程核心为异步操作,该操作一旦启动将在一段时间内完成.所谓异步,关键是实现了两点:(1)正在执行的此操作,不会阻塞原来的线程(2)一旦 ...

  8. 体验VS2015正式版

    初次体验VS2015正式版,安装详细过程.   阅读目录 介绍 安装 介绍    纽约时间7月20日,微软发布了vs 2015 正式版,换算到我们的北京时间就是晚上了,今天回到家里,就下下来了,装上去 ...

  9. 用grunt搭建自动化的web前端开发环境

    用grunt搭建自动化的web前端开发环境 jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用! 1. 前言 各位web前端开发 ...

  10. C#后台利用正则表达式查找匹配字符

    /// <summary>        /// 发送短信 系统固化短信        /// </summary>        /// <param name=&qu ...