插件链接：http://files.cnblogs.com/files/whosMeya/magnifier.js

1.在jquery下插入。

2.格式：magnifier("需要插入的位置"，主图宽,主图高,"主图路径",遮罩层宽,遮罩层高,放大框宽)

　　　　例如：magnifier(".box",400,400,"1.jpg",200,200,400)

　　　　说明：1.需要插入的位置 格式为 jQuery中格式。如".box","#box","#box div"

　　　　　　　2.宽高单位为px。（如需其他单位，在源码中修改）。

插件源码

/**

 *放大镜

 */

function magnifier(fatherName,MainWidth,MainHeight,img_src,SelectWidth,SelectHeight,BigBoxWidth){

    var bei = (BigBoxWidth/SelectWidth);

    /**

     * 创建主图盒子，添加主图

     */

    $(fatherName).html("<div class='magnifierMainBox'></div><div class='magnifierBigBox'></div>")

    $(".magnifierMainBox").css({

        "position":"relative",

        "width":MainWidth + "px",

        "height":MainHeight + "px",

        "border":"1px solid #eee",

        "box-size":"border-box"

    }).html("<img class='magnifierMainImg' src='"+img_src +"'/><div class='magnifierSelect'></div>");

    $(".magnifierMainImg").css({

        "width":"100%",

        "height":"100%"

    })

    /**

     * 创建主图遮罩层

     */

    $(".magnifierSelect").css({

        "display":"none",

        "position":"absolute",

        "width":SelectWidth + "px",

        "height":SelectHeight + "px",

        "background":"rgba(252,197,5,0.3)",

        "cursor":"move"

    });

    /**

     * 创建放大图盒子，放大图

     */

    $(".magnifierBigBox").css({

        "display":"none",

        "background":"url("+img_src+")",

        "width":BigBoxWidth + "px",

        "height":BigBoxWidth*SelectHeight/SelectWidth + "px",

        "border":"1px solid #eee",

        "overflow":"hidden",

        "position":"relative",

        "left":MainWidth+"px",

        "top":-MainHeight-2+"px",

        "box-size":"border-box",

        "z-index":"99",

        "background-size":MainWidth*bei+"px "+MainHeight*bei+"px"

    })

    /**

     * 移动

     */

    $(".magnifierMainBox").mouseenter(function(){

        $(".magnifierSelect").show();

        $(".magnifierBigBox").show();

    }).mousemove(function(e){

        var e=e || window.event;

        var _left = e.clientX + $("body").scrollLeft() - $(".magnifierMainBox").offset().left - SelectWidth/2;

        var _top = e.clientY + $("body").scrollTop() - $(".magnifierMainBox").offset().top - SelectHeight/2;

        if(_left<0){

            _left=0;

        }

        if(_left>MainWidth-SelectWidth){

            _left=MainWidth-SelectWidth;

        }

        if(_top<0){

            _top=0;

        }

        if(_top>MainHeight-SelectHeight){

            _top=MainHeight-SelectHeight;

        }

        $(".magnifierSelect").css({

            "left":_left + "px",

            "top":_top + "px"

        })

        $(".magnifierBigBox").css({

            "background-position":(-_left*bei)+"px "+(-_top*bei)+"px"

        })

    }).mouseleave(function(){

        $(".magnifierSelect").hide();

        $(".magnifierBigBox").hide();

    })

}

demo1

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        .box{

            height:400px;

            width:400px;

            margin-top:50px;

            margin-left:100px;

        }

    </style>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript" src="magnifier.js"></script>

</head>

<body>

<div class="box"></div>

</body>

<script type="text/javascript">

    magnifier(".box",400,400,"1.jpg",200,200,400)

</script>

</html>

效果如下：

若需要点击切换，在需要用到的位置直接调用。

如demo2

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript" src="magnifier.js"></script>

    <style type="text/css">

        .box{

            margin-left:100px;

            margin-top:50px;

            width:400px;

            height:800px;

            border:1px solid #444;

        }

        .boxtop{

            height:400px;

            width:100%;

        }

        .boxbottom img{

            height:50px;

            width:50px;

            margin-left:20px;

        }

    </style>

    <script type="text/javascript">

        $(function(){

            var kkk ="";

            $(".box").html("<div class='boxtop'></div><div class='boxbottom'></div>")

            for(var i=0;i<5;i++){

                kkk += "<img src='"+(i+1)+".jpg'/>"

            }

            magnifier(".boxtop",400,400,"1.jpg",200,200,500)  //调用

            $(".boxbottom").html(kkk);

            $(".boxbottom").children().click(function(){

                magnifier(".boxtop",400,400,$(this).index()+1+".jpg",200,200,500)//调用

            })

        })

    </script>

</head>

<body>

    <div class="box"></div>

</body>

</html>

效果如下：

