jQuery补充，模拟图片放大镜

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="css/fdj.css">

</head>

<body>

<div class="outer">                     <!--放大镜主体div-->

    <div class="small_box">             <!--放大镜小图区域-->

        <div class="float"></div>       <!--小图里的玻璃罩区域-->

        <img src="img/small.jpg">

    </div>

    <div class="big_box">               <!--放大镜大图区域-->

        <img src="img/big.jpg">

    </div>

</div>

<script src="jquery/jquery.min.js"></script>

<script src="fdj.js"></script>

</body>

</html>

css

@charset "utf-8";

*{

    margin:;

    padding:;

}

.outer{                         /*放大镜主体div*/

    width: 350px;

    height: 350px;

    border:5px solid #0f68ee;

}

.outer .small_box{              /*放大镜小图区域*/

    position: relative;

}

.outer .small_box .float{       /*放大镜小图区域里的玻璃罩*/

    width: 175px;

    height: 175px;

    background-color: #ABC7E2;

    opacity: 0.4;

    position: absolute;

    display: none;

}

.outer .big_box{                /*放大镜大图区域*/

    width: 400px;

    height: 400px;

    border:5px solid #0f68ee;

    overflow:hidden;

    position: absolute;

    top:;

    left: 370px;

    display: none;

}

.outer .big_box img{

    position: absolute;

}

js

/**

 * Created by admin on 2017/5/10.

 */

$(function () {

    // 当鼠标悬浮到小图片区域的时候，执行鼠标悬浮事件

    $('.outer .small_box').mouseover(function () {

        $('.outer .small_box .float').css('display','block');           //显示小图片区域里的玻璃罩

        $('.outer .big_box').css('display','block');                    //显示大图片区域

    });

    //当前鼠标离开小图片区域的时候，执行鼠标离开事件

    $('.outer .small_box').mouseout(function () {

        $('.outer .small_box .float').css('display','none');            //隐藏小图片区域里的玻璃罩

        $('.outer .big_box').css('display','none');                     //隐藏大图片区域

    });

    // 当鼠标在小图片区域移动的时候，执行鼠标移动事件

    $('.outer .small_box').mousemove(function (e) {

        var _event = e || window.event;                                 //接收事件里的event对象信息

        var small_box_height = $('.outer .small_box').height();         //获取小图区域div的高度

        var small_box_width = $('.outer .small_box').width();           //获取小图区域div的宽度

        var float_height = $('.outer .small_box .float').height();      //获取小图区域里的玻璃罩高度

        var float_width = $('.outer .small_box .float').width();        //获取小图区域里的玻璃罩宽度

        var float_height_ban = $('.outer .small_box .float').height()/2;    //获取小图区域里的玻璃罩一半高度

        var float_width_ban = $('.outer .small_box .float').width()/2;      //获取小图区域里的玻璃罩一半宽度

        //换算玻璃罩滑动值

        var mouse_left = _event.clientX - float_width_ban;                  //将鼠标点与左边边距，减去玻璃罩的一半，就是玻璃罩横向滑动值

        var mouse_top = _event.clientY - float_height_ban;                  //将鼠标点与上边边距，减去玻璃罩的一百，就是玻璃罩纵向滑动值

        if (mouse_left < 0){                                                //玻璃罩横向滑动值，如果小于0

            mouse_left = 0;                                                 //将璃罩横向滑动值，设置为0

        }else if (mouse_left >small_box_width - float_width){               //判断璃罩横向滑动值，如果大于了小图区域宽度减去玻璃罩宽度，说明璃罩横向滑动值向右已经超出了小图区域

            mouse_left = small_box_width - float_width;                     //将璃罩横向滑动值，设置成小图区域宽度减去玻璃罩宽度，就是横向滑动值向右到头

        }

        if (mouse_top < 0){                                                 //玻璃罩纵向滑动值，如果小于0

            mouse_top = 0;                                                  //将璃罩纵向滑动值，设置为0

        }else if (mouse_top >small_box_height - float_height){              //判断璃罩纵向滑动值，如果大于了小图区域高度减去玻璃罩高度，说明璃罩纵向滑动值向下已经超出了小图区域

            mouse_top = small_box_height - float_height;                    //将璃罩纵向滑动值，设置成小图区域高度减去玻璃罩高度，就是纵向滑动值向下到头

        }

        $('.outer .small_box .float').css('left',mouse_left + 'px');        //获取到玻璃罩纵向滑动值

        $('.outer .small_box .float').css('top',mouse_top + 'px');          //获取到玻璃罩横向滑动值

        //换算大图滑动比例

        //将大图片的宽度减去大图容器div宽度，除以小图容器div宽度减去玻璃罩宽度，等于大图反向横向滑动比例

        var percentX = ($('.outer .big_box img').width()-$('.outer .big_box').width())/(small_box_width-float_width);

        //将大图片的高度减去大图容器div高度，除以小图容器div高度减去玻璃罩高度，等于大图反向纵向滑动比例

        var percentY = ($('.outer .big_box img').height()-$('.outer .big_box').height())/(small_box_height-float_height);

        $('.outer .big_box img').css('left',-percentX*mouse_left+'px'); //反向横向滑动比例，除以玻璃罩横向滑动值，等于大图横向滑动值

        $('.outer .big_box img').css('top',-percentY*mouse_top+'px');   //反向纵向滑动比例，除以玻璃罩纵向滑动值，等于大图纵向滑动值

    });

});

