jQuery萬能放大鏡插件（普通矩形放大鏡）

時間 2019-12-02

標籤 jquery 萬能放大鏡插件普通矩形欄目 JQuery 简体版

原文原文鏈接

插件連接：http://files.cnblogs.com/files/whosMeya/magnifier.jsjavascript

1.在jquery下插入。css

2.格式：magnifier("須要插入的位置"，主圖寬,主圖高,"主圖路徑",遮罩層寬,遮罩層高,放大框寬)html

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

　　　　說明：1.須要插入的位置格式爲 jQuery中格式。如".box","#box","#box div"jquery

　　　　　　　2.寬高單位爲px。（如需其餘單位，在源碼中修改）。ide

插件源碼this

/**
 *放大鏡
 */
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();
    })
}

demo1url

<!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>

效果以下：spa

若須要點擊切換，在須要用到的位置直接調用。插件

如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>

效果以下：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。