輕量級傾斜onClick/JS或CSS3

我試圖創建一個函數，其中#div將傾斜點擊左側15度，然後回到之前不久後的位置，但我認爲這可以很容易通過添加定時事件添加到解決方案。但是Tilt是我遇到的最大麻煩。理想情況下，我會單獨使用JavaScript來做到這一點。但是會對jQuery和/或CSS3開放。輕量級傾斜onClick/JS或CSS3

我在創建自定義動作時使用了下面的代碼片段。

jQuery.fn.shake = function() { 
    this.each(function(i) { 
     $(this).css({ "position" : "relative" }); 
     for (var x = 1; x <= 3; x++) { 
      $(this).animate({ left: -15 }, 10).animate({ left: 0 }, 50).animate({ left: 15 }, 10).animate({ left: 0 }, 20); 
     } 
    }); 
    return this; 
}

但它不允許;或者我沒有這樣的運氣 - 創造一個「傾斜」的效果，只有水平或垂直的副作用。我假設我可能需要在那裏獲得一些CSS3。任何指針？

免責聲明：我希望主要JavaScript的解決方案，因爲我支持IE 9+/Modern瀏覽器（chrome，ff，safari）。否則，在這一點上沒有實際意義。謝謝。

來源

2013-07-02 Fred Randall

傾斜？你的意思是旋轉？ – epascarello

您可以創建「傾斜」與transform：

.skew{ 
    -webkit-transform: matrix(1, 0, 0.5, 1, 50, 0); 
    -o-transform: matrix(1, 0, 0.5, 1, 50, 0); 
    -ms-transform: matrix(1, 0, 0.5, 1, 50, 0); 
    transform: matrix(1, 0, .5, 1, 50, 0); 
}

http://jsfiddle.net/HemTH/1/

雖然瀏覽器的兼容性可能是一個問題http://caniuse.com/#search=transforms

來源

2013-07-02 19:04:11

那麼根據鏈接，它說它支持在IE 9 +我要給這個鏡頭！ –

所以，我正在測試@詹姆斯蒙塔涅 - 但我注意到，你創造了相反的效果。我希望在點擊上發生「傾斜」，而不是簽證詩。 –

最初只需刪除課程。 http://jsfiddle.net/HemTH/2/我更傾向於展示傾向，而不是試圖發展整個事情。 –

-1

您必須使用Interval函數，而不是使用for-loop，限制爲3. 有幾種方法可以在JS中執行Interval函數，您可以使用setInterval（？，？）並傳遞函數名和間隔時間以毫秒爲單位應該做的伎倆

setInterval(localFunction, 100); // 1 second 
setInterval(globalFunction(), 200); // 2 seconds

嘗試jQuery: setInterval

來源

2013-07-02 18:49:50

jQuery有一個setInterval？ – epascarello

你可以通過調用'setInterval（）'創建傾斜效果？ – zeroflagL

它應該是window.setInterval（？，？） –

你可以用CSS3動畫做到這一點和javascript一撮：
CSS：

.rotate { 
    animation: rotate 10s; 
    -webkit-animation: rotate 5s; 
} 

@keyframes rotate { 
    0% { 
     transform: rotate(0deg); 
    } 
    50% { 
     transform: rotate(15deg); 
    } 
    100% { 
     transform: rotate(0deg); 
    } 
} 

@-webkit-keyframes rotate { 
    0% { 
     -webkit-transform: rotate(0deg); 
    } 
    50% { 
     -webkit-transform: rotate(15deg); 
    } 
    100% { 
     -webkit-transform: rotate(0deg); 
    } 
}

的Javascript：

function shake(item) { 
    item.className += "rotate"; 
}

來源

2013-07-02 18:57:57

我認爲這將是對CSS動畫的一個很好的候選人，因爲你可以很容易地定義你的關鍵幀：

#foo { 
    width: 50px; 
    height: 50px; 
    background-color: blue; 
    position: relative; 
    -webkit-animation: skewer .1s; 
} 
@-webkit-keyframes skewer { 
    0% { 
     left: -15px; 
     -webkit-transform: skewX(-15deg); 
    } 
    25% { 
     left: 0; 
     -webkit-transform: skewX(0deg); 
    } 
    55% { 
     left: 15px; 
     -webkit-transform: skewX(15deg); 
    } 
    100% { 
     left: 0px; 
     -webkit-transform: skewX(0deg); 
    } 
}

http://jsfiddle.net/VGGqT/

然而，.animate需要如果其第二個參數是對象，則返回step屬性：

$(this).animate({ left: -15 }, { 
    duration: 10, 
    step: function (now) { 
     $(this).css("-webkit-transform", "skewX(" + now + "deg)"); 
    } 
})

您將不得不爲每個動畫步驟執行此操作，因此它更加冗長。

來源

2013-07-02 18:58:33

這根本不適用於我;你的jSfiddle至少。不適用於Chrome或Firefox。我同意CSS3的想法，並感謝回覆。 –

@ 1977它應該只能在Chrome中工作，它對我有用，但我不確定你要去的是什麼 –

我正在尋求一種解決方案，以最少的現代瀏覽器支持;這就是爲什麼我最想使用JavaScript。 –

輕量級傾斜onClick/JS或CSS3

回答

相關問題