HTML代码实现点击图片显示/隐藏

2018-12-20 08:11:28 作者: 三岁小弟弟 浏览: 413

HTML网页实现点击图片显示/隐藏:

想要实现图片出现效果其实用js很好,而且会有图片弹窗,但是对于一些刚入行的小伙伴可能不是很明白,所以泽以给大家分享一个仅需要html代码就可以实现的图片显示与隐藏!

下面是代码

<input type="button" value="点击打赏" onclick="show();"
style="width: 150px; /* 宽度 */
height: 30px; /* 高度 */
border-width: 0px; /* 边框宽度 */
border-radius: 3px; /* 边框半径 */
background:#FFD700; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
font-size: 17px; /* 字体大小 */}>" >


var img=document.getElementById('img');
function show(){
if(img.style.display=='none'){
img.style.display='';
}else{
img.style.display='none';
}
}

代码预览效果图

以下代码示例点击按钮后,显示/隐藏图片:


PS:这两段代码适应于任何HTNL网页。



若无特殊注明,本文皆为《三岁小弟弟》原创,转载请保留文章出处。
转载注明:三岁资源网»HTML代码实现点击图片显示/隐藏
免责声明:本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
评论
本文作者 阅读排行 文章推荐

首页
最新
投稿
精选
我的