个人博客系统

环境:bootstrap v3.3.0

文章图片显示限制宽度最大为内容区宽度,上传几张分辨率大点的图片,显示的就不够清楚了,网上找了下jQuery的插件,弄了几个试了试不是特别满意,决定自己来实现这个功能,做个最简单的就行。

需求:点击文章内容里的图片,弹出并显示该图片预览,图片宽度如果小于当前浏览器可见宽度,则显示图片完整大小,如果大于浏览器可见宽度,则显示为浏览器可见宽度大小。还是直接截个图吧,下面这种效果:

20161014160527.png


用bootstrap的模态框来实现,

1、在body标签内添加一个modal

<div id="img-modal" class="modal fade">
  <div id="img-dialog" class="modal-dialog" style="width: 98%; height: 98%;text-align: center;">
    <div id="img-content" class="modal-content">
        <img id="img-zoom" src="" style="max-height: 100%; max-width: 100%;margin:10px;">
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

2、JS给内容区的图片添加点击事件,图片被点击后弹出modal来查看大图

    <script type="text/javascript">
	$(function() {
		
		//点击图片放大
		$("#img-zoom").click(function(){
			$('#img-modal').modal("hide");
		});
		$("#img-dialog").click(function(){
			$('#img-modal').modal("hide");
		});
		//index-list-content为显示文章内容div的class
		$(".index-list-content img").each(function(i){
			var src = $(this).attr("src");
			$(this).click(function () {
				$("#img-zoom").attr("src", src);
				var oImg = $(this);
				var img = new Image();
				img.src = $(oImg).attr("src");
				var realWidth = img.width;//真实的宽度
				var realHeight = img.height;//真实的高度
				var ww = $(window).width();//当前浏览器可视宽度
				var hh = $(window).height();//当前浏览器可视宽度
				$("#img-content").css({"top":0,"left":0,"height":"auto"});
				$("#img-zoom").css({"height":"auto"});
				if((realWidth+20)>ww){
					$("#img-content").css({"width":"100%"});
					$("#img-zoom").css({"width":"99%"});
				}else{
					$("#img-content").css({"width":realWidth+20, "height":realHeight+20});
					$("#img-zoom").css({"width":realWidth, "height":realHeight});
				}
				if((hh-realHeight-40)>0){
					$("#img-content").css({"top":(hh-realHeight-40)/2});
				}
				if((ww-realWidth-20)>0){
					$("#img-content").css({"left":(ww-realWidth-20)/2});
				}
				//console.log("realWidth:"+realWidth+" realHeight:"+realHeight+" ww:"+ww)
				$('#img-modal').modal();
			});
		});
	});
    </script>

这样就可以了,点击图片试试吧。

网站公告
这里是挨踢农民工的博客,欢迎光临,以上为一段测试信息。
生命在于折腾
博客分类
文章归档 更多
网站统计
当前在线人数:32
注册会员数:108
网站总浏览量:161876
文章总数:17
留言总数:9
评论总数:21
分类总数:6
友情链接总数:1