论坛 › 动画音画 › 点击按钮 —使元素隐藏或再现

亚伦影音工作室 发表于 2024-12-20 11:14

点击按钮 —使元素隐藏或再现

本帖最后由 亚伦影音工作室 于 2024-12-21 02:07 编辑 <br /><br /><style>
#world{width:100px;height: 100px;position:relative ;font:normal 2em/4em 华文隶书;cursor: pointer;color: #000; text-align: center;}
.hide{display: none;}
#pic{position:relative ;
      top:40px; left:80px;background:#800 url('https://pic.imgdb.cn/item/66a34f6ed9c307b7e9581634.jpg')no-repeat -310px 0/cover;
      width: 380px; border-radius: 50%;
      height: 380px;animation:fadenum 0s 1;}
@keyframes fadenum{ 0%{opacity: 0;}100%{opacity: 1;}
}

</style>

<divonclick="fn()"   id="world">隐藏</div>
<div id="pic"></div>
<script>
function fn(){
                        var img=document.getElementById("pic");

                        if(document.getElementById("world").innerHTML=="隐藏"){
                                pic.className="hide";
                                document.getElementById("world").innerHTML="显示";
                        }else{
                                pic.className="";
                                document.getElementById("world").innerHTML="隐藏";
                        }
                }
        </script>

杨帆 发表于 2024-12-20 13:15

真奇妙，谢谢亚伦老师精彩分享{:4_191:}

快乐布衣 发表于 2024-12-20 15:46

点了没有反应

快乐布衣 发表于 2024-12-20 15:52

点击”隐藏"没有反应啊，现在的浏览器不支持swf了，如果支持，做这样的效果很轻松：点击按钮跳转到第一帧，再点击跳转到第二帧，在第1帧和第2帧之间切换。

快乐布衣 发表于 2024-12-20 16:52

现在点击有反应了

红影 发表于 2024-12-20 19:31

点击很快就隐藏了，再现还是缓缓出现的呢。
欣赏亚伦老师带来的效果{:4_187:}

起个网名好难 发表于 2024-12-20 20:36

本帖最后由 起个网名好难 于 2024-12-20 20:41 编辑 <br /><br /><!-- style>
@keyframes fadeIn   {from{opacity:0;} to {opacity:1;}}
@keyframes fadeOut{from{opacity:1;} to {opacity:0;}}
#tp {width:300px;animation-duration:3s;animation-timing-function:ease-in-out;}
</style>

<input type='button' id='ctrl' value='隐藏' style="font-size:24px;cursor:pointer;" />
<img src="https://cccimg.com/view.php/8db5386dd67fa4577a9a6431fc4f6606.png" id="tp" />
<script>
ctrl.onclick = () => {
    ctrl.value == '隐藏'
      ? (ctrl.value = '显示',tp.style.animationName = 'fadeOut',tp.style.visibility = 'hidden')
      : (ctrl.value = '隐藏',tp.style.animationName = 'fadeIn', tp.style.visibility = 'visible');
}
</script -->

查看完整版本: 点击按钮 —使元素隐藏或再现