jquery的动画效果

  • 这个实现的效果是从上往下翻图片。翻到底，从下往上翻
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基础动画</title>
    <script src="js/jquery-2.2.4.min.js"></script>
    <link href="css/01.css"  rel="stylesheet" type="text/css">
</head>
<body>
    <h1>直隐直现的轮播图</h1>
    ![](images/01.jpg)
    ![](images/02.jpg)
    ![](images/03.jpg)
    ![](images/04.jpg)
</body>
</html>
<script>
var i = 0;                          //定义帧数的变量
var len = $("img").length - 1;      //判断执行方向
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应用</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>在这里无兄弟不编程，让学习成为一种习惯，破茧成蝶，在大师们帮助下让您的IT梦扬帆起航！！！</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({                            //出现小广告的内容部分
    width:"306px",
},3000).animate({                       //出现小广告的标题部分
    top:screenHeight - 205,
    height:"200px"
},3000).find("h3").delay(3000).animate({
    height:"40px"
},3000);
</script>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容