完整例子的html，直接打开可看到效果

<!DOCTYPE html>
<html>
<head><title>bootstrap 图片查看</title>
<!--  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">--><link href="https://cdn.bootcss.com/bootstrap/3.4.1/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="E:\idea_workspace\\images\01944d5cd14772a801208f8be3cb63.jpg@1280w_1l_2o_100sh.jpg"         onclick="javascript:showimage('E:\\idea_workspace\\images\\01944d5cd14772a801208f8be3cb63.jpg@1280w_1l_2o_100sh.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/jquery/1.12.4/jquery.min.js"></script>
<!--<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<script src="https://cdn.bootcss.com/bootstrap/3.4.1/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>

项目中通过img的src和js动态设置img，动态设置点击事件传递参数

定义img

<img id="guideImageNameMd5DivImg" class="col-sm-8 img-responsive"onmouseover="this.style.cursor='pointer';this.style.cursor='hand'"onmouseout="this.style.cursor='default'"src=""onclick="javascript:showimage(this.src);"/>

设置路径的方法

function setGuideImage(path){var guideImageNameMd5DivImg = $('#guideImageNameMd5DivImg');     guideImageNameMd5DivImg.attr('src','file://'+path+'');
}

html,bootstrap,js，jquery图片点击模态窗口放大图片，可以滚动常看长图相关推荐

微信浏览器返回刷新，监听微信浏览器返回事件，网页防复制，移动端禁止图片长按和vivo手机点击img标签放大图片
以下代码都经过iphone7,华为MT7 ,谷歌浏览器,微信开发者工具,PC端微信验证.如有bug,还请在评论区留言. demo链接:https://pan.baidu.com/s/1c35mbjM ...
微信html 全屏显示,关于微信上网页图片点击全屏放大效果
实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来.这个代码在网上搜一下,挺多类似的. 先上代码. 调用微信图片浏览器的函数 functio ...
h5点击图片自动放大_关于微信上网页图片点击全屏放大效果
实现微信上网页的图片点击后全屏还可以可以缩放,这个功能是别人做的,可是捏点击后屏幕直接黑屏了,图片没有显示出来.这个代码在网上搜一下,挺多类似的. 先上代码. function arrayToJson ...
android 图片点击一下就放大到全屏,再点一下就回到原界面
/*android 图片点击一下就放大到全屏,再点一下就回到原界面 */ public class MainActivity extends Activity { /** Called when th ...
js源生实现图片点击弹出放大效果
参考https://blog.csdn.net/qq_36375934/article/details/78952485 的弹出框查看大图,同时总结自己遇到的问题,做个笔记 HTML代码 <!D ...
vue列表左右箭头滑动_vue.js+elementUI实现点击左右箭头切换头像功能（类似轮播图效果）...
1.效果图如下 2.vue代码如下 indicator-position="none" :autoplay="false"> > {{items.b ...
word转pdf图片模糊怎么办_迅捷PDF转换器如何将word转为长图？word转图片方法
在日常工作中,我们基本都用word来编辑文档,编辑完成,如果将它保存为其他格式,那可能会出现跑版的情况.为了解决这一问题,我们可以用迅捷PDF转换器将word转长图,这样也方便在手机上阅读.只是很多人 ...
公众号滑动图代码_公众号怎么制作图片滑动的效果？怎么做可以上下滑动的长图？...
微信公众号图片怎么制作呢?图片太多又该怎么排版呢?接下来就和小编一起看看,怎么使用壹伴助手这款公众号编辑器,来实现公众号图片的排版吧~ 怎么使用公众号制作多图滑动的效果在公众号文章中,如果插入的图片 ...
Linux 图片扩大软件,想要放大图片又担心图片会变得模糊不看？让这款无损放大软件来帮你...
如果在网站上看到一张非常喜欢的图片可是太小怎么办?这款Bigjpg图片放大器就能满足您的需要.(支持Windows.macOS.Android.Linux/iOS可使用网页版) 这是一款功能强大的图片 ...

html,bootstrap,js，jquery图片点击模态窗口放大图片，可以滚动常看长图

完整例子的html，直接打开可看到效果

项目中通过img的src和js动态设置img，动态设置点击事件传递参数

定义img

设置路径的方法

html,bootstrap,js，jquery图片点击模态窗口放大图片，可以滚动常看长图相关推荐

最新文章

热门文章