本文目录一览：
- 1、我想把一个图片代码写到js了里面，然后调用这个js，就可以直接显示图片在网页上，怎么写？
- 2、javascript点击查看图片，弹框显示图片，怎么用js怎么实现？
- 3、怎么把获取到的图片显示出来，js怎么写
- 4、如何用JS实现，单击图片，在新的页显示图片
- 5、在html中怎么用js实现鼠标指向图片时图片放大的效果？（具体实现）
- 6、怎样让h5的图片在下面显示出来
我想把一个图片代码写到js了里面，然后调用这个js，就可以直接显示图片在网页上，怎么写？
这个实现一般有两用方式
1.用js定义一个字符串变量，把图片的字符串写进去，然后div.innerhtml把这个字符串加进去。
2.用类似jquery的js插件，也是先定义图片字符串变量，然后div.append这个字符串就好了。
javascript点击查看图片，弹框显示图片，怎么用js怎么实现？
最好用插件，去layer官网有专门的点击图片，弹出浏览还支持多个图片。
先去官网下载layer包，你的网页引用layer的js文件。
地址：网页链接 点击相册层
然后js代码：
//调用示例
layer.ready(function(){ //为了layer.ext.js加载完毕再执行
var ps=$(“#psize”).val();
layer.photos({
photos: ‘#layer-photos-demo’
,shift: ps //0-6的选择，指定弹出图片动画类型，默认随机
});
});
html代码：
div id=”layer-photos-demo” class=”layer-photos-demo”
img layer-pid=”图片id，可以不写” layer-src=”缩略图片地址” src=”图片地址” alt=”” style=”height: 140px;width: 120px;border:1px solid #bbb;”
/div
怎么把获取到的图片显示出来，js怎么写
很显然从后端返回的是一个图片路径，那么你要做的就是把这个路径塞进img的src里面，如：img src=”路径”/
实现步骤：1.先在html里面定义一个img标签img src=””/
2.一般情况下图片地址是一个变量，也就是说首先将后端返回的地址保存在一个变量中，如：var imgsrc = res.data.otherImg;(根据接口实际情况获取，我这里只是举例)
2.通过js把地址塞进img里面，如： $(‘img’).attr(‘src’, imgsrc);
这样就能把图片渲染出来了。
如何用JS实现，单击图片，在新的页显示图片
img src=”” onclick=”window.open(this.src,’_blank’)”/
onclick 点击图片事件
window.open(”,”) 打开一个新网页 第一个参数是网址 第二个是打开方式
window.open(this.src,’_blank’) 以该图片的路径为网址，以新页的方式打开
在html中怎么用js实现鼠标指向图片时图片放大的效果？（具体实现）
分别写一个onmouseover和onmouseout事件。然后在事件里面加一个function，分别写想要放大的尺寸和缩小或复原的尺寸。
具体代码实现如下：
img id=”img” onmouseover=”bigger()” onmouseout=”smaller()” src=”你的图片路径” style=”width:100px;height:100px;” /
script type=”text/javascript”
var img = document.getElementById(‘img’);
function bigger(){
img.style.width = ‘400px’;
img.style.height = ‘400px’;
}
function smaller(){
img.style.width = ‘100px’;
img.style.height = ‘100px’;
}
/script
扩展资料：
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
参考资料：
JavaScript官方API接口-GlobalEventHandlers.onmouseover
JavaScript官方API接口-GlobalEventHandlers.onmouseout
W3cSchool-JavaScript 事件参考手册
怎样让h5的图片在下面显示出来
1、首先在test.html文件内，在p标签，使用img标签创建一个图片，并设置图片的id为myimg，主要用于下面通过该id获得img对象，在test.html文件内，设置img标签的css样式，将display设置为none，从而实现图片隐藏不显示。
2、其次在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行disimg（）函数，在js标签中，创建disimg（）函数，在函数内，通过id（myimg）获得img对象，使用fadeIn（）方法让图片逐渐显示出来，例如，设置图片在5秒内逐渐显示出来。
3、最后在浏览器打开test.html文件，点击按钮，查看实现的效果。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/198229.html
微信扫一扫 
支付宝扫一扫 