JSFiddle - React, Tailwind, and code Playground

by dtdxrk

HTML

<div id="box"><img src="http://www.baidu.com/img/baidu_sylogo1.gif" width="270" height="129"><br>点我试试</div>

CSS

*{margin:0;padding:0;}
#box{ border:1px solid #000;width: 300px; height: 200px; cursor: pointer;margin: 200px auto;}

JavaScript

document.getElementById("box").onclick = Shake;

function Shake(){
    var i = 20,
        that = this;

    var Timer = setTimeout(active,15);

    function active(){
        if(i>=0){
            that.style.padding = 0;
            i%2 == 0 ? that.style.paddingLeft = i + "px" : that.style.paddingRight = i + "px";
            i--;
            Timer = setTimeout(active,15);
        }else{
            clearTimeout(Timer);
        };
    };

}