亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

ASP.NET jQuery 食譜21 (jQuery各種動畫基礎(chǔ)效

系統(tǒng) 1958 0

jQuery提供能很多實現(xiàn)頁面動畫效果的工具函數(shù),使用這些函數(shù),能更好的提高用戶體驗。

首先,我們來看下,jQuery給我們提供的一些基礎(chǔ)的動畫函數(shù):


? animate( properties, [ duration ], [ easing ], [ callback ] ): 執(zhí)行一個CSS屬性設(shè)置的自定義動畫

? properties :一組CSS屬性,動畫將朝著這組屬性移動。

? duration :一個字符串或者數(shù)字決定動畫將運行多久 。

? easing :要使用的擦除效果的名稱(需要插件支持).默認(rèn)jQuery提供"linear" 和 "swing"。

? callback: 在動畫完成時執(zhí)行的函數(shù)。

? fadeIn( [ duration ], [ callback ] ): 通過淡入的方式顯示匹配元素。

? fadeOut( [ duration ], [ callback ] ): 通過淡出的方式顯示匹配元素。

? slideUp( [ duration ], [ callback ] ): 用滑動動畫隱藏一個匹配元素。

? slideDown( [ duration ], [ callback ] ): 用滑動動畫顯示一個匹配元素。

? slideToggle( [ duration ], [ callback ] ): 用滑動動畫顯示或隱藏一個匹配元素。

? jQuery.fx.off: 當(dāng)這個屬性設(shè)置為 true 的時候,調(diào)用時所有動畫方法將立即設(shè)置元素為他們的最終狀態(tài),而不是顯示效果。這可能令人滿意的幾個原因:

? jQuery是被用在低資源設(shè)備。

? 動畫使用戶遇到可訪問性問題。

動畫可以通過設(shè)置這個屬性為 false 重新打開。

? stop( [ clearQueue ], [ jumpToEnd ] ): 停止匹配元素當(dāng)前正在運行的動畫。

clearQueue 一個布爾值,指示是否取消以列隊動畫。默認(rèn) false 。

jumpToEnd 一個布爾值指示是否當(dāng)前動畫立即完成。默認(rèn) false .


下面將看到如何通過這些函數(shù)在ASP.NET里面實現(xiàn)一些基礎(chǔ)的動畫效果:

? 實現(xiàn)文字放大的動畫效果

頁面代碼:

        
          <
        
        
          form 
        
        
          id
        
        
          ="form1"
        
        
           runat
        
        
          ="server"
        
        
          >
        
        
< div align ="center" >
鼠標(biāo)移動上去放大字體:
< fieldset id ="content" style ="width: 500px; height: 300px;" >
< asp:Label ID ="lblContent" CssClass ="enlarge" runat ="server" > 世上充滿無數(shù)的選擇和努力,但對于成功,選擇大于努力。敏捷開發(fā)是一種選擇。 </ asp:Label >
</ fieldset >
</ div >
</ form >

腳本代碼:

        
          <
        
        
          script 
        
        
          type
        
        
          ="text/javascript"
        
        
          >
        
        
          
$(
function () {
var oldSize = parseInt($( " .enlarge " ).css( " fontSize " ));
var newSize = oldSize * 3 ;
$(
" #content " ).hover( function () {
$(
" .enlarge " ).css( " cursor " , " pointer " );
$(
" .enlarge " ).animate({ fontSize: newSize }, 300 );
},
function () {
$(
" .enlarge " ).animate({ fontSize: oldSize }, 300 );
});
});
</ script >
< style type ="text/css" >
.enlarge
{
font-size
: 12.5px ;
font-family
: Arial, Sans-Serif ;
}
</ style >

? 實現(xiàn)圖片淡入淡出的動畫效果

頁面代碼:

        
          <
        
        
          form 
        
        
          id
        
        
          ="form1"
        
        
           runat
        
        
          ="server"
        
        
          >
        
        
< div align ="center" >
< fieldset id ="content" style ="width: 480px; height: 370px;" >
< asp:Image ID ="img1" ImageUrl ="~/images/1.jpg" runat ="server" />
</ fieldset >
</ div >
</ form >

腳本代碼:

        
          <
        
        
          script 
        
        
          type
        
        
          ="text/javascript"
        
        
          >
        
        
          
$(
function () {
$(
" #content " ).hover( function () {
$(
" #img1 " ).css( " cursor " , " pointer " );
$(
" #img1 " ).fadeOut( 1000 );
},
function () {
$(
" #img1 " ).fadeIn( 1000 );
});
});
</ script >
< style type ="text/css" >
#img1
{
width
: 438px ;
height
: 336px ;
}
</ style >

? 實現(xiàn)頁面元素上下滑動的動畫效果

頁面代碼:

        
          <
        
        
          form 
        
        
          id
        
        
          ="form1"
        
        
           runat
        
        
          ="server"
        
        
          >
        
        
< div align ="center" >
< fieldset style ="width: 400px; height: 150px;" >
< asp:Button ID ="btnSlide" runat ="server" Text ="點擊上下滑動" />
< br />
< br />
< asp:Panel ID ="plSlide" runat ="server" CssClass ="slide" >
看我上下滑動了^_^ </ asp:Panel >
</ fieldset >
</ div >
</ form >

腳本代碼:

        
          <
        
        
          script 
        
        
          type
        
        
          ="text/javascript"
        
        
          >
        
        
          
$(
function () {
$(
" #btnSlide " ).click( function (e) {
e.preventDefault();

/* if ($("#plSlide").is(":hidden")) {
$("#plSlide").slideDown(600);
}
else {
$("#plSlide").slideUp(600);
}
*/

// 更簡單的實現(xiàn)方法
$( " #plSlide " ).slideToggle( 600 );
});
});
</ script >
< style type ="text/css" >
.slide
{
font-size
: 12px ;
font-family
: Arial, Sans-Serif ;
display
: none ;
background-color
: #9999FF ;
height
: 100px ;
}
</ style >

? 實現(xiàn)如何阻止當(dāng)前動畫隊列的動畫效果

頁面代碼:

        
          <
        
        
          form 
        
        
          id
        
        
          ="form1"
        
        
           runat
        
        
          ="server"
        
        
          >
        
        
< div align ="center" >
< table border ="0" cellpadding ="3" cellspacing ="3" >
< tr >
< td class ="menuitem" >
菜單1
</ td >
< td class ="menuitem" >
菜單2
</ td >
< td class ="menuitem" >
菜單3
</ td >
< td class ="menuitem" >
菜單4
</ td >
</ tr >
</ table >
</ div >
</ form >

腳本代碼:

        
          <
        
        
          script 
        
        
          type
        
        
          ="text/javascript"
        
        
          >
        
        
          
$(
function () {
$(
" .menuitem " ).hover( function () {
$(
this ).animate({ opacity: 0.5 }, " slow " );
},
function () {
// 通過實例可以自己感受下不使用stop()和使用后菜單移動是什么效果
// $(this).animate({ opacity: 1.0 }, "slow");
// 通過使用stop()后,不再會有菜單元素動畫隊列播放的效果
$( this ).stop().animate({ opacity: 1.0 }, " slow " );
});
});
</ script >
< script type ="text/javascript" >
</ script >
< style type ="text/css" >
.menuitem
{
background-color
: Gray ;
font-weight
: bold ;
color
: White ;
text-align
: center ;
width
: 100px ;
height
: 50px ;
cursor
: pointer ;
}
</ style >

? 實現(xiàn)元素多個樣式屬改變的動畫效果

頁面代碼:

        
          <
        
        
          form 
        
        
          id
        
        
          ="form1"
        
        
           runat
        
        
          ="server"
        
        
          >
        
        
< div align ="center" >
< fieldset style ="width: 550px; height: 370px;" >
< asp:Button ID ="btnAnimate" runat ="server" Text ="運行動畫" />< br />
< br />
< asp:Panel ID ="plAnimate" runat ="server" CssClass ="contentArea" >
如果真的遇到一個特別大的Story,應(yīng)該適當(dāng)?shù)陌裇tory分解。 </ asp:Panel >
</ fieldset >
</ div >
</ form >