jQuery补充，模拟图片放大镜的更多相关文章

  1. jquery.jqzoom.js图片放大镜

    jqzoom插件实现图片放大镜效果 1. jquery.jqzoom.js //************************************************************ ...

  2. Jquery插件开发之图片放大镜效果(仿淘宝)

    原网转载地址:http://www.cnblogs.com/hnvvv/archive/2011/11/19/2255197.html 需求:公司某个网站,需要实现图片预览效果,并能像淘宝一样实现局部 ...

  3. ♫【jQuery插件】图片放大镜

    JQZoom

  4. Jquery图片放大镜

    一般在“在线商城.电子商务.企业产品介绍”等地方经常会看到一些图片放大镜的功能,而做这个功能一般是会用一个js包——enlarge.js(这是jquery图片放大镜的插件).Enlarge 是一个基于 ...

  5. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

  6. Jquery的jqzoom插件的使用（图片放大镜）

    今天学习一下,图片放大镜功能,需要使用插件JQzoom 引入文件 <script type="text/javascript" src="js/jquery.min ...

  7. jQuery基础（常用插件 表单验证，图片放大镜，自定义对象级，jQuery UI，面板折叠）

    1.表单验证插件——validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下:   $(form).validate({o ...

  8. 图片放大镜——jQuery插件Cloud Zoom

    下载地址:cloud_zoom.rar 图片放大镜效果是一种不错的效果,多应用于电子商务.图片展示等网站,给用户带来更好的体验.实现这种效果的代码不少,今天要给大家介绍的是 Cloud Zoom,它是 ...

  9. 基于jQuery仿淘宝产品图片放大镜代码

    今天给大家分享一款 基于jQuery淘宝产品图片放大镜代码.这是一款基于jquery.imagezoom插件实现的jQuery放大镜.适用浏览器:IE8.360.FireFox.Chrome.Safa ...

随机推荐

  1. iOS tabbar 图片，最佳大小方式

    iOS tabbar 图片,最佳大小方式 文档大小 30 *30 retaina 60 *60 最佳大小 48 *32 参考:http://stackoverflow.com/questions/15 ...

  2. spring相关记录

    1 国际化org.springframework.web.servlet.i18n.SessionLocaleResolver    http://blog.csdn.net/kcai678/arti ...

  3. ajax local.href不跳转的原因之一

    ajax local.href不跳转的原因之一 打开F12发现一直报 next.html is not a function…… 后来发现next少了(),看得我尴尬症都犯了

  4. CLightLock:一个简单AutoLock

    原理: 标准的RAII, 利用构造函数进行加锁,利用析构函数进行解锁. #ifndef _C_LIGTHT_LOCK_HPP #define _C_LIGTHT_LOCK_HPP class CLig ...

  5. MSS & MTU

  6. 关于RHEL6下桥网配置的写法(ifcfg-eth0,ifcfg-br0) / 在阿里云的CentOS上安装docker

    Posted on 2011-07-28 16:46 zhousir1991 阅读(1978) 评论(0) 编辑 收藏 以下仅仅是我在做练习的时候下的环境,参照写即可:  [root@desktop2 ...

  7. linux下安装oracle中遇到的一些问题

    1.出现了:Environment variable ORACLE_UNQNAME not defined. Please set ORACLE_UNQNAME to da tabase unique ...

  8. LDAP编辑器 LDAPAdmin

    LDAPAdmin 是一个在 Windows 用来编辑 LDAP 账户信息的管理工具,采用 Delphi 开发.

  9. 【微信支付】公众号、商户基础配置和流程（包括设置支付授权目录、测试支付目录和白名单、JS接口安全域名、授权回调域名等）

    一.使用场景以及说明 使用场景:商户已有H5商城网站,用户通过消息或扫描二维码在微信内打开网页时,可以调用微信支付完成下单购买的流程. 说明:1.用户打开图文消息或者扫描二维码,在微信内置浏览器打开网 ...

  10. 阿里云服务器迁移更改IP，导致网站挂掉

    从昨日下午三点阿里云主机迁移变更IP导致网站挂点,到刚刚网站.手机客户端均恢复访问,这个过程持续了24个钟头.最后还是我自己解决了问题. 哎,真是揪心. 其间和阿里云工程师反复沟通,昨日沟通到今日凌晨 ...