简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Wie erstelle ich Übergangseffekte mit js?
滿天的星座
滿天的星座 2017-06-26 10:54:58
0
6
891

Neuling ist mit js nicht sehr vertraut, also sagen Sie mir bitte, wenn ich js verwende, um auf eine Schaltfläche zu klicken, und p sich dann nach 5 Sekunden zu einer Position von 500 Pixeln auf der rechten Seite bewegt, was ist die Idee dahinter? Wirkung?

Sollten wir zuerst eine Klasse schreiben, um all diese Effekte zu erzielen, und dann js verwenden, um den Klassennamen zu ändern?

Aber im Click-Event alle CSS-Effekte schreiben? QUQ

滿天的星座
滿天的星座

Antworte allen(6)
Ty80
Ty802017-06-26 10:56:58 6 Etage 
<!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看完就会了，这也只是方法中的一种，方法还有很多！

Wie +0
Antwort hinzufügen
伊谢尔伦
伊谢尔伦2017-06-26 10:56:58 5 Etage

你要的是这样么？代码见下方， 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';
    };
})()
Wie +0
Antwort hinzufügen
女神的闺蜜爱上我
女神的闺蜜爱上我2017-06-26 10:56:58 4 Etage

可以用css，也可以直接用js写。css的话就用transition写，具体的百度，点击事件发生时为元素添加一个class，改变样式。js的话就用settimeout，以你说的左边距为例，一点一点改变左边距，到达指定值时停止即cleartimeout

Wie +0
Antwort hinzufügen
代言
代言2017-06-26 10:56:58 3 Etage

如楼上所说,如果是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)
}
Wie +0
Antwort hinzufügen
習慣沉默
習慣沉默2017-06-26 10:56:58 2 Etage

一般都是用css3的transition实现过渡效果，要动画的话用animation，使用js比较耗性能，这里有一些参考文章

Wie +0
Antwort hinzufügen
typecho
typecho2017-06-26 10:56:58 1 Etage

css3d属性

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！