简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - js做過渡效果是怎麼樣做的？
滿天的星座
滿天的星座 2017-06-26 10:54:58
0
6
900

小白對js不太熟悉，那麼請問，我如果js來做點擊按鈕，然後p經過5s移動到右邊500px的地方，這種效果的製作思路是啥？

是先寫好一個class，讓這些效果完全都達到了，然後用js來切換className麼？

但是在點擊事件裡面，把所有的css效果寫進去？ QUQ

滿天的星座
滿天的星座

全部回覆(6)
Ty80
Ty802017-06-26 10:56:58 6樓 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title>
<style> 
p
{
    width:100px;
    height:100px;
    background:red;
    transition:all 5s;
}

p:hover
{
    width:300px;
}
    #p1{
        position:relative;
        width:100px;
        height:100px;
    }
    #p2{
        position:absolute;
        width:100%;
        height:100%;
        background:#0f0;
    }
    #p2.p2{
        width:200%;
        height:200%;
    }
</style>
</head>
<body>
<input type='button' id='btn1'/>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>

<p></p>
    <p id='p1'>
        <p id='p2'></p>
    </p>
<p>鼠标移动到 p 元素上，查看过渡效果。</p>

</body>
    <script>
        window.onload=function(){
            var oBtn=document.getElementById("btn1"),op=document.getElementById("p2");
            oBtn.onclick=function(){
                op.className='p2';
            }
        }
        </script>
</html>

給你個簡單的demo看完就會了，這也只是方法中的一種，方法還有很多！

點贊 +0
新增回覆
伊谢尔伦
伊谢尔伦2017-06-26 10:56:58 5樓

你要的是這樣麼？程式碼見下方， p 5s移動到500px，可以先給p設定好transition效果，加個移動到右邊的class, js主要做的就是給元素加個class

ps: 只是demo程式碼，沒考慮相容等等情況…

css3

.demo{
    border:1px solid #fff;
    width:100px;
    height:50px;
    position:relative;
    left:0;
    transition: left 2s;
}
.run{

    left:500px;
}
<p class="demo">
      
</p>
(function(){
    document.getElementsByClassName('demo')[0].onclick = function(){
        this.className +=' run';
    };
})()
點贊 +0
新增回覆
女神的闺蜜爱上我
女神的闺蜜爱上我2017-06-26 10:56:58 4樓

可以用css，也可以直接用js寫。 css的話就用transition寫，具體的百度，點選事件發生時為元素加入一個class，改變樣式。 js的話就用settimeout，以你說的左邊距為例，一點一點改變左邊距，到達指定值時停止即cleartimeout

點贊 +0
新增回覆
代言
代言2017-06-26 10:56:58 3樓

如樓上所說,如果是ie9以下,需要使用定時器做

var ele = document.getElementsByClassName('demo')[0]
ele.onclick = function(){
    var btn = this;
    setInterval(function(){
        btn.style.left = parseInt(btn.style.left) + 1 + "px"
    },1)
}
點贊 +0
新增回覆
習慣沉默
習慣沉默2017-06-26 10:56:58 2樓

一般都是用css3的transition實現過渡效果，要動畫的話用animation，使用js比較耗性能，這裡有一些參考文章

點贊 +0
新增回覆
typecho
typecho2017-06-26 10:56:58 1樓

css3d屬性

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！