jQuery中的事件和动画以及视频展示效果实例

经过这几天学习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中的事件和动画以及视频展示效果实例的更多相关文章

jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
jQuery中的事件与动画<思维导图>
Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...
第三章 jQuery中的事件与动画
第三章jQuery中的事件与动画一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...
Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
【jQuery基础学习】03 jQuery中的事件与动画
关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...
JQuery制作网页—— 第七章 jQuery中的事件与动画
1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...
第4章 jQuery中的事件和动画
4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...
第3章 jquery中的事件和动画
一,jquery中的事件 (1).执行时机 $(document).ready()和window.onload方法有相似的功能,但是在执行时机方面有区别,windwo.onload在网页中所有的元素包 ...

随机推荐

Mybatis避免出现语法错
在使用MyBatis的时候,可能会看起来没有问题,但是代码运行的时候出现意想不到的错误. 看如下代码: <update id="updateByPrimaryKeySelective& ...
数据库（学习整理）----6--Oracle如何快速备份和多次备份数表数据
1.说明: 这里假设一种应用场景! 假设,银行系统中有大量的数据需要及时备份,如何才能快速高效呢! 条件需求: (1).不能设置同步锁(设置的会影响银行正常业务进行!使得银行系统处于维护状态,这是不 ...
Samy Kamka、吴石黑客信息
Samy Kamka 10年前他就曾成功利用AJAX蠕虫攻击了当时最火的社交网站MySpace.com,2009年的Twitter蠕虫事件和2011年新浪微博蠕虫事件都沿袭了他当时的方法. 2005年 ...
ArcGIS Server GP服务使用常见错误总结
ArcGIS GP服务问题列表输入参数错误在使用GP服务时,从创建模型到发布服务,再到调用服务,整个过程都需要注意输入参数和输出参数的问题.GP服务支持的输入和输出参数可详见 http://hel ...
javascript js获取url及url参数解析
js获取url及url参数解析一.获取url: var url=window.location.herf; 二.url参数解析: function GetRequest() { var url = ...
MySQL - ODBC安装错误问题！
MySQL的ODBC安装时候可能会出错,主要原因是缺少VC支持库,需要2010版本的VC支持库!!X86和X64分别对应MySQL对应的ODBC,不能安装一个两个都搞定,如果需要安装两个ODBC驱动, ...
vue 路由里面的 hash 和 history
对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 —— 改变视图的同时不会向后端发出请求. ...
SP839 Optimal marks（最小割）
SP839 Optimal marks(最小割) 给你一个无向图G(V,E). 每个顶点都有一个int范围内的整数的标记. 不同的顶点可能有相同的标记.对于边(u,v),我们定义Cost(u,v)= ...
Python之运算符以及基本数据类型的object
一.运算符 1.算术运算符 % 求余运算 ** 幂-返回x的y次幂 // 取整数-返回商的整数部分,例:9//2输出结果是4 2.比较运算符 == 等于 != 不等于 <> 不等于 ...
luogu2658 GCD(莫比乌斯反演/欧拉函数)
link 给定整数N,求1<=x,y<=N且Gcd(x,y)为素数的数对(x,y)有多少对. 1<=N<=10^7 (1)莫比乌斯反演法发现就是YY的GCD,左转YY的GCD ...

jQuery中的事件和动画 以及视频展示效果实例

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

随机推荐

热门专题

jQuery中的事件和动画以及视频展示效果实例

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