jQuery的动画效果以及图片切换实例

最新推荐文章于 2024-04-16 15:12:02 发布

andrewleeeeee

最新推荐文章于 2024-04-16 15:12:02 发布

阅读量923

点赞数

分类专栏： jQuery JS成品代码

本文链接：https://blog.csdn.net/andrewleeeeee/article/details/16857353

版权

JS成品代码同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

jQuery

16 篇文章 0 订阅

订阅专栏

1.动画方法说明：

hide() show() //同时修改多个样式属性，就是隐藏显示

fadeIn() fadeOut() //改变透明度显示隐藏

slideUp() slideDown //改变高度上的显示隐藏

fadeTo() //只改变透明度，可替代fadeIn fadeOut

toggle() //可替代hide show，轮番切换

slideToggle() //可替代slideUp slideDown

fadeToggle() //可替代fadeIn fadeOut

下面具体说animate() 自定义动画方法

2.animate() 自定义动画，格式：animate(params, speed, callback);

如：$(#panel).click(function(){

$(this).animate( {left: "500px", top: "300px"}, 3000 ) //注意以大括弧包括多个参数，key没有引号，value有引号，在执行这种控制移动的效果时，需要css写position为relative或者 absolute，回调函数为可选，即动画执行完后执行的函数。

})

3.animate可以同时执行多个动画，也可以顺序执行，如上边例子就是同时执行，如果想顺序执行

$(this).animate({left: "500px"}, 3000).animate(top: "300px", 3000); //这叫动画队列

4.animate回调函数，通常用于想改变css样式，但是css样式不是动画加入不了队列中，就需要函数帮忙

$(this).animate( {left: "500px", top: "300px"}, 3000 ) , function(){ $(this).css("border", "5px solid blue") }; //加入到队列最后

5.stop([clearQueue, gotoEnd]); 停止当前动画，跳转到队列中的下一步，参数为bool值，是否清空未执行的队列和到队列尾端，用于比如鼠标划过动画显示，但是突然划出动画不能立刻改变到划出状态

如：

$("#panel").hover(function() {

$(this).stop().animate( {height:"150", width:"300"}, 200 ); //鼠标划入时变大，如果突然划出就stop到下一步

}.function(){

$(this).stop().animate( {height:"22", width:"60"}, 200 ); //鼠标划出时变小，如果突然划入就stop到下一步

})

以上为同时执行，如果是顺序执行的多个动画，就需要将参数cleaQueue变为true

6.判断是否处于动画状态，在使用animate方法时要避免动画累积导致的动画与用户行为不一致，当用户快速在某个元素上执行animate动画时就会出现动画累积。所以需要判断，如果不处于动画状态，才为元素添加新的动画，注意这个方法很重要

if (! $(element).is(":animated"))

{

//如果没有进行动画，则

}

7.delay() 允许将队列中的函数延时执行

实例：

$(function(){
    var page = 1;
    var i = 4; //每版放4个图片
    //向后 按钮
    $("span.next").click(function(){    //绑定click事件
    var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
var v_width = $v_content.width() ;
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数
if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画
 if( page == page_count ){  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。
$v_show.animate({ left : '0px'}, "slow"); //通过改变left值，跳转到第一个版面
page = 1;
 }else{
$v_show.animate({ left : '-='+v_width }, "slow");  //通过改变left值，达到每次换一个版面
page++;
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
}
   });
    //往前 按钮
    $("span.prev").click(function(){
    var $parent = $(this).parents("div.v_show");//根据当前点击元素获取到父元素
var $v_show = $parent.find("div.v_content_list"); //寻找到“视频内容展示区域”
var $v_content = $parent.find("div.v_content"); //寻找到“视频内容展示区域”外围的DIV元素
var v_width = $v_content.width();
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数
if( !$v_show.is(":animated") ){    //判断“视频内容展示区域”是否正在处于动画
if( page == 1 ){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。
$v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");
page = page_count;
}else{
$v_show.animate({ left : '+='+v_width }, "slow");
page--;
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
}
    });
});




</script>


</head>


<body>


<div class="v_show">
<div class="v_caption">
<h2 class="cartoon" title="卡通动漫">卡通动漫</h2>
<div class="highlight_tip">
<span class="current">1</span><span>2</span><span>3</span><span>4</span>
</div>
<div class="change_btn">
<span class="prev" >上一页</span>
<span class="next">下一页</span>
</div>
<em><a href="#">更多>></a></em>
</div>
<div class="v_content">
<div  class="v_content_list">
<ul>
<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/01.jpg" alt="海贼王" /></a><h4><a href="#">海贼王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦" /></a><h4><a href="#">哆啦A梦</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龙珠" /></a><h4><a href="#">龙珠</a></h4><span>播放 <em>57,865</em></span></li>
    </ul>
</div>
</div>
</div>

andrewleeeeee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery的动画效果以及图片切换实例

1.动画方法说明：hide() show() //同时修改多个样式属性，就是隐藏显示fadeIn() fadeOut() //改变透明度显示隐藏slideUp() slideDown //改变高度上的显示隐藏fadeTo() //只改变透明度，可替代fadeIn fadeOuttoggle() //可替代hide show，轮番切换slideToggle() //可替代sl
复制链接

扫一扫