jQuery中的动画 -- 案例

最新推荐文章于 2021-03-03 18:48:03 发布
最新推荐文章于 2021-03-03 18:48:03 发布
阅读量235 收藏
点赞数
文章标签： jQuery 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011435776/article/details/79898404
版权

视频展示效果


HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>视频展示</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript">
		$(function(){
			var page = 1;
			var i = 4;
			$("span.next").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");

				var v_width = $v_content.width();
				var len = $v_show.find("li").length;
				var page_count = Math.ceil(len/i);

				// if (page == page_count) {
				// 	$v_show.animate({left:"0px"},"normal");
				// 	page = 1;
				// } else {
				// 	$v_show.animate({left:"-="+v_width},"normal");
				// 	page++;
				// }
				// $parent.find("span").eq(page-1).addClass("current").siblings().removeClass("current");
				if (!$v_show.is(":animated")) {	//判断“视频展示区域”是否正处于动画
					if (page == page_count) {
						$v_show.animate({left:"0px"},"normal");
						page = 1;
					} else {
						$v_show.animate({left:"-="+v_width},"normal");
						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");

				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)},"normal");
						page = page_count;
					} else {
						$v_show.animate({left:"+="+v_width},"normal");
						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>25003</em></span></li>
					<li><a href="#"><img src="img/01.jpg" alt="海贼王"></a><h4><a href="#">海贼王</a></h4><span>播放：<em>25003</em></span></li>
					<li><a href="#"><img src="img/01.jpg" alt="海贼王"></a><h4><a href="#">海贼王</a></h4><span>播放：<em>25003</em></span></li>
					<li><a href="#"><img src="img/01.jpg" alt="海贼王"></a><h4><a href="#">海贼王</a></h4><span>播放：<em>25003</em></span></li>
					<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦"></a><h4><a href="#">哆啦A梦</a></h4><span>播放：<em>23543</span></li>
					<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦"></a><h4><a href="#">哆啦A梦</a></h4><span>播放：<em>23543</span></li>
					<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦"></a><h4><a href="#">哆啦A梦</a></h4><span>播放：<em>23543</span></li>
					<li><a href="#"><img src="img/02.jpg" alt="哆啦A梦"></a><h4><a href="#">哆啦A梦</a></h4><span>播放：<em>23543</span></li>
					<li><a href="#"><img src="img/03.jpg" alt="火影忍者"></a><h4><a href="#">火影忍者</a></h4><span>播放：<em>4123</span></li>
					<li><a href="#"><img src="img/03.jpg" alt="火影忍者"></a><h4><a href="#">火影忍者</a></h4><span>播放：<em>4123</span></li>
					<li><a href="#"><img src="img/03.jpg" alt="火影忍者"></a><h4><a href="#">火影忍者</a></h4><span>播放：<em>4123</span></li>
					<li><a href="#"><img src="img/03.jpg" alt="火影忍者"></a><h4><a href="#">火影忍者</a></h4><span>播放：<em>4123</span></li>
					<li><a href="#"><img src="img/04.jpg" alt="龙珠传"></a><h4><a href="#">龙珠传</a></h4><span>播放：<em>20025</span></li>
					<li><a href="#"><img src="img/04.jpg" alt="龙珠传"></a><h4><a href="#">龙珠传</a></h4><span>播放：<em>20025</span></li>
					<li><a href="#"><img src="img/04.jpg" alt="龙珠传"></a><h4><a href="#">龙珠传</a></h4><span>播放：<em>20025</span></li>
					<li><a href="#"><img src="img/04.jpg" alt="龙珠传"></a><h4><a href="#">龙珠传</a></h4><span>播放：<em>20025</span></li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>

style.css样式

* { margin:0; padding:0; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#2B93D2; text-decoration:none; }
a:hover { color:#E31E1C; text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }

/* v_show style */
.v_show { width:595px; margin:20px 0 1px 60px; }
.v_caption { height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat 0 0; }
.v_caption h2 { float:left; width:84px; height:35px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px; }
.v_caption .cartoon { background-position: 0 -100px; }
.v_caption .variety { background-position:-100px -100px; }
.highlight_tip { display:inline; float:left; margin:14px 0 0 10px; }
.highlight_tip span { display:inline; float:left; width:7px; height:7px; overflow:hidden; margin:0 2px; background:url(img/btn_cartoon.gif) no-repeat 0 -320px; text-indent:-9999px; }
.highlight_tip .current { background-position:0 -220px; }
.change_btn { float:left; margin:7px 0 0 10px; }
.change_btn span { display:block; float:left; width:30px; height:23px; overflow:hidden; background:url(img/btn_cartoon.gif) no-repeat; text-indent:-9999px; cursor:pointer; }
.change_btn .prev { background-position:0 -400px;  }
.change_btn .next { width:31px; background-position:-30px -400px; }
.v_caption em { display:inline; float:right; margin:10px 12px 0 0; font-family:simsun; }
.v_content { position:relative; width:592px; height:160px; overflow:hidden; border-right:1px solid #E7E7E7; border-bottom:1px solid #E7E7E7; border-left:1px solid #E7E7E7; }
.v_content_list { position:absolute; width:2500px;top:0px; left:0px; }
.v_content ul {float:left;}
.v_content ul li { display:inline; float:left; margin:10px 2px 0; padding:8px; background:url(img/v_bg.gif) no-repeat; }
.v_content ul li a { display:block; width:128px; height:80px; overflow:hidden; }
.v_content ul li img {  width:128px; height:96px; }
.v_content ul li h4 { width:128px; height:18px; overflow:hidden; margin-top:12px; font-weight:normal; }
.v_content ul li h4 a { display:inline !important; height:auto !important; }
.v_content ul li span { color:#666; }
.v_content ul li em { color:#888; font-family:Verdana; font-size:0.9em; }

Elvira_D
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于JQuery的动画案例-手风琴、动态移动展示效果
qq_42095103的博客
11-14 1060
手风琴效果实际上是一个ul标签下面包含了7个小li标签，然后每一个小li标签下面有两张图片，一个为表面的小图片和被隐藏之后的大图片，然后小图片是以绝对定位显示在小li中，而小li标签是以相对定位排列在ul标签当中；当鼠标进入小li标签时，要让li标签大小变为大图片的大小，同时小图片淡出，大图片淡入，还要注意的是：当前li标签变化时，要还原其他小li标签为小图片的状态。
jquery经典实例60例-动画实例
06-01
jquery经典实例60例-动画实例 jquery经典实例60例-动画实例 jquery经典实例60例-动画实例
JQuery动画 案例（2）
魔法革1996
05-11 345
1、动画演示 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { background: #E9FFB7; } .d...
（记录）jquery中使用动画的一个小例子
qq_44361433的博客
05-30 199
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .box{ width: 100px; heig...
jQuery串行动画小案例
卡奇莫多的博客
11-05 411
因为动画需要执行一段时间，所以jQuery必须不断返回新的Promise对象才能后续执行操作。简单地把动画封装在函数中是不够的。 var div = $('#test-animates'); // 动画效果：slideDown - 暂停 - 放大 - 暂停 - 缩小 div.slideDown(2000) .delay(1000) .animate({ width: '25
jQuery学习案例-购物车
03-08
总结来说，"jQuery学习案例-购物车"是一个综合性的练习，涵盖了jQuery的DOM操作、事件处理，以及localStorage在前端数据持久化中的应用。通过实践这个案例，开发者不仅可以提升jQuery的运用技巧，还能加深对HTML5新...
jquery-easyui-1.4.4
10-09
`jQuery EasyUI 1.4.4` 版本是该框架的一个稳定版本，包含了 CSS 样式表和 JavaScript 文件，以及一些示例案例，帮助开发者更好地理解和使用这个库。 首先，我们要了解 `jQuery`。jQuery 是一个轻量级的 JavaScript...
jquery飞机大战-案例.rar
03-01
jQuery的动画功能在游戏开发中扮演重要角色。飞机的移动、子弹的发射、爆炸效果等，都是通过jQuery的`.animate()`方法实现的。通过学习这个案例，你可以掌握如何创建平滑的动画效果，提升游戏体验。 六、事件处理 ...
锋利的jQuery---附源码
06-26
5. **jQuery动画**：jQuery的动画功能强大，包括淡入淡出(`fadeIn()`, `fadeOut()`), 滑动(`slideUp()`, `slideDown()`), 自定义动画(`animate()`)等。这些动画效果的源码分析有助于理解动画的工作原理。 6. **Ajax...
jquery-ui-1.8.17
08-12
在本篇文章中，我们将深入探讨jQuery UI 1.8.17版本的核心特性和实际应用场景，帮助开发者更好地理解和利用这个强大的工具。 一、jQuery UI 的核心组件 jQuery UI 包含了多个用户界面元素和交互功能，如： 1. **...
jQuery动画特效实例教程
weixin_30614587的博客
08-30 155
本文以实例形式详细讲述了jQuery动画特效的实现方法。 1.自制折叠内容块 内容块如下： <div class="module"> <div class="caption"> <span>标题</span> <img src="rollup.gif" alt="roll...
jQuery动画示例
从零开始的教程世界
07-08 122
jQuery animate() function is used to perform a custom animation of a set of CSS properties. This method allows you to create custom animation only on numeric properties. For example, the properties wi...
jQuery动画＋案例
cola
11-08 810
语法： hide()隐藏 show()隐藏 $(selector).animate(styles,speed,easing,callback) 案例： //掉落￥ <style> *{ margin: 0; padding:0; } html,body{ width: 100%; height: 100%; }
jquery动画（附有简单网页广告代码实例以及运行截图）
GodGump的博客
03-03 348
动画的操作有很多，分享几个常见的动画 显示和隐藏 show()即显示方法和hide()即隐藏方法是jQuery中最基本的动画方法。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”。 hide() 和 show() 分别可以携带两个可选参数，一个是speed参数另外一个是callback参数。speed的作用是控制显示和隐藏的速度，它可以取以下值：“slow”、“fast” 或毫秒。，callback则为执行完以后进行的函数，学过汇编语言对这个应该很好理解，返回
Jq动画小案例
sunhaomei的博客
07-03 352
小米手风琴案例 京东轮播图案例 stop停止动画--先停止其他的，在执行自己的（在动画前加stop()） stop两个不常用方法
10个jQuery动画实例
Just Code
03-30 492
&lt;!-- close: meta paragraph --&gt; jQuery can pretty much do anything you can think of. All you need is a creative imagination and some time to learn the simple and intuitive API . ...
jQuery: 动画案例二
willard_cui的博客
08-04 281
动画：鼠标移动到一级菜单上时，打开对应的二级菜单，移出时关闭该二级菜单。 使用的jQuery方法：slideDown(), slideUp(), stop(), find(), mouseenter(), mouseleave()。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset...
JQuery动画+事例
泠泠似水
02-27 768
1.动画基础隐藏和显示jQuery中隐藏元素的hide方法让页面上的元素不可见，一般可以通过设置css的display为none属性。但是通过css直接修改是静态的布局，如果在代码执行的时候，一般是通过js控制元素的style属性，这里jQuery提供了一个快捷的方法.hide()来达到这个效果$elem.hide()提供参数：.hide( options )当提供hide方法一个参数时，.hide
JQuery 自定义动画案例
李金华的博客
08-05 542
自定义动画     语法： animate(params,[speed],[easing],[fn]);   $('#ani').click(function(){         $('#re').animate(                 {left:"1000", top:"-100",opacity:'0'},
jQuery轻松动画：从实例看如何打造弹出层效果
在实际应用中，jQuery动画常常与其他功能结合使用，例如与事件处理函数搭配，以响应用户的交互。如文中提到的弹出层例子，jQuery可以优雅地解决动态计算位置、事件委托和阻止冒泡等问题： ```javascript $(document...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值