<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jquery图片放大镜插件 - A5源码</title>

<link rel="stylesheet" type="text/css" href="css/zzsc.css">

<script type="text/javascript" class="library" src="js/jquery-1.8.2.min.js"></script>

<script type="text/javascript" class="library" src="js/jquery.colorbox-min.js"></script>

<script type="text/javascript" class="library" src="js/zzsc.js"></script>

<body>

<div class="con-FangDa" id="fangdajing">

  <div class="con-fangDaIMg">

      <!-- 正常显示的图片-->

      <img src="data:images/big/1.jpg">

    <!-- 滑块-->

    <div class="magnifyingBegin"></div>

    <!-- 放大镜显示的图片 -->

    <div class="magnifyingShow"><img src="data:images/big/1.jpg"></div>

  </div>

  <ul class="con-FangDa-ImgList">

    <!-- 图片显示列表 -->

    <li class="active"><img src="data:images/thumb/1.jpg" data-bigimg="images/big/1.jpg"></li>

    <li><img src="data:images/thumb/2.jpg" data-bigimg="images/big/2.jpg"></li>

    <li><img src="data:images/thumb/3.jpg" data-bigimg="images/big/3.jpg"></li>

    <li><img src="data:images/thumb/4.jpg" data-bigimg="images/big/4.jpg"></li>

    <li><img src="data:images/thumb/5.jpg" data-bigimg="images/big/5.jpg"></li>

  </ul>

</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>

<p>来源：<a href="http://down.admin5.com/info/" target="_blank">A5源码</a></p>

</div>

</body>

</html>

css

*{

    margin: 0;

    padding: 0;

}

/*主容器*/

.con-FangDa{

    width: 300px;

    height: auto;

    margin: 10px auto;

    background-color:#fff;

}

/*正常容器*/

.con-fangDaIMg{

    width: 300px;

    height: 450px;

    position: relative;

    background-color: #454545;

}

.con-fangDaIMg > img{

    width: 100%;

    height:100%

}

/*滑块*/

.magnifyingBegin{

    width: 150px;

    height: 175px;

    left: 0;

    top: 0;

    background-color: #454545;

    opacity: 0.5;

    filter:alpha(opacity=50);

    position: absolute;

    cursor: move;

    display: none;

}

/*放大镜显示区域*/

.magnifyingShow{

    width: 450px;

    height: 514px;

    display: none;

    position: absolute;

    right: -470px;

    top: 0;

    overflow: hidden;

    background-color: #454545;

}

.magnifyingShow > img{

    width: 900px;

    height: 1350px;

    margin-left:0;

    margin-top: 0;

}

/*设置选择图片容器*/

.con-FangDa-ImgList{

    margin-top:10px;

    height:54px;

    width:320px;

    list-style: none;

}

.con-FangDa-ImgList > li{

    margin-right:7px;

    width: 50px;

    height: 50px;

    float: left;

    cursor: pointer;

    border: 2px solid #666;

    background-color: #454545;

    text-align:center;

}

.con-FangDa-ImgList > li > img{

    vertical-align:top;

    display:inline;

    width:auto;

    height:50px;

}

.con-FangDa-ImgList > .active{

    border-color:#000;

}

js

$(function(){

    $.fn.magnifying = function(){

        var that = $(this),

         $imgCon = that.find('.con-fangDaIMg'),//正常图片容器

             $Img = $imgCon.find('img'),//正常图片，还有放大图片集合

           $Drag = that.find('.magnifyingBegin'),//拖动滑动容器

           $show = that.find('.magnifyingShow'),//放大镜显示区域

        $showIMg = $show.find('img'),//放大镜图片

        $ImgList = that.find('.con-FangDa-ImgList > li >img'),

        multiple = $show.width()/$Drag.width();

        $imgCon.mousemove(function(e){

            $Drag.css('display','block');

            $show.css('display','block');

            //获取坐标的两种方法

               // var iX = e.clientX - this.offsetLeft - $Drag.width()/2,

               //     iY = e.clientY - this.offsetTop - $Drag.height()/2,

               var iX = e.pageX - $(this).offset().left - $Drag.width()/2,

                   iY = e.pageY - $(this).offset().top - $Drag.height()/2,

                   MaxX = $imgCon.width()-$Drag.width(),

                   MaxY = $imgCon.height()-$Drag.height();

                 /*这一部分可代替下面部分，判断最大最小值

               var DX = iX < MaxX ? iX > 0 ? iX : 0 : MaxX,

                   DY = iY < MaxY ? iY > 0 ? iY : 0 : MaxY;

               $Drag.css({left:DX+'px',top:DY+'px'});

               $showIMg.css({marginLeft:-3*DX+'px',marginTop:-3*DY+'px'});*/

               iX = iX > 0 ? iX : 0;

               iX = iX < MaxX ? iX : MaxX;

               iY = iY > 0 ? iY : 0;

               iY = iY < MaxY ? iY : MaxY;

               $Drag.css({left:iX+'px',top:iY+'px'});

               $showIMg.css({marginLeft:-multiple*iX+'px',marginTop:-multiple*iY+'px'});

               //return false;

        });

        $imgCon.mouseout(function(){

               $Drag.css('display','none');

            $show.css('display','none');

        });

        $ImgList.click(function(){

            var NowSrc = $(this).data('bigimg');

            $Img.attr('src',NowSrc);

            $(this).parent().addClass('active').siblings().removeClass('active');

        });

    }

    $("#fangdajing").magnifying();

});

