经过这几天学习jQuery中的事件和动画，对jQuery更深的认识，接下来先把视频展示效果的代码贴出来，最后把我在学习jQuery事件和动画之后总结的思维导图

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>视频展示效果实例</title>

<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>  <!--引入jQuery -->

<script type="text/javascript" >

$(function (){

 var page=1;                                   //初始化当前的版面数为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");   //找到视屏内容展示区外围的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: '15px'},"slow")    

				  page=1;                          //通过改变left值，跳转到第一版面

			  }else{

				  $v_show.animate({left: '-='+$v_width},"slow")

				  page++;                           //通过left值到达每次换一个版面

			  }

			   $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");

		     }   //  为了可以让高亮效果随着版面转换   我们要通过版面数来实现   因为版面的初始值是1开始，而高亮元素是从0开始所以在对应版面数时-1，当前元素添加高亮属性“current”，同辈下的元素移除样式“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)},"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>

<style>

*{margin: 0; padding: 0;}

body{ font: normal 16px/1.5em  "微软雅黑", Verdana, Geneva, sans-serif;}

ul,li{ list-style: none;}

a{ text-decoration: none;}

img{ border: none;}

em{ font-style: normal;}

.fl{ float: left;}

.fr{ float: right;}

.v_show{ width: 502px; height: 198px; border: 1px solid red; background: #000; margin: 50px auto; overflow: hidden;}

.v_caption{ float: left; background: #ccc; color: #000; height: 40px; width: 100%; position: relative; overflow: hidden;}

.cartoon { font-size: 16px; line-height: 40px; text-indent: 15px; padding-right: 20px;  }

.v_caption .heightlight_tip{  width: 60px;}

.v_caption .heightlight_tip span{ background: url(../img/hover1.png) no-repeat center; width: 8px; height: 8px; border-radius: 4px; float: left;margin:16px 5px 0  0;}

.v_caption .heightlight_tip .current{ background: url(../img/hover.png) no-repeat center; }

.change_btn{ width: 290px; }

.change_btn .prev{ float: left; background: url(../img/prev.gif) no-repeat center ; width: 20px; height: 20px; margin-top: 10px;}

.change_btn .next{ float: left; background: url(../img/next.gif) no-repeat center; width: 20px; height: 20px; margin: 10px 0 0 1px;}

.v_caption em{ margin-top: 10px; text-align: center;  position: absolute; top: 0; right: 15px;}

.v_caption em a{ color: #000; text-decoration: none; line-height: 20px; display: block; font-size: 14px;}

.v_caption em a:hover{ color: #f60;}

.v_content{ clear: both; width: 502px; height: 145px; padding: 15px 15px 0 15px; overflow: hidden; position: relative; }

.v_content_list{ display: block; position: absolute; left: 15px; top: 15px;}

.v_content_list li{ float: left; width: 99px; height: 143px; margin-right: 25px; overflow: hidden; position: relative;}

.v_content_list li a{ display: block; width: 99px; height: 99px;}

.v_content_list .info{ position: absolute; left:0; top:103px;}

.v_content_list .info a { color: #fff; width: 99px; height: 16px;}

.v_content_list .info a:hover{ color: #f60;}

.v_content_list .info span{ color: #fff; font-size: 12px;}

</style>

</head>

<body>

<div class="v_show">

    <div class="v_caption">

    	<h2 class="cartoon fl" title="卡通动漫">卡通动漫</h2>

        <div class="heightlight_tip fl">

        	<span class="current"></span><span></span><span></span><span></span>

        </div>

        <div class="change_btn fl">

        	<span class="prev"></span>

            <span class="next"></span>

        </div>

        <em class="fl"><a href="#">更多>></a></em>

    </div>

    <div class="v_content">

    	<div class="v_content_list">

            <ul>

                <li><a href="#"><img src="img/1.jpg" width="100px" height="100px" alt="1"></a> <div class="info"><h4><a href="#">1</a></h4><span>播放：<em>28,618</em></span></div></li>

                <li><a href="#"><img src="img/2.jpg" width="100px" height="100px" alt="2"></a> <div class="info"><h4><a href="#">2</a></h4><span>播放：<em>27,377</em></span></div></li>

                <li><a href="#"><img src="img/3.jpg" width="100px" height="100px" alt="3"></a> <div class="info"><h4><a href="#">3</a></h4><span>播放：<em>28,618</em></span></div></li>

                <li><a href="#"><img src="img/4.jpg" width="100px" height="100px" alt="4"></a> <div class="info"><h4><a href="#">4</a></h4><span>播放：<em>27,377</em></span></div></li>

                 <li><a href="#"><img src="img/1.jpg" width="100px" height="100px" alt="1"></a> <div class="info"><h4><a href="#">1</a></h4><span>播放：<em>28,618</em></span></div></li>

                <li><a href="#"><img src="img/2.jpg" width="100px" height="100px" alt="2"></a> <div class="info"><h4><a href="#">2</a></h4><span>播放：<em>27,377</em></span></div></li>

                <li><a href="#"><img src="img/3.jpg" width="100px" height="100px" alt="3"></a> <div class="info"><h4><a href="#">3</a></h4><span>播放：<em>28,618</em></span></div></li>

                <li><a href="#"><img src="img/1.jpg" width="100px" height="100px" alt="1"></a> <div class="info"><h4><a href="#">1</a></h4><span>播放：<em>28,618</em></span></div></li>

                <li><a href="#"><img src="img/2.jpg" width="100px" height="100px" alt="2"></a> <div class="info"><h4><a href="#">2</a></h4><span>播放：<em>27,377</em></span></div></li>

                <li><a href="#"><img src="img/3.jpg" width="100px" height="100px" alt="3"></a> <div class="info"><h4><a href="#">3</a></h4><span>播放：<em>28,618</em></span></div></li>

                <li><a href="#"><img src="img/4.jpg" width="100px" height="100px" alt="4"></a> <div class="info"><h4><a href="#">4</a></h4><span>播放：<em>27,377</em></span></div></li>

                 <li><a href="#"><img src="img/1.jpg" width="100px" height="100px" alt="1"></a> <div class="info"><h4><a href="#">1</a></h4><span>播放：<em>28,618</em></span></div></li>

                <li><a href="#"><img src="img/2.jpg" width="100px" height="100px" alt="2"></a> <div class="info"><h4><a href="#">2</a></h4><span>播放：<em>27,377</em></span></div></li>

                <li><a href="#"><img src="img/3.jpg" width="100px" height="100px" alt="3"></a> <div class="info"><h4><a href="#">3</a></h4><span>播放：<em>28,618</em></span></div></li>

            </ul>

        </div>

    </div>

</div>

</body>

</html>

上面的效果图

下图就是自己总结jQuery中事件和动画的思维导图

jQuery中的事件和动画 以及视频展示效果实例的更多相关文章

  1. jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  2. jQuery中的事件与动画<思维导图>

    Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...

  3. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  4. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  5. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  6. 【jQuery基础学习】03 jQuery中的事件与动画

    关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...

  7. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

  8. 第4章 jQuery中的事件和动画

    4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...

  9. 第3章 jquery中的事件和动画

    一,jquery中的事件 (1).执行时机 $(document).ready()和window.onload方法有相似的功能,但是在执行时机方面有区别,windwo.onload在网页中所有的元素包 ...

随机推荐

  1. PHP网站在Linux服务器上安全设置方案

    本文总结了PHP网站在Linux服务器上一些安全设置(ps:还有一些设置给忘了),在<lnmp一键安装包>大多数参数已经包含,如果有什么更多的设置,大家一起讨论学习 PHP安全配置 1. ...

  2. CodeForces 402D Upgrading Array (数学+DP)

    题意:给出一个数列,可以进行一种操作将某一个前缀除去他们的gcd,有一个函数f(x),f(1) = 0 , f(x) = f(x/p)+1,f(x) = f(x/p)-1(p是坏素数), 求 sum( ...

  3. Opera福利谷歌

    文章介绍 看到这个文章时候,感觉还可以,之前天行也是酱紫的,但是现在不知道怎么的已经完全用不了了.就试了下这个欧鹏,还可以,朋友有不少需要访问谷歌的,就收藏下了. Opera介绍 Opera浏览器,是 ...

  4. AttributeError: 'module' object has no attribute 'gfile'

    While running TensorFlow's classify_image, getting AttributeError: 'module' object has no attribute ...

  5. wifi下远程连接Android设备方法

    问题描述: android开发真机调试过程中,我们总是会重复卸载.安装这两个过程进行调试,通常都是用数据线连接电脑,能否摆脱数据线呢? 无线调试: 前提条件,电脑和手机必须处于同一局域网. 1.手机通 ...

  6. 树莓派(Raspberry Pi 3) 使用wifi模块连接网络

    树莓派3B内置了wifi和蓝牙模块,启动WIFI模块有两种方式,一种是图形界面,一种是命令行模式. 使用图形界面: 在桌面右上角的菜单栏里面选择wifi,输入密码就可以了. 使用命令行: 第一步:配置 ...

  7. 关于redis-windows环境下的一些配置：

    如果报错: The Windows version of Redis allocates a memory mapped heap for sharing with the forked proces ...

  8. snmp snmp4j的使用

    snmp4j的使用 一.什么是snmp及snmp4j? snmp是 Simple Network Management Protocol (简单网络管理协议)的简写. SNMP4J是一个用Java来实 ...

  9. help手册使用

    属性的方法名的一般规律: 设置的属性名: set+属性名 获取属性值: 1.如果是bool类型,可能是 is+属性名 或者 属性名 2.不是bool类型,就是属性名

  10. 读《JavaScript权威指南》笔记（四）--数组、函数

    一.数组 1.数组是值的有序集合.每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引.JavaScript数组是无类型的:数组元素可以是任意类型,并且同一个数组中的不同元素也可能有 ...