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> 
<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>

上面的效果图

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

posted @ 2016-03-27 10:09 进军码农阅读(1664) 评论(0) 编辑收藏举报

刷新页面返回顶部

进军码农

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

公告

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