之前看到过用canvas实现类似的放大镜效果，过两天抽时间我会整理下分享上来；

源码来源：A5源码

jquery放大镜效果的更多相关文章

  1. 关于jQuery中实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  2. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  3. 使用jquery实现放大镜效果

    原文:使用jquery实现放大镜效果 实现原理 首先,我们讲解一下放大镜效果的实现方式: 方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置. 方法二:对原图片进行放大,也就是调整 ...

  4. jquery+js实现鼠标位移放大镜效果

    jQuery实现仿某东商品详情页放大镜效果 用jquery+js实现放大镜效果,效果大概如下图! 效果是不是大家很感兴趣,放大镜查看细节,下边大家可以详细看一看具体是怎么实现的.下边直接看代码! HT ...

  5. js、jquery实现放大镜效果

    在一些电商网站的商品详情页面,都会有放大镜效果,实现起来并不是很困难,今天用了两个小时,写了一个放大镜效果的实例,来分享给大家! 实现的效果大概是这个样子的 预览 先来看一下效果吧,点击下面的链接预览 ...

  6. [转]jquery 鼠标放在图片上显示图片的放大镜效果jqzoom_ev-2.3

    本文转自:http://blog.csdn.net/weizengxun/article/details/6768183 鼠标放在图片上显示图片的放大镜效果使用jqzoom实现,本例版本2.3 效果图 ...

  7. 基于Jquery的商城商品图片的放大镜效果(非组件)

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

  8. jQuery实现图片放大镜效果

    实现图片放大镜的原理: 给放大镜元素一个对应的html元素为<div class='right'> 设置这个div的宽高固定为某个值(350px,350px) 设置div的css为超出部分 ...

  9. 【Demo】jQuery 图片放大镜效果——模仿淘宝图片放大效果

    实现功能: 模仿淘宝图片放大效果,鼠标移动到小图片的某一处,放大镜对应显示大图片的相应位置. 实现效果: 实现代码: <!DOCTYPE html> <html> <he ...

随机推荐

  1. 【C#】Json数据 排版算法

    我从服务器上取得一串Json数据,然后想表示到画面上.不过服务器上取下的Json数据肯定是经过压缩的,空格和换行都没有.如果直接看,可读性非常差. 由于我这个软件是内部管理用的,使用者既能直接看懂Js ...

  2. ASP.NET Web Api 安全性（转载）

    转载地址:http://www.cnblogs.com/fzrain/p/3552423.html 在Web Api中强制使用Https 我们可以在IIS级别配置整个Web Api来强制使用Https ...

  3. ASP.NET Web API 中的异常处理（转载）

    转载地址:ASP.NET Web API 中的异常处理

  4. 开个坑, 写个阿里云开放储存服务(OSS)的C++版SDK以及客户端

    这应该是继我研究手册QQ协议后的第2个稍微正式一点的网络程序, 不只是Scoket套接字编程, 还涉及到更多的HTTP协议知识! 阿里云开放储存服务OSS官方已经提供了不少SDK, 包括PHP/Pyt ...

  5. Oracle 备份与恢复介绍

    一.Oracle备份方式分类:Oracle有两类备份方式:(1)物理备份:是将实际组成数据库的操作系统文件从一处拷贝到另一处的备份过程,通常是从磁盘到磁带.物理备份又分为冷备份.热备份:   (2)逻 ...

  6. JVM字节码之整型入栈指令(iconst、bipush、sipush、ldc)

    官网:http://docs.oracle.com/javase/specs/jvms/se7/html/jvms-4.html 原文地址:http://www.linmuxi.com/2016/02 ...

  7. set[c++]

    #include <iostream> using namespace std; #include <set> int main(int argc, const char * ...

  8. 通过SharePoint Designer对SharePoint 2010的Master Page进行自定制

    1:需要在对应的SiteCollection 和 Site 中开启Publishing的服务 2:在Designer中创建自己的Master Page,进行对原始v4.master代码进行复制,和修改 ...

  9. hdu 4826(dp + 记忆化搜索)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4826 思路:dp[x][y][d]表示从方向到达点(x,y)所能得到的最大值,然后就是记忆化了. #i ...

  10. Linux学习笔记（2）Linux学习注意事项

    1 学习Linux的注意事项 ① Linux严格区分大小写 ② Linux中所有内容均以文件形式保存,包括硬件,如硬件文件是/deb/sd[a-p] ③ Linux不靠扩展名区分文件类型,但有的文件是 ...