将弹性效果添加到图像的一部分。 [英] Add Bouncy effect to part of a image.

问题描述

我正在尝试用css和javascript编写一个网络版的iphone app wobble（http://www.chillifresh.com/）。



我试过HTML5画布，但性能问题非常糟糕。



现在尝试css关键帧和转换，但性能没有提高。因为我必须一次加载相同的图像超过200次，以通过操纵每个像素来提供这样的弹性效果。



还有其他更好的方法来做到这一点。

I am trying to code a web version of iphone app wobble(http://www.chillifresh.com/) in css and javascript.

I tried HTML5 canvas, but had very bad performance issue.

Now trying css keyframes and transitions, but no improvement in performance. Because I have to load same image more than 200 times at a time to give such bouncy effects by manipulating each pixel.

Is there any other better way to do this.

推荐答案

HTML代码：

HTML CODE:

<table>
<tr>
    <td><div id="bouncy1">Click here to bounce. Direction: Up</div></td>
    <td><div id="bouncy2">Click here to bounce. Direction: Left</div></td>
</tr>
<tr>
    <td><div id="bouncy3">Click here to bounce. Direction: Right</div></td>
    <td><div id="bouncy4">Click here to bounce. Direction: Down</div></td>
</tr>
</table>
<br/>
<input id="bounceAll" type="button" value="Click to Bounce All!"/>

样式表CSS代码：

The Stylesheet CSS Code:

div {
    padding:5px;
    width:150px;
    height:100px;
    text-align:center;
}
#bouncy1 {
    background-color:#FFEE88;
}
#bouncy2 {
    background-color:#EE88FF;
}
#bouncy3 {
    background-color:#EE8888;
}
#bouncy4 {
    background-color:#88EEFF;
}

jQuery / JavaScript代码

The jQuery/JavaScript Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

另外复制在HTML中使用以下代码来提供最终的反弹效果。

Also copy following code in your HTML to give final bounce effect.

（function（）{



//添加单击DIV上的弹跳效果

(function(){

//Add bounce effect on Click of the DIV

（'＃bouncy1'）。单击（function（）{

('#bouncy1').click(function () {

这篇关于将弹性效果添加到图像的一部分。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！