注意：里边的两张图片(一大一小)可以自己添加，JQ采用jquery-1.11.3.js版，也可自行调换。

HTML代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>jQuery放大镜</title>

    <link rel="stylesheet" href="css/reset.min.css"/>

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

</head>

<body>

<div class="wrapper">

    <div class="small">

        <img src="img/1.jpg" alt=""/>

        <div class="mask"></div>

    </div>

    <div class="big">

        <img src="img/2.jpg" alt=""/>

    </div>

</div>

<script src="js/jquery-1.11.3.js"></script>

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

</body>

</html>

CSS代码：

@charset "UTF-8";

.wrapper{

    width: 800px;

    margin: 50px auto;

    position: relative;

}

.wrapper .small{

    position: absolute;

    top:;

    left:;

    width: 350px;

    height: 350px;

    border: 1px solid #000000;

    box-shadow: 3px 3px 5px #aaa;

}

.wrapper .small img{

    width: 100%;

    height: 100%;

}

.wrapper .small .mask{

    display: none;

    position: absolute;

    top:;

    left:;

    width: 150px;

    height: 150px;

    background-color: #000000;

    opacity: .4;

    cursor: move;

}

.wrapper .big{

    display: none;

    position: absolute;

    overflow: hidden;

    top:;

    left: 355px;

    border: 1px solid #000000;

    box-shadow: 3px 3px 5px #aaa;

}

.wrapper .big img{

    position: absolute;

    width: 800px;

    height: 800px;

    top:;

    left:;

}

reset.min.css文件：

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,button,input,textarea,th,td{margin:;padding:}body{font-size:12px;font-style:normal;font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif}small{font-size:12px}h1{font-size:18px}h2{font-size:16px}h3{font-size:14px}h4,h5,h6{font-size:100%}ul,ol{list-style:none}a{text-decoration:none;background-color:transparent}a:hover,a:active{outline-width:;text-decoration:none}table{border-collapse:collapse;border-spacing:}hr{border:;height:1px}img{border-style:none}img:not([src]){display:none}svg:not(:root){overflow:hidden}html{-webkit-touch-callout:none;-webkit-text-size-adjust:100%}input,textarea,button,a{-webkit-tap-highlight-color:rgba(0,0,0,0)}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]),video:not([controls]){display:none;height:}progress{vertical-align:baseline}mark{background-color:#ff0;color:#000}sub,sup{position:relative;font-size:75%;line-height:;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}button,input,select,textarea{font-size:100%;outline:}button,input{overflow:visible}button,select{text-transform:none}textarea{overflow:auto}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.clear:after{display:block;height:;content:"";clear:both}

JS代码：

/**

 * Created by 35107 on 2017/5/8.

 */

$(function () {

    var smallL, smallT, minL = 0, minT = 0, maxL, maxT;

    var $wrapper = $('.wrapper'),

        $small = $wrapper.children('.small'),

        $mask = $small.children('.mask'),

        $big = $wrapper.children('.big'),

        $curImg = $small.children('img'),

        $bigImg = $big.children('img');

    var multiple = 2 / 3, n = null,

        maskW = $curImg.width() * multiple,

        maskH = $curImg.height() * multiple,

        bigW = $bigImg.width() * multiple,

        bigH = $bigImg.width() * multiple;

    $mask.css({width: maskW, height: maskH});

    $big.css({width: bigW, height: bigH});

    $small.on({

        mouseenter: function (e) {

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

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

            setPos(e);

        },

        mousemove: function (e) {

            setPos(e);

        },

        mouseleave: function () {

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

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

        }

    });

    function setPos(e) {

        if (!smallL) {

            smallL = $small.offset().left;

            smallT = $small.offset().top;

            maxL = $small.innerWidth() - maskW;

            maxT = $small.innerHeight() - maskW;

            n = ($bigImg.width() - bigW ) / maxL;

        }

        var curL = e.clientX - smallL - maskW / 2,

            curT = e.clientY - smallT - maskH / 2;

        curL = curL < minL ? minL : (curL > maxL ? maxL : curL);

        curT = curT < minT ? minT : (curT > maxT ? maxT : curT);

        $mask.css({left: curL, top: curT});

        $bigImg.css({left: -curL * n, top: -curT * n})

    }

    function calculatedWidth() {

    }

});

JS实现放大镜效果(放大图片)的更多相关文章

  1. 使用js实现放大镜效果

    点击预览放大镜效果,图片比较大,因为需要精细的图片去凸显放大的效果,请耐心 可以通过滑轮控制放大倍数,由于图片太大 如果放大镜没有出现 可刷新一下网页

  2. 原生js实现放大镜效果

    今天做任务的时候,有一个任务就是让实现电商网站常用的放大镜效果,类似于这样的效果,之前并没有做过这种放大镜效果,刚开始的思路是对图片进行裁剪,但是后来发现实在是难以实现,于是求助了万能的谷歌,发现一个 ...

  3. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  4. js之放大镜效果

      HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. js实现放大镜效果

    原理: 鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置: 放大镜的移动方向和大图片的移动方向:横向和纵向都是相反,才可以保证同步: 需要元素:大图和小图,存放大图和小图的容器 ...

  6. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

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

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

  8. javascript放大镜效果

    JS实现放大镜效果 首先我们先设想一下放大镜效果 1.当鼠标进入小盒子的时候,把大图片显示出来 2.当指定移动区域的时候,显示当前放大区域(放大效果) 3.鼠标移除我们让它消失 一.实现页面布局HTM ...

  9. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

随机推荐

  1. Silverlight 应用程序中未处理的错误

    Silverlight 开发中遇到个错误: SCRIPT5022: Silverlight 应用程序中未处理的错误 代码: 2108 类别: InitializeError 消息: 无法下载初始屏幕或 ...

  2. 第一个WPF

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. sublime 3 删除当前行

    sublime 3 删除当前行 sublime 默认的是 “ctrl+shift+k” ,然而当你点击时,会出现希腊字母的软键盘,与windows默认快捷键有冲突 不用急 不用慌 这时打开: “Pre ...

  4. js call 和 apply

    前言 call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向. call 和 apply二者的作用完全一样,只是接 ...

  5. 如何使iframe外部的超级链接的页面在iframe中打开

    如何使iframe外部的超级链接的页面在iframe中打开,有以下两种方法: 一.html方法: <iframe name="a1"></iframe> & ...

  6. 你必须要知道的几个CSS技巧

    有些经典的CSS技巧,我们还是需要记住的,这样可以节省我们大量的时间,下面零度就为大家推荐几个比较好的CSS技巧: 1.在不同页面上使用同样的导航代码 许多网页上都有导航菜单,当进入某页时,菜单上相应 ...

  7. mvc表单Form提交 --实体

    1.方式1:字段加验证 @model MvcWeb.Models.UserInfo @{ ViewBag.Title = "Add"; } <h2>Add</h2 ...

  8. 2017国家集训队作业[agc016e]Poor Turkey

    2017国家集训队作业[agc016e]Poor Turkey 题意: 一开始有\(N\)只鸡是活着的,有\(M\)个时刻,每个时刻有两个数\(X_i,Y_i\),表示在第\(i\)个时刻在\(X_i ...

  9. VMware Vsphere 6.0安装部署 总体部署架构

    (一)总体部署架构 本教程用于学习目的,力求详尽的介绍安装部署过程和各组件之间的关系,部署过程从最简单的模型开始,系列文章按时间顺序依次展开,每篇介绍一个组件. 开始阶段,按照一台物理服务器,部署所有 ...

  10. Java中JVM虚拟机详解

    1. 什么是JVM? JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来 ...