想问下老师,js中如何平滑过渡效果改变呢?

Original 2019-04-15 15:02:51 237
abstract:<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">      &
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div{width:200px;height:50px;background:#65bef9; margin: 0px auto;}
            p{text-align: center;}
            input{width: 70px; height: 30px; border:none; background: #ddd; color: #666;}
            input:hover{background: #ccc; }
        </style>
    </head>
    <body>
        <div id="box"></div>
        <p>
            <input type="button" value="宽度" onclick="boxWidth()">
            <input type="button" value="高度" onclick="boxHeight()">
            <input type="button" value="颜色" onclick="boxBgcolor()">
            <input type="button" value="重置" onclick="boxReset()">
            <input type="button" value="隐藏" onclick="boxHide()">
            <input type="button" value="显示" onclick="boxShow()">
        </p>
        <p>想问下老师,js中如何平滑过渡效果改变呢?</p>
        <script type="text/javascript">
            var box;
            window.onload=function (){
                box = document.getElementById("box");
            }
            function boxWidth(){
                box.style.width="500px";
            }
            function boxHeight(){
                box.style.height="500px";
            }
            function boxBgcolor(){
                box.style.background="#ffa200";
            }
            function boxReset(){
                box.style.width="200px";
                box.style.height="50px";
                box.style.background="#65bef9";
            }
            function boxHide(){
                box.style.display="none";
            }
            function boxShow(){
                box.style.display="block";
            }
        </script>
    </body>
</html>


Correcting teacher:查无此人Correction time:2019-04-16 09:41:21
Teacher's summary:什么叫平滑过渡效果? 不太明白,可以提个工单,在作业里的问题,回答后,你无法追问。

Release Notes

Popular Entries