初识animate()

最新推荐文章于 2021-01-26 23:09:18 发布

何必诗债换酒钱

最新推荐文章于 2021-01-26 23:09:18 发布

阅读量844

点赞数

分类专栏： jQuery web前端文章标签： jQuery web前端 animate

本文链接：https://blog.csdn.net/u014395524/article/details/46941119

版权

web前端同时被 2 个专栏收录

74 篇文章 1 订阅

订阅专栏

jQuery

5 篇文章 0 订阅

订阅专栏

一直很钦佩那些能用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>https://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>https://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>https://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>https://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>https://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>https://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>https://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>https://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>https://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>https://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>https://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>https://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

收藏

觉得还不错? 一键收藏
0
评论
初识animate()

一直很钦佩那些能用jQuery做出拉风动画的人，哦，不，能做出拉风动画的神！！习惯使我在打开网页时总会想一下网页的布局，但总是被各种动画吓到。。因为我不会呀。。果然，大神就是值得被人敬仰！“路漫漫其修远兮”，还是要慢慢修炼啊！不会的东西早晚得学，比如，动画。。先贴一个新鲜出炉的（虽然简单，奈何智商不高，倒也费了一番心思）：动画实例 *{margin
复制链接

扫一扫

专栏目录