jQuery万能放大镜插件（普通矩形放大镜）

插件链接：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万能放大镜插件（普通矩形放大镜）

最新文章

热门文章