Shake effect

Question

我希望点击一个特定的图像，它会“颤抖”片刻。

这是我的代码html：

<div class="larger" id="miniGallery">

<div class="row spacer buttons-central">
  <div class="col-xs-4 col-sm-4 col-md-4"><a href="#"><img src="img/1.png" class="img-thumbnail img-responsive center-block"></a></div>
  <div class="col-xs-4 col-sm-4 col-md-4"><a href="#"><img src="img/2.png" class="img-thumbnail img-responsive center-block"></a></div>
  <div class="col-xs-4 col-sm-4 col-md-4"><a href="#"><img src="img/3.png" class="img-thumbnail img-responsive center-block"></a></div>
</div>

<div class="row spacer buttons-central">
  <div class="col-xs-4 col-sm-4 col-md-4"><a href="#"><img src="img/4.png" class="img-thumbnail img-responsive center-block"></a></div>
  <div class="col-xs-4 col-sm-4 col-md-4"><a href="#"><img src="img/5.png" class="img-thumbnail img-responsive center-block"></a></div>
  <div class="col-xs-4 col-sm-4 col-md-4"><a href="#"><img src="img/6.png" class="img-thumbnail img-responsive center-block"></a></div>
</div>

</div>

有可能吗？如果是，则最大值将是单个jQuery函数，该函数适用于组miniGallery ID的每个图像;我该怎么办？

Answer 1

你可以试试

Shake effect

$("a img").click(function (e) {
    $(this).effect("shake");
    e.stopPropagation();
});

Demo Fiddle

Answer 2

您可以使用CSS3执行此操作：

示例：

HTML：

<div id="shake"> </div>

css：

@-webkit-keyframes shakeelement {
    0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
    10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
    30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
    40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
    50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
    60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
    70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
    80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
    90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}

#shake {
    width: 50px;
    height: 50px;
    border: 1px solid red;

}

#shake:ACTIVE
{
    -webkit-animation-name: shakeelement;
    -webkit-animation-duration: 200ms;
    -webkit-transform-origin:50% 50%;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: linear;
}

请在小提琴上查看此代码，以查看：http://jsfiddle.net/jCyD2/

此示例仅适用于webkit浏览器。

Answer 3

创建了一个快速功能http://jsfiddle.net/vZprf/1/

function tremble(el, speed, rotations) {
    var i = 4;
    var int = setInterval(function () {
        var isod = i % 2;
        var degree = Math.floor(Math.random() * 6) + 1
        if (isod) degree = degree * (-1);
        if (i == rotations) {
            i = 4;
            clearInterval(int);
            degree = 0;
        } else {

            i++;
        }
        el.css({
            '-webkit-transform': 'rotate(' + degree + 'deg)',
                '-moz-transform': 'rotate(' + degree + 'deg)',
                '-ms-transform': 'rotate(' + degree + 'deg)',
                '-o-transform': 'rotate(' + degree + 'deg)',
                'transform': 'rotate(' + degree + 'deg)',
                'zoom': 1
        });
    }, speed);
}

tremble($(el), 50, 40);

适合您的情况

$("img").click(function(){
    tremble($(this), 50, 40);
});

它像这样使用

    tremble(//element for rotating, //speed at which to rotate, //number of rotations);

jQuery - 在事件onClick上抖动图像

3 个答案:

Shake effect

Demo Fiddle