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

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>视频展示效果实例</title>
  6. <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>  <!--引入jQuery -->
  7. <script type="text/javascript" >
  8. $(function (){
  9.  var page=1;                                   //初始化当前的版面数为1
  10. 	 var i=4;                                  // 每个版面有四张图片
  11. 	 $("span.next").click(function(){         //为按钮绑定点击事件
  12. 		  var $parent=$(this).parents("div.v_show");   //根据当前元素找到父元素     因为按钮和视频展示区是一个祖先元素，所以可以通过按钮来找到视频展示区
  13. 		  var $v_show= $parent.find("div.v_content_list");  //找到视屏内容展示区域
  14. 		  var $v_content=$parent.find("div.v_content");   //找到视屏内容展示区外围的div
  15.  
  16. 		  var $v_width=$v_content.width();           //获取视频展示区的总宽度
  17. 		  var $len=$v_show.find("li").length;        // 总的视屏图片区
  18. 		  var $page_count= Math.ceil($len/i);
  19. 		                                              // 一共有几个版面 只要不是整数就往大的整数取
  20.           if(!$v_show.is(":animated")){             //判断当前元素是否有动画 ，没有则添加新的动画
  21.  
  22. 			  if(page==$page_count){                //到达最后一个版面  如果再向后就跳到第一个版面
  23. 				  $v_show.animate({left: '15px'},"slow")    
  24.  
  25. 				  page=1;                          //通过改变left值，跳转到第一版面
  26. 			  }else{
  27. 				  $v_show.animate({left: '-='+$v_width},"slow")
  28.  
  29. 				  page++;                           //通过left值到达每次换一个版面
  30. 			  }
  31. 			   $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
  32. 		     }   //  为了可以让高亮效果随着版面转换   我们要通过版面数来实现   因为版面的初始值是1开始，而高亮元素是从0开始所以在对应版面数时-1，当前元素添加高亮属性“current”，同辈下的元素移除样式“current”。
  33. 	    });
  34. 		 $("span.prev").click(function(){
  35. 		  var $parent=$(this).parents("div.v_show");
  36. 		  var $v_show= $parent.find("div.v_content_list");
  37. 		  var $v_content=$parent.find("div.v_content");
  38.  
  39. 		  var $v_width=$v_content.width();
  40. 		  var $len=$v_show.find("li").length;
  41. 		  var $page_count= Math.ceil($len/i);
  42.           if(!$v_show.is(":animated")){
  43.  
  44. 			  if(page==1){
  45. 				  $v_show.animate({left: "-="+$v_width*($page_count-1)},"slow")
  46.  
  47. 				  page=$page_count;
  48. 			  }else{
  49. 				  $v_show.animate({left: '+='+$v_width},"slow")
  50.  
  51. 				  page--;
  52. 			  }
  53. 			   $parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
  54. 		     }
  55. 	    });
  56. });
  57. </script>
  58. <style>
  59. *{margin: 0; padding: 0;}
  60. body{ font: normal 16px/1.5em  "微软雅黑", Verdana, Geneva, sans-serif;}
  61. ul,li{ list-style: none;}
  62. a{ text-decoration: none;}
  63. img{ border: none;}
  64. em{ font-style: normal;}
  65. .fl{ float: left;}
  66. .fr{ float: right;}
  67. .v_show{ width: 502px; height: 198px; border: 1px solid red; background: #000; margin: 50px auto; overflow: hidden;}
  68. .v_caption{ float: left; background: #ccc; color: #000; height: 40px; width: 100%; position: relative; overflow: hidden;}
  69. .cartoon { font-size: 16px; line-height: 40px; text-indent: 15px; padding-right: 20px;  }
  70. .v_caption .heightlight_tip{  width: 60px;}
  71. .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;}
  72. .v_caption .heightlight_tip .current{ background: url(../img/hover.png) no-repeat center; }
  73. .change_btn{ width: 290px; }
  74. .change_btn .prev{ float: left; background: url(../img/prev.gif) no-repeat center ; width: 20px; height: 20px; margin-top: 10px;}
  75. .change_btn .next{ float: left; background: url(../img/next.gif) no-repeat center; width: 20px; height: 20px; margin: 10px 0 0 1px;}
  76. .v_caption em{ margin-top: 10px; text-align: center;  position: absolute; top: 0; right: 15px;}
  77. .v_caption em a{ color: #000; text-decoration: none; line-height: 20px; display: block; font-size: 14px;}
  78. .v_caption em a:hover{ color: #f60;}
  79. .v_content{ clear: both; width: 502px; height: 145px; padding: 15px 15px 0 15px; overflow: hidden; position: relative; }
  80. .v_content_list{ display: block; position: absolute; left: 15px; top: 15px;}
  81. .v_content_list li{ float: left; width: 99px; height: 143px; margin-right: 25px; overflow: hidden; position: relative;}
  82. .v_content_list li a{ display: block; width: 99px; height: 99px;}
  83. .v_content_list .info{ position: absolute; left:0; top:103px;}
  84. .v_content_list .info a { color: #fff; width: 99px; height: 16px;}
  85. .v_content_list .info a:hover{ color: #f60;}
  86. .v_content_list .info span{ color: #fff; font-size: 12px;}
  87. </style>
  88. </head>
  89. <body>
  90. <div class="v_show">
  91.     <div class="v_caption">
  92.     	<h2 class="cartoon fl" title="卡通动漫">卡通动漫</h2>
  93.         <div class="heightlight_tip fl">
  94.         	<span class="current"></span><span></span><span></span><span></span>
  95.         </div>
  96.         <div class="change_btn fl">
  97.         	<span class="prev"></span>
  98.             <span class="next"></span>
  99.         </div>
  100.         <em class="fl"><a href="#">更多>></a></em>
  101.     </div>
  102.     <div class="v_content">
  103.     	<div class="v_content_list">
  104.             <ul>
  105.                 <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>
  106.                 <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>
  107.                 <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>
  108.                 <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>
  109.  
  110.                  <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>
  111.                 <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>
  112.                 <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>
  113.                 <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>
  114.                 <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>
  115.                 <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>
  116.                 <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>
  117.  
  118.                  <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>
  119.                 <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>
  120.                 <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>
  121.  
  122.             </ul>
  123.         </div>
  124.     </div>
  125. </div>
  126. </body>
  127. </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. Entity Framework Tutorial Basics（11）：Code First

    Code First development with Entity Framework: Entity Framework supports three different development ...

  2. Entity Framework Tutorial Basics（6）：Model Browser

    Model Browser: We have created our first Entity Data Model for School database in the previous secti ...

  3. 《Effective Java》第4章 类和接口

    第13条:使类和成员的可访问性最小化 第一规则很简单:尽可能地使每个类或者成员不被外界访问.换句话说.应该使用与你正在编写的软件的对应功能相一致的.尽可能最小的访问级别. 对于顶层的(非嵌套的)类和接 ...

  4. 封闭解(Closed-form solution)、解析解(Analytical solution)、数值解(Numerical solution) 释义

    转俞夕的博客 (侵删) 1 解析解 解析解(Analytical solution) 就是根据严格的公式推导,给出任意的自变量就可以求出其因变量,也就是问题的解,然后可以利用这些公式计算相应的问题.所 ...

  5. WP8.1&UWP手机设备对状态栏操作

    改UWP和WP8.1手机设备的状态栏.首先先说较为普遍的WP8.1设备:首先添加引用:using Windows.UI.ViewManagement;其次就可以使用StatusBar了,它提供了以下方 ...

  6. 【转】在Asp.net前台和后台弹出提示框

    源地址:http://blog.sina.com.cn/s/blog_5200dd680100mkk0.html

  7. [A/C 2007] 数据备份（网络流，堆）

    [A/C 2007] 数据备份(网络流,堆) 给你N各点的位置和K条链,需要用这些链把2K个点连起来,使得链的总长最短.可以随意选择要链的点.n=100000. 这道题居然可以用堆-- 首先,不能把区 ...

  8. bzoj1560：[JSOI2009]火星藏宝图（斜率优化）

    题目描述 在火星游玩多日,jyy偶然地发现了一张藏宝图.根据藏宝图上说法,宝藏被埋藏在一个巨大的湖里的N个岛上(2<=N<=200,000).为了方便描述,地图把整个湖划分成M行M列(1& ...

  9. Activiti工作流开发准备(一)

    一:开发工作流需要配合所画流程图以及根据流程图所生成的.bpmn文件进行开发,Activiti提供了eclipse插件,开发人员可以通过插件直接绘画出业务流程图. 二:eclipse插件安装 1.打开 ...

  10. react 中文文档案例一 （倒计时）

    1.函数试组件 import React from 'react'; import ReactDOM from 'react-dom'; function Clock(props){ return( ...