jQuery万能放大镜插件（普通矩形放大镜）的更多相关文章

  1. jquery插件课程2 放大镜、多文件上传和在线编辑器插件如何使用

    jquery插件课程2 放大镜.多文件上传和在线编辑器插件如何使用 一.总结 一句话总结:插件使用真的还是比较简单的,引包,初始化,配置参数(json),配置数据(json),而后两步不是必须的.而且 ...

  2. jquery放大镜插件与样式

    这是放大镜插件链接,我已经上传到我博客http://files.cnblogs.com/valiant1882331/%E6%94%BE%E5%A4%A7%E9%95%9C%E6%8F%92%E4%B ...

  3. jQuery放大镜插件

    (function($) { $.fn.magnifier = function(options){ var options = $.extend({ bigWidth: 400, //大图高度 bi ...

  4. Jquery放大镜插件---imgzoom.js(原创)

    Jquery放大镜插件imgzoom能够实现图片放大的功能,便于与原图进行比较. 使用方法: 1.引入jQuery与imgzoom,imgzoom.css <link rel="sty ...

  5. jquery cloudzoom 3.0,magiczoom 放大镜插件 破解 移除版权信息

    jquery Cloud Zoom一款放大镜插件.但是无奈 官方下载的始终有版权信息,因此想到如下方法去掉版权信息,测试可行! 官方网址:http://www.starplugins.com/clou ...

  6. 非常强大的jQuery万能浮动框插件

    支持hover, click, focus以及无事件触发:支持多达12种位置的定位,出界自动调整:支持页面元素加载,Ajax加载,下拉列表,提示层效果,tip类效果等:可自定义装载容器:内置UI不错的 ...

  7. [vue插件]基于vue2.x的电商图片放大镜插件

    最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下.小白第一次分享,各位大神莫见笑. vue ...

  8. jquery的常用插件

    jquery的常用插件jquery的常用插件jquery的常用插件jquery的常用插件jquery的常用插件 放大镜: cloud-zoom(这个效果很炫) 图片查看: fancybox(灯箱) t ...

  9. 20 个具有惊艳效果的 jQuery 图像缩放插件

    jQuery相对与Flash的魔力已经贯穿整个网络.尽管,Flash层被认为是用于网页设计的首选,然而随着jQuery的出现,以及他的酷似Flash的交互式特效使得网页更加的优雅——Flash开始靠边 ...

随机推荐

  1. IP地址结构分类（包括主机号和网络好计算）

    IP地址:互联网上的每个接口的唯一标识. 长度:32bit. 五类不同的互联网地址格式: 各类IP地址范围: 点分十进制:32位的地址通常写成四个十进制数,其中每个整数对应一个字节. 主机号和网络的计 ...

  2. python3下应用requests

    模拟浏览器请求有两种,一种是不需要用户登录或者验证的请求,一种是需要用户登录或者验证的请求 那么我们先来说说不需要用户登录的方法 这种方式直接可以获取源码,用get的请求方式 登录的方式 获取这种页面 ...

  3. 吴裕雄--天生自然python学习笔记：Python3 输入和输出

    输出格式美化 Python两种输出值的方式: 表达式语句和 print() 函数. 第三种方式是使用文件对象的 write() 方法,标准输出文件可以用 sys.stdout 引用. 如果你希望输出的 ...

  4. POJ 2112 Optimal Milking 最短路 二分构图 网络流

    题意:有C头奶牛,K个挤奶站,每个挤奶器最多服务M头奶牛,奶牛和奶牛.奶牛和挤奶站.挤奶站和挤奶站之间都存在一定的距离.现在问满足所有的奶牛都能够被挤奶器服务到的情况下,行走距离的最远的奶牛的至少要走 ...

  5. zookeeper 客户端连接报： Will not attempt to authenticate using SASL

    解决方法:我在学习zk的时候,用客户端连接zk,发现接收不到watch通知,并且报 如图所示错误: 后查看服务没问题:图示 后查看防火墙状态,关闭防火墙 连接后正常: 如果查看防火墙状态是dead,s ...

  6. [人工智能]NumPy基础

    理解NumPy 本文主要介绍NumPy的基础知识,NumPy是一个功能强大的Python库,允许更高级的数据操作和数学计算. 什么是NumPy NumPy,来源自两个单词:Numerical和Pyth ...

  7. 查漏补缺：Linux进程与线程的区别

    1.概念的区别 进程:是具有独立功能的程序在一个数据集合上运行的过程,是系统进行资源分配的基本单位,也是调度运行的基本单位.一个进程中可以包含多个线程. 线程:是进程的一个实体,是CPU调度和分派的基 ...

  8. [JS奇怪的世界]No.55 危險小叮嚀：陣列與for in

    前言 前面已經瞭解了使用內建函數建構子的某些危險地方,但其實陣列與for in,也是有一些危險的地方. 陣列與for in 在前面幾個章節有講過陣列就是物件,所以我們一樣可以使用 for in來做處理 ...

  9. [ASP.NET Core 3框架揭秘] 服务承载系统[1]: 承载长时间运行的服务[上篇]

    借助.NET Core提供的承载(Hosting)系统,我们可以将任意一个或者多个长时间运行(Long-Running)的服务寄宿或者承载于托管进程中.ASP.NET Core应用仅仅是该承载系统的一 ...

  10. Vue-API之全局配置

    API 全局配置 Vue.config 是一个对象,包含 Vue 的全局配置. 源码位置:util/config.js 搜索config 可以找到其源码地址,其中声明了config的类型和默认参数 下 ...