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

时间:2018-9-30 来源:本站原创 作者:岳泽以

今天晚上刚好放了国庆假期,也发现好久没有摆弄博客了,就摆弄在文章页面添加了个打赏提示,确实,泽以最近的日子真心不好过了,做工作室倒闭,免费主机供应不起暂停,自助下单平台(dsw)备案掉了也暂停了,流量卡因为供应商的问题也暂停运营了,真的是越来越穷了,也老大不小了,搞的一天也没有心思瞎折腾了,所以希望有一点点充裕的小伙伴可以打赏泽以两包烟抽抽,另外在这里感谢下博客家园对泽以云服务器的支持:博客家园 大家可以去看看博客家园,对很多的云供应商进行推荐,并且会有及时的云服务活动分享!

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; /* 字体大小 */}>" >
<div id="img" style="display:none"><img
src="https://ws3.sinaimg.cn/large/005BYqpggy1fvrxveoph3j30jp0qoahi.jpg
"></img></div>
<script>
var img=document.getElementById('img');
function show(){
if(img.style.display=='none'){
img.style.display='';
}else{
img.style.display='none';
}
}
</script>

代码预览效果图

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

<img id="hutia" src="https://ws3.sinaimg.cn/large/005BYqpggy1fvrxveoph3j30jp0qoahi.jpg"/>
<input type="button" value="点击打赏" onclick="obj=document.getElementById('hutia');obj.style.display=obj.style.display=='none'?'':'none'"/>

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

喔对!祝大家国庆快乐,中华人民共和国万岁!