js 点击图片放大

  <script type="text/javascript"> 
    //图片放大  
   // $("#outerdiv").hide();
    $(function(){  

    $("img").click(function(){  
       console.log($('#sr').attr('src'));
	     $('#bigimg').attr('src',$('#sr').attr('src'));
		   $("#outerdiv").css("display","block");  		
      }); 
 $(outerdiv).click(function(){//再次点击淡出消失弹出层    
        $(this).fadeOut("fast");    
    });    	  
    });    
   
   
   
</script>  
<div id="outerdiv" style=" display:none;text-align: center;position: fixed;z-index: 1000;top: 0;left: 0;
    width: 100%;height: 100%;background-color: rgba(255,255,255,.9);">
    <img id="bigimg" style="height: 60%;width: 60%;border: 0; 
        margin: auto;position: absolute;top: 0;bottom: 0;left: 0;right: 0;" src="" />
</div> 
 <img id="sr" src='./img/2.png' />

评论

刷新

友情链接