腳本代碼:

        
          <
        
        
          script 
        
        
          type
        
        
          ="text/javascript"
        
        
          >
        
        
          
$(
function () {
$(
" #btnAnimate " ).click( function (e) {
e.preventDefault();
$(
" #plAnimate " ).animate({ width: " 500px " ,
height:
" 280px " ,
opacity:
0.5 ,
fontSize:
" 36px " ,
borderWidth:
" 16px "
},
" slow " );
});
});
</ script >
< script type ="text/javascript" >
</ script >
< style type ="text/css" >
.contentArea
{
font-size
: 12px ;
font-family
: Arial, Sans-Serif ;
width
: 200px ;
height
: 100px ;
background-color
: #9999FF ;
border
: solid ;
}
</ style >

? 實現(xiàn)頁面元素連續(xù)運動的動畫效果

頁面代碼:

        
          <
        
        
          form 
        
        
          id
        
        
          ="form1"
        
        
           runat
        
        
          ="server"
        
        
          >
        
        
< div align ="center" >
< fieldset style ="width: 550px; height: 250px" >
< asp:Button ID ="btnAnimate" runat ="server" Text ="讓下面正方形開始連續(xù)運動" />
< br />
< br />
< asp:Panel ID ="plAnimate" runat ="server" CssClass ="contentArea" >
</ asp:Panel >
</ fieldset >
</ div >
</ form >

