2022-03-15 发帖:
180 浏览
回帖 点赞 0 状态 还没有回复,赶紧去抢个沙发吧!
帖子详情

bootstrap图片放大功能如下:

小图

QQ截图20220315104441.png

点击后放大的效果图:

QQ截图20220315104529.png

话不多说直接上代码:

<!DOCTYPE html><html><head>
	<title>bootstrap 图片查看</title>
	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></head><body><td>
	<center>
		<img style="height: 100px;width: 100px;" 
		onmouseover="this.style.cursor='pointer';this.style.cursor='hand'" 
		onmouseout="this.style.cursor='default'"  		src="test.jpg" 
		onclick="javascript:showimage('./test.jpg');" />
	</center></td>
  		<!--放大图的imgModal-->
        <div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" >
          <div class="modal-dialog modal-lg" style="display: inline-block; width: auto;">
            <div class="modal-content">
             <img  id="imgInModalID"  			 class="carousel-inner img-responsive img-rounded" 
			 onclick="closeImageViewer()"
			 onmouseover="this.style.cursor='pointer';this.style.cursor='hand'" 
			 onmouseout="this.style.cursor='default'"  
			 />
            </div>
          </div>
        </div><script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script></body><script type="text/javascript">
	//显示大图    
   function showimage(source)
     {
         $("#imgModal").find("#imgInModalID").attr("src",source);
         $("#imgModal").modal();
     }	 //关闭
	function closeImageViewer(){
		$("#imgModal").modal('hide');
	}</script></html>


版权:言论仅代表个人观点,不代表官方立场。转载请注明出处:http://shubaijia.com/cmsjz/7.html

发表评论
0条评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:0:00-24:00

客服电话

1030712461

客服邮箱

1030712461

扫描二维码

关注微信公众号

扫描二维码

手机访问本站