Velocity.js初識_ZenDei技術網路在線

Velocity.js初識

-Advertisement-

Velocity.js官網：http://julian.com/research/velocity/ 相容IE8和Android2.3 Velocity.js基本用法效果圖： CSS .box{ width:100px; height:100px; background-color:pink; }

Velocity.js官網：http://julian.com/research/velocity/

相容IE8和Android2.3

Velocity.js基本用法

效果圖：

CSS

.box{
    width:100px;
    height:100px;
    background-color:pink;      
}

(function($){
    $('#div1').velocity({
        width: '300px',
        height: '300px'
    },{
        duration:3000　　//動畫的時長
    });
})(jQuery);

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf8 />
        <title>velocity基本用法</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/velocity.min.js"></script>
        <script type="text/javascript" src="js/velocity.ui.min.js"></script>
        
    </head>
    <body>
        <div id="div1" class="box"></div>
        <script type="text/javascript" src="js/script1.js"></script>
    </body>
</html>

製作動畫序列的三種方法

效果圖：

CSS

.box{
    width:100px;
    height:100px;
    background-color:pink;      
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf8 />
        <title>製作序列動畫</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/velocity.min.js"></script>
        <script type="text/javascript" src="js/velocity.ui.min.js"></script>
        
    </head>
    <body>
        <div id="div1" class="box"></div>
        <div id="div2" class="box"></div>
        <script type="text/javascript" src="js/script1.js"></script>
    </body>
</html>

方法一：

(function($){
   $('#div1').velocity({
        width: '300px'
    },{
        duration:3000
    });
    $('#div2').velocity({
         width: '300px'
    },{
         duration:3000,
         delay:3000　　　　//動畫的延遲時間
    });

    $('#div3').velocity({
         width: '300px'
    },{
         duration:3000,
         delay:6000
    });

})(jQuery);

方法二：

(function($){
   $('#div1').velocity({
     width:'300px'
    },{
     duration:3000,
     complete:function(){
         $('#div2').velocity({
             width:'300px'
         },{
             duration:3000,
             complete:function(){
                 $('#div3').velocity({
                     width:'300px'
                 },{
                     duration:3000
                 });
             }
         });
     }
    });
})(jQuery);

方法三：

(function($){
   var seq = [
   {
    elements:$('#div1'),
    properties:{width:'300px'},
    options:{duration:3000}
   },
   {
    elements:$('#div2'),
    properties:{width:'300px'},
    options:{duration:3000}
   },
   {
    elements:$('#div3'),
    properties:{width:'300px'},
    options:{duration:3000}
   }
   ];
   $.Velocity.RunSequence(seq);
})(jQuery);

效果圖：

預定義動畫

(function($){
    $('#div1').on('mouseover',function(){
        $(this).velocity('callout.shake');
    });
})(jQuery);

//callout.shake:Velocity預定義動畫

更多預定義方法：http://julian.com/research/velocity/

效果圖：

自定義動畫

(function($){
    $.Velocity.RegisterUI('HS.pulse',{ //用RegisterUI這個函數定義一個動畫(也可用RegisterEffect來定義，效果一樣)
        defaultDuration:3000,     //動畫時間
        calls:[
            [{scaleX:1.5},0.5], //scaleX：動畫在X軸的比例變化
            [{scaleX:1.0},0.5]  //0.5是動畫時間所占用的百分比
        ]
    });
    $('#div2').on('mouseover',function(){
        $(this).velocity('HS.pulse');
    });
})(jQuery);

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

web項目缺少Web組件才能與Visual Studio一起運行帶有Razor語法的Asp.net Web pages 3.0.0.0 （vs2012為例）

有的時候打開下載的別人的項目時，會出現如下圖的提醒：將Web.config中“<add key="webpages:Version" value="3.0.0.0" />”修改為“<add key="webpages:Version" value="4.0.0.0" />” 效果如下圖：修改前：
NuGet套件還原步驟（以vs2012為例）

下載別人的範例，出現由於Nuget套件不存在而無法啟動時：效果如下圖：步驟如下： 1.點擊項目-》啟用NuGet程式包還原 2.點擊下圖中的是 3.點擊下圖中的確定 4.效果如圖： . 5.右擊引用-》點擊管理NuGet程式包 6.點擊左上角的 “還原” 7.效果如下圖：
Java Ioc詳解和實現

作者：竹竿這章我們講Java Spring的Ioc控制反轉， DI依賴註入。閱讀此文之前，必須深入理解Java反射原理。 1、 Ioc控制反轉原來類對象實例的創建都是有程式員自己通過new進行的。控制反轉之後，我們把創建對象的功能交給Spring，到時候我們直接用就可以了。 2、 DI註入 c
tomcat中的JSP引擎

jsp文件解析成class文件過程需要利用tomcat的jasper組件。 Jasper是tomcat中使用的JSP引擎，在Tomcat 6中使用的是Jasper 2，相對於原來的版本作了不少的改進，比如：JSP的標簽緩衝池、後臺編譯、頁面改變時自動重新編譯、Eclipse中JDT編譯等等。簡單的
【設計模式】4、原型模式

代碼示例： 1 package com.shejimoshi.create.Prototype; 2 3 4 /** 5 * 功能：用原型實例指定創建對象的種類，並且通過拷貝這些原型創建新的對象 6 * 適用：當一個系統應該獨立於她得產品創建、構成和表示時，要使用Prototype模式 7 * 實例
瞭解HTML 盒模型

HTML在佈局上, 有一個非常重要的模型, 那就是盒子模型, 在盒子模型中把標簽內容理解為一個物品, 而css樣式理解為包容著這個物品的盒子, 一般的塊級標簽都具有盒子模型的特征, 你可以在css中對這個盒子進行設置, 以達到自己佈局的目的, 我這裡繪製了個簡圖, 只寫了內填充和外邊距, 因為我感覺
javascript中的with關鍵字

說起js中的with關鍵字，很多小伙伴們的第一印象可能就是with關鍵字的作用在於改變作用域，然後最關鍵的一點是不推薦使用with關鍵字。聽到不推薦with關鍵字後，我們很多人都會忽略掉with關鍵字，認為不要去管它用它就可以了。但是有時候，我們在看一些代碼或者面試題的時候，其中會有with關鍵字的...
一道常被人輕視的前端JS面試題

前言年前剛剛離職了，分享下我曾經出過的一道面試題，此題是我出的一套前端面試題中的最後一題，用來考核面試者的JavaScript的綜合能力，很可惜到目前為止的將近兩年中，幾乎沒有人能夠完全答對，並非多難只是因為大多面試者過於輕視他。題目如下： function Foo() { getName =