腳本代碼:

        
          <
        
        
          script 
        
        
          type
        
        
          ="text/javascript"
        
        
          >
        
        
          
$(
function () {
/* 按順序定義元素運動規(guī)則:
1.向右移動200px,物體透明度改變?yōu)?.8,運動時間2000ms
2.向上移動100px, 物體透明度改變?yōu)?.5,運動時間1700ms
3.向左移動400px, 物體透明度改變?yōu)?.2,運動時間1200ms
4.向下移動200px, 物體透明度改變?yōu)?,運動時間700ms
*/
$(
function () {
$(
" #btnAnimate " ).click( function (e) {
e.preventDefault();
// +=和-=這種表達(dá)式表示在原來的值上做相應(yīng)的運算
$( " #plAnimate " ).animate({ left: " +=200px " , opacity: 0.8 }, 2000 )
.animate({ top:
" -=100px " , opacity: 0.5 }, 1700 )
.animate({ left:
" -=400px " , opacity: 0.2 }, 1200 )
.animate({ top:
" +=200px " , opacity: 1 }, 700 );
});
});
});
</ script >
< style type ="text/css" >
.contentArea
{
width
: 60px ;
height
: 60px ;
border
: solid ;
background-color
: #CCCCCC ;
position
: relative ;
}
</ style >

? 實現(xiàn)一個二級菜單顯示的動畫效果

頁面代碼:

        
          <
        
        
          form 
        
        
          id
        
        
          ="form1"
        
        
           runat
        
        
          ="server"
        
        
          >
        
        
< div >
< div class ="menu_head" id ="menu1" >
菜單1 </ div >
< div class ="menu_sub" >
子菜單11 < br />
子菜單12 </ div >
< div class ="menu_head" >
菜單2 </ div >
< div class ="menu_sub" >
子菜單21 < br />
子菜單22 </ div >
< div class ="menu_head" >
菜單3 </ div >
< div class ="menu_sub" >
子菜單31 < br />
子菜單32 </ div >
< div class ="menu_head" >
菜單4 </ div >
< div class ="menu_sub" >
子菜單41 < br />
子菜單42 </ div >
</ div >
</ form >

腳本代碼:

        
          <
        
        
          script 
        
        
          type
        
        
          ="text/javascript"
        
        
          >
        
        
          
$(
function () {
$(
" .menu_head " ).click( function () {
if (parseFloat($( this ).css( " opacity " )) == 1 ) {
$(
this ).animate({ opacity: 0.5 , fontSize: " 18px " }, " slow " );
}
else {
$(
this ).animate({ opacity: 1 , fontSize: " 15px " }, " slow " );
}
$(
this ).next( " .menu_sub " ).slideToggle( " slow " );
});
});
</ script >
< style type ="text/css" >
.menu_head
{
width
: 150px ;
height
: 30px ;
background-color
: #cccccc ;
cursor
: pointer ;
font-size
: 15px ;
}

.menu_sub
{
width
: 150px ;
height
: 50px ;
background-color
: #9999ff ;
display
: none ;
}
</ style >

通過以上示例的學(xué)習(xí),在以后通過jQuery操作動畫效果的時候,希望對你有一定的幫助。

?

ASP.NET jQuery 食譜21 (jQuery各種動畫基礎(chǔ)效果技巧集合)


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯(lián)系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機(jī)微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦!??!

發(fā)表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 国产精品国产高清国产专区 | www.色在线观看 | 亚洲欧美日韩中文字幕在线 | 四虎影院在线免费播放 | 国产欧美综合精品一区二区 | 免费网站日本永久免费观看 | 国产精品久久国产精麻豆99网站 | 99久久国产综合精品2020 | 国产精品免费综合一区视频 | 四虎b789ucom| 成人影院观看 | 欧美日韩亚洲区久久综合 | 裸身裸乳免费视频网站 | 欧美日韩国产在线人成 | 男人猛躁女人成人免费视频 | 夜色福利久久久久久777777 | 亚洲在线观看一区 | 国产亚洲欧美另类久久久 | 免费一级欧美大片视频在线 | 成人 亚洲 | 久久午夜夜伦伦鲁鲁片 | 国产综合亚洲欧美日韩一区二区 | 亚洲欧美一区二区三区不卡 | 中文字幕福利 | 国产97公开成人免费视频 | 久久这里只有精品66 | 永久黄网站色视频免费观看99 | 99爱网站 | 视频在线一区二区三区 | 四月婷婷七月婷婷综合 | 日本一视频一区视频二区 | 亚洲精品久久久久久久777 | 亚洲人成绝费网站色ww | 俺来也俺来也天天夜夜视频 | 国产一区在线播放 | 日日噜噜夜夜狠狠久久丁香 | 一级不卡毛片免费 | 欧美在线中文 | 国产成人精品亚洲777图片 | 91成人免费观看在线观看 | 劲爆欧美色欧美 |