jquery点击图片放大

jquery点击图片放大

相信大家都在一些文章看到一些文章中的图片点击可以放大样子! 也想在自己的网站加同样的效果! 下面我教大家~ 

先上代码:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="http://www.jq22.com/jquery/jquery-1.9.1.js"></script>
</head>
<body>

<div class="aa">
	<img src="timg.jpg">
</div>


<!--图片放大后的div 开始  这块粘贴在你的html中最后body前 -->
<div id="outerdiv" style="text-align: center;position: fixed;z-index: 9999;top: 0;left: 0;
    width: 100%;height: 100%;background-color: rgba(28,28,28,0.9);">
    <img id="bigimg" style="max-height: 800px;max-width: 100%;border: 0; 
        margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;" src="" />
</div> 
<!--图片放大后的div 结束 这块粘贴在你的html中最后body前-->

<!--js开始 是放大点击的触发事件 这块粘贴在你的html中最后body前 需要依赖jquery-->
<script type="text/javascript"> 
    //图片放大  
    $("#outerdiv").hide();
    $(function(){  
		$("img").mouseover(function(){
			$(this).css("cursor","pointer");
		});

		$("img").click(function(){  
			var _this = $(this);//将当前的pimg元素作为_this传入函数    
			imgShow("#outerdiv", "#bigimg", _this);    
		});     
    });    

    function imgShow(outerdiv, bigimg, _this){  
        var src = _this.attr("src");//获取当前点击的pimg元素中的src属性    
        $('#outerdiv').attr('display','block');  
        $(bigimg).attr("src", src);//设置#bigimg元素的src属性    
         $(outerdiv).fadeIn("fast");  
    }
    $(outerdiv).click(function(){//再次点击淡出消失弹出层    
        $(this).fadeOut("fast");    
    });    
</script>  
<!--js开始 是放大点击的触发事件 这块粘贴在你的html中最后body前 需要依赖jquery-->
</body>
</html>

效果:

微信截图_20180928140848.png

看懂了吗?大体意思就是 先放个隐藏的div在点击时候把图片传到div中并显示div就实现了放大效果了!再次点击就取消放大了! 

好了 今天的点击图片放大就到这里了!  你学会了点击图片放大效果了吗?如有不懂可以留言哦~ 

jquery点击图片放大

喜欢(2)

评论 抢沙发

表情