V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
pinews
V2EX  ›  程序员

我设计一个会东的小人,请教如何让他点一次动一次?

  •  
  •   pinews · 2019-03-18 17:17:28 +08:00 · 2502 次点击
    这是一个创建于 1837 天前的主题,其中的信息可能已经有所发展或是发生改变。
    如何让每次点击都可以重新开始,现在只有第一次点击能动

    http://jsrun.net/S8XKp

    编辑模式 http://jsrun.net/S8XKp/edit
    13 条回复    2019-03-20 15:26:57 +08:00
    lllllliu
        1
    lllllliu  
       2019-03-18 17:26:48 +08:00
    没太懂,但是看了下。
    按照你的代码来的话,你可以每次先把那个 move 的样式去掉,然后再添加。。
    en20
        2
    en20  
       2019-03-18 17:31:22 +08:00
    这样??
    ```
    let div = document.querySelector("div")

    div.onclick = function() {
    div.className = "";
    setTimeout(() => {
    div.className = "move";
    },5000)
    ```
    davin
        3
    davin  
       2019-03-18 17:41:00 +08:00
    可以把 `document.querySelector("div").className = "move";` 换成 `this.classList.toggle('move');` 这句,让小人来回动
    keventseng
        4
    keventseng  
       2019-03-18 17:53:58 +08:00
    将 gif 导出多张帧图片,然后用点击事件轮换图片。
    azh7138m
        5
    azh7138m  
       2019-03-18 17:57:55 +08:00
    https://css-tricks.com/restart-css-animation/

    没啥好的建议,重新生成一个新的元素吧,或者不用 class,直接操作 style (
    pinews
        6
    pinews  
    OP
       2019-03-18 18:09:27 +08:00
    @davin 单数点击可以,双数是错的。
    @en20 可以了,谢谢,不过我把 5000 改成了 0,这样才好。
    wunonglin
        7
    wunonglin  
       2019-03-18 18:14:00 +08:00
    ```html
    <div>
    <img id='img' src=http://image.99114.com/upfile/pro/20071224/0935550505.gif>
    </div>
    ```

    ```css
    img {
    cursor: pointer;
    transition: all .4s ease;
    background-color: aquamarine;
    }
    img.move{
    transform: translateX(100%);
    }

    div {
    width: 100%;
    }

    ```

    ```js


    document.querySelector("#img").onclick = function() {
    document.querySelector("#img").classList.contains('move') ?
    document.querySelector("#img").classList.remove('move') :
    document.querySelector("#img").classList.add('move')
    }
    ```
    pinews
        8
    pinews  
    OP
       2019-03-18 18:15:56 +08:00
    @azh7138m thank you 汇总的很好,javascript 克隆那个算比较简单的,谢谢
    wunonglin
        9
    wunonglin  
       2019-03-18 18:16:54 +08:00
    pinews
        10
    pinews  
    OP
       2019-03-18 19:23:47 +08:00
    @wunonglin 你这个和 @davin 是一样的
    abc635073826
        11
    abc635073826  
       2019-03-18 19:32:11 +08:00
    @keventseng 这的确是最清晰的方式,但肯定不是楼主要的高大上的方式
    guomuzz
        12
    guomuzz  
       2019-03-18 19:34:25 +08:00
    搞一个原地动的小人 然后 js 控制图片 position...
    wizcas
        13
    wizcas  
       2019-03-20 15:26:57 +08:00 via Android
    requestAnimationFrame 手撸动画
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4958 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 09:49 · PVG 17:49 · LAX 02:49 · JFK 05:49
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.