jquery的動畫效果

  • 這個實現(xiàn)的效果是從上往下翻圖片。翻到底，從下往上翻
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基礎(chǔ)動畫</title>
    <script src="js/jquery-2.2.4.min.js"></script>
    <link href="css/01.css"  rel="stylesheet" type="text/css">
</head>
<body>
    <h1>直隱直現(xiàn)的輪播圖</h1>
    ![](images/01.jpg)
    ![](images/02.jpg)
    ![](images/03.jpg)
    ![](images/04.jpg)
</body>
</html>
<script>
var i = 0;                          //定義幀數(shù)的變量
var len = $("img").length - 1;      //判斷執(zhí)行方向
setInterval(function(){
    if(i++%(2*len) < len){
        $("img:visible").slideUp().next().slideDown();
    }else{
        $("img:visible").slideUp().prev().slideDown();
    }
},1000);
</script>
  • 字母滾動
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>字幕滾動實例</title>
    <script src="js/jquery-2.2.4.min.js"></script>
    <link href="css/02.css"  rel="stylesheet" type="text/css">
</head>
<body>
    <h1>美句欣賞</h1>
    <ul>
        <li>I love three things in this world. Sun, moon and you. Sun for morning, moon for night , and you forever</li>
        <li>There are no trails of the wings in the sky, while the birds has flied away.</li>
        <li>Every hour of lost time is a chance of future misfortune.</li>
        <li>Learn from yesterday,live for today,hope for to morrow</li>
        <li>You know my loneliness is only kept for you, my sweet songs are only sung for you.</li>
    </ul>
</body>
</html>
<script>
$("li:last").hide();
setInterval(function(){
    $("li:first").slideUp(1000,"linear",function(){
        $(this).appendTo("ul");
    }).parent().find("li:last").slideDown(1000,"linear");
},1020);
</script>
  • 小廣告
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>富web應(yīng)用</title>
    <script src="js/jquery-2.2.4.min.js"></script>
    <link href="css/03.css"  rel="stylesheet" type="text/css">
</head>
<body>
    <div id="advertisement">
        <h3>歡迎您，加入兄弟會！</h3>
        <div>
                ![](images/01.png)
                <h4>破解成蝶，放飛你的夢想</h4><br>
                <p>在這里無兄弟不編程，讓學(xué)習(xí)成為一種習(xí)慣，破繭成蝶，在大師們幫助下讓您的IT夢揚帆起航?。。?lt;/p>
            </dl>
        </div>
    </div>
</body>
</html>
<script>    
var screenHeight = $(window).height();  //獲取窗口的高度
$("#advertisement").css({               //對小廣告進行初始化
    position:"fixed",
    width:'0px',
    height:'160px',
    right:0,
    top:screenHeight - 165,
}).animate({                            //出現(xiàn)小廣告的內(nèi)容部分
    width:"306px",
},3000).animate({                       //出現(xiàn)小廣告的標(biāo)題部分
    top:screenHeight - 205,
    height:"200px"
},3000).find("h3").delay(3000).animate({
    height:"40px"
},3000);
</script>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容