本文目录一览:
- 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文件,点击按钮,查看实现的效果。