初识animate()

来源：互联网发布：lol画面卡顿网络编辑：程序博客网时间：2024/05/20 16:36
一直很钦佩那些能用jQuery做出拉风动画的人，哦，不，能做出拉风动画的神！！习惯使我在打开网页时总会想一下网页的布局，但总是被各种动画吓到。。因为我不会呀。。果然，大神就是值得被人敬仰！“路漫漫其修远兮”，还是要慢慢修炼啊！
不会的东西早晚得学，比如，动画。。先贴一个新鲜出炉的（虽然简单，奈何智商不高，倒也费了一番心思）：
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>动画实例</title><meta name="description" content=""><meta name="keywords" content=""><script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><style type="text/css">    *{margin:0;padding:0;}    body{font: 12px/1.5em "微软雅黑";color: #333;}    a{color: #2B93D2;text-decoration:none;}    a:active, a:hover{color: #E31E1C;text-decoration:underline;}    .content{width:500px;border:1px solid #ccc;margin:30px auto;overflow: auto;}    .content .pic{width:405px;height:96px;margin:20px auto;overflow:hidden;position:relative;}    .content ul{width:1620px;position:absolute;}    .content li{float:left;margin-right: 7px;list-style: none;}    .content li span{display: inline-block;width:128px;height:96px;}    .content li span.one{background: yellow;}    .content li span.two{background: purple;}    .content li span.three{background: pink;}    .content li span.four{background: lightblue;}    .content p{height:30px;line-height: 30px;text-align:center;}    .content p a{padding-right:20px;}</style></head><body><div class="content"><div class="pic"><ul>    <li><a href="#"><img src="<span>http://img.blog.csdn.net/20150718114222203?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center</span>" alt=""></a></li>    <li><a href="#"><img src="<span>http://img.blog.csdn.net/20150718114222203?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center</span>" alt=""></a></li>    <li><a href="#"><img src="<span>http://img.blog.csdn.net/20150718114222203?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center</span>" alt=""></a></li>    <li><a href="#"><img src="<span>http://img.blog.csdn.net/20150718114226741?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center</span>" alt=""></a></li>    <li><a href="#"><img src="<span>http://img.blog.csdn.net/20150718114226741?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center</span>" alt=""></a></li>    <li><a href="#"><img src="<span>http://img.blog.csdn.net/20150718114226741?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center</span>" alt=""></a></li>    <li><a href="#"><img src="<span>http://img.blog.csdn.net/20150718114231272?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center</span>" alt=""></a></li>    <li><a href="#"><img src="<span>http://img.blog.csdn.net/20150718114231272?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center</span>" alt=""></a></li>    <li><a href="#"><img src="<span>http://img.blog.csdn.net/20150718114231272?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center</span>" alt=""></a></li>    <li><a href="#"><img src="<span>http://img.blog.csdn.net/20150718114235240?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center</span>" alt=""></a></li>    <li><a href="#"><img src="<span>http://img.blog.csdn.net/20150718114235240?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center</span>" alt=""></a></li>    <li><a href="#"><img src="<span>http://img.blog.csdn.net/20150718114235240?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center</span>" alt=""></a></li>        <!--若图片不能显示，可代之以如下色块-->    <!--    <li><a href="#"><span class="one"></span></a></li>    <li><a href="#"><span class="one"></span></a></li>    <li><a href="#"><span class="one"></span></a></li>    <li><a href="#"><span class="two"></span></a></li>    <li><a href="#"><span class="two"></span></a></li>    <li><a href="#"><span class="two"></span></a></li>    <li><a href="#"><span class="three"></span></a></li>    <li><a href="#"><span class="three"></span></a></li>    <li><a href="#"><span class="three"></span></a></li>    <li><a href="#"><span class="four"></span></a></li>    <li><a href="#"><span class="four"></span></a></li>    <li><a href="#"><span class="four"></span></a></li>    -->    </ul></div><div class="info">    <p><a href="#" class="prev">上一页</a><a href="#" class="next">下一页</a></p></div></div><script type="text/javascript">    $(function(){    var page = 1, num = 3;//当前页为第一页，每一页放置三张图片    $('a.next').click(function(){    var parent = $(this).parents('div.content');    var $show = parent.find('div.pic');    var showW = $show.width();    /*alert(showW);*/    var len = $show.find('li').length;    var pageNum = Math.ceil(len/num);//总共需要的页面数    /*alert(pageNum);*/    if(! $show.is(':animated')){//判断“视频内容展示区域”是否正在处于动画    if(page == pageNum){//已经到最后一个版面了,如果再向后，必须跳转到第一个版面    $show.children('ul').animate({left:'0px'},'slow');    page = 1;    }    else{    //通过改变left值，跳转到第一个版面    $show.children('ul').animate({left : '-='+showW},'slow');    page++;    }    }    });    $('a.prev').click(function(){    var parent = $(this).parents('div.content');    var $show = parent.find('div.pic');    var showW = $show.width();    /*alert(showW);*/    var len = $show.find('li').length;    var pageNum = Math.ceil(len/num);    /*alert(pageNum);*/    if(! $show.is(':animated')){    if(page == 1){    //已经到第一个版面了,如果再向前，必须跳转到最后一个版面    $show.children('ul').animate({left:'-='+showW*(pageNum-1)},'slow');    page = pageNum;    }    else{    $show.children('ul').animate({left : '+='+showW},'slow');    page--;    }    }    });    })</script></body></html>
0 0