bootstrap image viewer 图片放大查看

位置:首页>文章>详情   分类: 教程分享 > Java教程   阅读(13068)   2024-03-05 14:05:05

已封装成为插件欢迎使用及反馈

插件下载:(访问密码9987)
bootstrap-viewer.zip


bootstrap image viewer 图片放大查看

实现效果:

小图
小图

 

大图
大图

 

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

 

标签: bootstrap jquery
地址:https://www.leftso.com/article/479.html

相关阅读

已封装成为插件欢迎使用及反馈插件下载:(访问密码9987)bootstrap-viewer.zipbootstrap image viewer 图片放大查看实现效果:小图  大图  &lt;!D...
Jquery cookie插件实现点击获取验证码后60秒内禁止重新获取,可直接拿走用,jquery,验证码获取
bootstrap-table pageNumber无法获取值解决
bootstrap table插件使用说明demo
jQuery的$.ajax()使用及API文档,jQuery,ajax,$.ajax()
ie9 jquery ajax跨域问题解决, ajax ie9 跨域问题解决,jquery,ajax,ie9
jQuery之MD5加密插件使用及下载,网络中md5进行简单加密的地方越来越多。这里讲解一个jQuery的md5插件
bootstrap-select ajax动态添加值中遇到的IE兼容问题解决
jquery中的foreach(即each)数据的遍历或者处理HTML页面元素的遍历使用方法讲解
bootstrap table跨域问题完美解决