display实现淡入淡出过渡效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { position: relative; } input {/*按钮样式*/ cursor: pointer; border: none; outline: none; background: #34BC9D; color: #fff; height: 40px; } img { position: absolute; transition: 1s; left: 0; top: 100%; opacity: 0; cursor: pointer; display: none; } </style></head><body> <div> <input id="root" type="button" onclick="show()" value="点击显示图片"> <img id="img" src="http://www.qianduanzhan.com/zb_users/upload/2017/07/201707161500184837405094.png" alt=""> </div><script> var root = document.getElementById("root"); var img = document.getElementById("img"); function show(){ if(root.value === "点击显示图片"){ root.value = "点击隐藏图片"; /*设置setTimeout，让display先执行，opacity后执行*/ img.style.display = "block"; setTimeout(function () { img.style.opacity = 1; },.1); }else{ root.value = "点击显示图片"; img.style.opacity = 0; /*隐藏需要先执行opacity，再执行display，否则无效*/ setTimeout(function () { img.style.display = "none"; },900); } }</script></body></html>
随时随地看视频
热门评论
-
weixin_慕无忌15599592020-08-25 0
-
weixin_慕无忌15599592020-08-25 0
查看全部评论但是呢~我发现一个问题，第一次用的时候是无效的，一下子就蹦出来图片了，没有淡入淡出的效果，第二次就没这个问题了.... .... ....
真是个大哥啊~！！！！代码是能用，要是排一下排版就完美了，看起来糟心啊~~~~~~~~~~