v-html点击图片查看大图功能
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了v-html点击图片查看大图功能相关的知识，希望对你有一定的参考价值。
参考技术A 富文本编辑器中需支持图片点击放大功能，也可用这种方式实现原效果：
点击放大后的效果：
jQuery点击图片弹出大图遮罩层
使用jQuery插件HoverTreeShow弹出遮罩层显示大图
效果体验：
http://hovertree.com/texiao/hovertreeshow/
在 开发HoverTreeTop项目的产品展示功能过程中，因为要把产品图片的大图显示给用户看，就使用jQuery制作了一个插 件：HoverTreeShow ，使用该插件可以很方便的弹出图片的大图，已经运用在项目中了，除了上面链接的示例外，HoverTreeTop项目的产品展示也是一个实例，请访问链 接：http://hovertree.com/top/htpro/5dbcb599663b3397.htm
HoverTreeTop是一个ASP.NET开源项目，用于企业网站建设，里面也包含HoverTreeShow插件的源码，有需要的朋友可以下载源码：http://hovertree.com/h/bjaf/hv6cqe5n.htm
弹出层后，可以点击右上角的 X 按钮关闭，也可以双击页面关闭层。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>使用HoverTreeShow插件弹出图片大图层_何问起</title><base target="_blank" />
<meta charset="utf-8" />
<link href="http://hovertree.com/texiao/hovertreeshow/hovertreeshow.css" rel="stylesheet" />
<script src="http://down.hovertree.com/jquery/jquery-1.12.1.min.js"></script>
<style>#hovertreeshow{
width:400px;height :400px;overflow:scroll;margin:5px auto;}
#hovertreeshow img{max-height:100%;}
#headhovertree{margin:5px auto;width:400px;}a{color:blue;}
</style>
</head>
<body>
<div id="headhovertree"><h3>使用HoverTreeShow插件弹出图片大图层</h3>
请点击下方图片，将弹出遮罩层显示图片原图。<a href="http://hovertree.com/h/bjag/o46xlsnm.htm">说明</a> <a href="http://hovertree.com">首页</a></div>
<div id="hovertreeshow" class="hovertreeshow">
<img src=\'http://hovertree.com/hvtimg/bjafjd/hs6oi257.jpg\' /><img src=\'http://hovertree.com/hvtimg/bjafjd/070joeh7.jpg\' />
<img src="http://hovertree.com/hvtimg/201512/o9qashmi.gif" />
</div>
<div style="height:600px;width:100%"></div>
<script src="http://hovertree.com/texiao/hovertreeshow/hovertreeshow.js"></script>
</body>
</html>
以上是关于v-html点击图片查看大图功能的主要内容，如果未能解决你的问题，请参考以下文章