jQuery 图片放大镜

豆皮没有豆

于 2020-08-25 10:20:28 发布

阅读量264

点赞数 1

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_43434300/article/details/108215059

版权

JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

源码HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>jQuery放大镜</title>	
    	<style>
    		#small #mark{
			    width: 100px;
			    height: 100px;
			    background-color: white;
			    opacity: 0.5;
			    position: absolute;
			    /* float: left; */
			    left: 0;
			    top: 0;
			    /* z-index: 99; */
			}
			#big{
			    width: 400px;
			    height: 365px;
			    border: 1px solid #000;
			    position: absolute;
			    left: 400px;
			    top: 150px;
			    overflow: hidden;
			}
			#big img{
			    width: 750px;
			    height: 1095px;
			    position: absolute;
			}
			#small{
	            width: 250px;
	            height: 365px;
	            margin: 70px auto;
	        }
	        #small img{
	            width: 100%;
	            height: 100%;
	        }
    	</style>
	</head>
	<body>
		<h3 style="margin: 50px auto; text-align: center;">jQuery放大镜</h3>
	    <div id="small" style="width: 250px; height: 365px;">
	        <img src="img/1.jpg">     
	    </div>
	</body>
	<script type="text/javascript" src="js/jquery.js" ></script>
	<script type="text/javascript" src="js/jQuery-imgzoom.js" ></script>
	<script>
        $("#small").imgzoom({times:"1"})
    </script>
</html>

jQuery-imgzoom.js代码：

// 立即执行函数闭包
(function($){
    // 倍数，times  想放大的倍数
    // id,对应的id 
    $.fn.imgzoom=function(o){
        var e =this;
        // 找到图片
        img=$(this).find("img").eq(0),
        s={
            width:"100px",
            height:"100px",
            backgroundColor: "white",
            opacity: "0.5",
            left:"0",
            top:"0"
        };
        // console.log(img)
        o && $.extend(!0,s,o)
        // console.log(s.times)
        s.times== null ? s.times=3:null
        s.id==null ? s.id="#small":null
        if(s.times<=1){
            s.times=1.5
        }else{
            s.times=s.times
        }
        // 设置进入
        $(this).hover(function(){
            mark=$("<div id='mark'></div>"),
            big=$("<div id='big'>"),
            src=img.attr("src"),
            // console.log(src[1])
            bigImg=$("<img src="+src+" />")
            // console.log(bigImg)
            $(e).append(mark),
            $(big).append(bigImg),
            $(e).after(big)

            w=$(s.id).width()
            h=$(s.id).height()

            $("#big").css({
                width:100*s.times+"px",
                height:100*s.times-5+"px"
            })
            // console.log(w)
            $("#big img").css({
                width:w*s.times+"px",
                height:h*s.times+"px"
            })
            // console.log(365/s.times*(s.times-1))
            $(e).off("mousemove"),
            $(e).on("mousemove",function(o){
                var i=o || window.event;
                // console.log(i)
                mark=$(e).find("#mark");
                l=o.pageX-$(this).offset().left-50;
                t=o.pageY-$(this).offset().top-50;
                // console.log(l)
                l <= 0 && (l=0);
                l >= 150 && (l=150);
                t <= 0 && (t=0);
                t >= 265 && (t=265); 
                mark.css({
                    left:l,
                    top:t
                })
                $("#big img").css({
                    left:-(s.times)*l,
                    top:-(s.times)*t
                })
                // console.log(s.times)

            })
        },
        function(){
            // 移除 
            $(e).find("#mark").remove(),
            $("#big").remove()
        }) 
    }
})(jQuery);

图片一张img文件夹下1.jpg，jQuery.js版本1.0以上

效果图：