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

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

  •  
  •   pinews · 268 天前 · 1776 次点击
    这是一个创建于 268 天前的主题,其中的信息可能已经有所发展或是发生改变。
    如何让每次点击都可以重新开始,现在只有第一次点击能动

    http://jsrun.net/S8XKp

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

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

    没啥好的建议,重新生成一个新的元素吧,或者不用 class,直接操作 style (
        6
    pinews   268 天前
    @davin 单数点击可以,双数是错的。
    @en20 可以了,谢谢,不过我把 5000 改成了 0,这样才好。
        7
    wunonglin   268 天前
    ```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')
    }
    ```
        8
    pinews   268 天前
    @azh7138m thank you 汇总的很好,javascript 克隆那个算比较简单的,谢谢
        9
    wunonglin   268 天前
        10
    pinews   268 天前
    @wunonglin 你这个和 @davin 是一样的
        11
    abc635073826   268 天前
    @keventseng 这的确是最清晰的方式,但肯定不是楼主要的高大上的方式
        12
    guomuzz   268 天前
    搞一个原地动的小人 然后 js 控制图片 position...
        13
    wizcas   266 天前 via Android
    requestAnimationFrame 手撸动画
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1806 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 39ms · UTC 16:41 · PVG 00:41 · LAX 08:41 · JFK 11:41
    ♥ Do have faith in what you're doing.