<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>jquery tab选项卡 ajax选项卡 静态选项卡 鼠标点击选项卡 鼠标滑过选项卡</title>
<style type="text/css">
*{margin:0padding:0list-style-type:none}
a,img{border:0}
body{font:12px/180% Arial, Helvetica, sans-serif,"宋体"}
a{color:#333text-decoration:none}
a:hover{color:#3366cctext-decoration:underline}
h2{font-size:14pxtext-align:center}
/* tabbox */
.tabbox{width:432pxmargin:20px autoposition:relativeheight:171pxoverflow:hidden}
.tabbox .tabbtn{height:30pxbackground:url(images/tabbg.gif) repeat-xborder-left:solid 1px #dddborder-right:solid 1px #ddd}
.tabbox .tabbtn li{float:leftposition:relativemargin:0 0 0 -1px}
.tabbox .tabbtn li a,.tabbox .tabbtn li span{display:blockfloat:leftheight:30pxline-height:30pxoverflow:hiddenwidth:108pxtext-align:centerfont-size:12pxcursor:pointer}
.tabbox .tabbtn li.current{border-left:solid 1px #d5d5d5border-right:solid 1px #d5d5d5border-top:solid 1px #c5c5c5}
.tabbox .tabbtn li.current a,.tabbox .tabbtn li.current span{border-top:solid 2px #ff6600height:27pxline-height:27pxbackground:#fffcolor:#3366ccfont-weight:800}
.tabbox .loading{height:40pxwidth:432pxtext-align:centerposition:absoluteleft:0top:120px}
.tabbox .tabcon{padding:10pxborder-width:0 1px 1px 1pxborder-color:#dddborder-style:solid}
.tabbox .tabcon li{height:24pxline-height:24pxoverflow:hidden}
.tabbox .tabcon li span{margin:0 10px 0 0font-family:"宋体"font-size:12pxfont-weight:400color:#ddd}
</style>
</head>
<body>
<h2>静态 选项卡 滑过事件</h2>
<div class="tabbox" id="statetab">
<ul class="tabbtn">
<li class="current"><a href="#">jquery 特效</a></li>
<li><a href="#">javascript 特效</a></li>
<li><a href="#">div+css 教程</a></li>
<li><a href="#">HTML5 特效</a></li>
</ul><!--tabbtn end-->
<div class="tabcon">
<ul>
<li><span>▪</span><a href="#" title="jquery 图片特效插件 异步读取图片TOP排行榜特效">jquery 图片特效插件 异步读取图片TOP排行榜特效</a></li>
<li><span>▪</span><a href="#" title="jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器">jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器</a></li>
<li><span>▪</span><a href="#" title="jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单">jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单</a></li>
<li><span>▪</span><a href="#" title="jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换">jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换</a></li>
<li><span>▪</span><a href="#" title="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动">jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动</a></li>
</ul>
</div><!--tabcon end-->
<div class="tabcon">
<ul>
<li><span>▪</span><a href="#" title="javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值">javascript jscolor colorpicker js颜色选择器插件10多种调用颜色方法与取值</a></li>
<li><span>▪</span><a href="#" title="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
<li><span>▪</span><a href="#" title="javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></li>
<li><span>▪</span><a href="#" title="js多功能选项卡插件 选项卡自动切换内容图片延迟加载">js多功能选项卡插件 选项卡自动切换内容图片延迟加载</a></li>
<li><span>▪</span><a href="#" title=" javascript滚动图片按钮控制图片左右自动滚动">javascript滚动图片按钮控制图片左右自动滚动</a></li>
</ul>
</div><!--tabcon end-->
<div class="tabcon">
<ul>
<li><span>▪</span><a href="#" title="div+css制作非常实用的24款分页页码css代码">div+css制作非常实用的24款分页页码css代码</a></li>
<li><span>▪</span><a href="#" title="用div+css3美化制作动画导航特效鼠标滑过动画显示">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
<li><span>▪</span><a href="#" title="用div+css制作纯CSS下拉菜单，兼容IE6 IE7 IE8及以上 Firefox">用div+css制作纯CSS下拉菜单，兼容IE6 IE7 IE8及以上 Firefox</a></li>
<li><span>▪</span><a href="#" title="CSS如何定位工程">CSS如何定位工程</a></li>
<li><span>▪</span><a href="#" title="用div+css制作一个CSS3的泡泡动画按钮非常漂亮">用div+css制作一个CSS3的泡泡动画按钮非常漂亮</a></li>
</ul>
</div><!--tabcon end-->
<div class="tabcon">
<ul>
<li><span>▪</span><a href="#" title="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果">jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果</a></li>
<li><span>▪</span><a href="#" title="制作CSS3和HTML5的一个单页网站模板">制作CSS3和HTML5的一个单页网站模板</a></li>
<li><span>▪</span><a href="#" title="jquery 幻灯片切换应用一个HTML5的幻灯片">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
<li><span>▪</span><a href="#" title="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
</ul>
</div><!--tabcon end-->
</div><!--tabbox end-->
<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript">
//ajax 选项卡
$('#ajaxtab .tabbtn li a').click(function(){
var thiscity = $(this).attr("href")
$("#ajaxtab .loading").ajaxStart(function(){
$(this).show()
})
$("#ajaxtab .loading").ajaxStop(function(){
$(this).hide()
})
$('#ajaxtab .tabcon').load(thiscity)
$('#ajaxtab .tabbtn li a').parents().removeClass("current")
$(this).parents().addClass("current")
return false
})
$('#ajaxtab .tabbtn li a').eq(0).trigger("click")
//tab plugins 插件
$(function(){
//选项卡鼠标滑过事件
$('#statetab .tabbtn li').mouseover(function(){
TabSelect("#statetab .tabbtn li", "#statetab .tabcon", "current", $(this))
})
$('#statetab .tabbtn li').eq(0).trigger("mouseover")
//选项卡鼠标滑过事件
$('#clicktab .tabbtn li').click(function(){
TabSelect("#clicktab .tabbtn li", "#clicktab .tabcon", "current", $(this))
})
$('#clicktab .tabbtn li').eq(0).trigger("click")
function TabSelect(tab,con,addClass,obj){
var $_self = obj
var $_nav = $(tab)
$_nav.removeClass(addClass),
$_self.addClass(addClass)
var $_index = $_nav.index($_self)
var $_con = $(con)
$_con.hide(),
$_con.eq($_index).show()
}
})
</script>
</body>
</html>
创建动画序列，需要使用animation属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由 @keyframes规则实现，具体情况参见使用keyframes定义动画序列小节部分。transition也可实现动画。transition强调过渡，是元素的一个或多个属性发生变化时产生的过渡效果，同一个元素通过两个不同的途径获取样式，而第二个途径当某种改变发生（如hover）时才能获取样式，这样就会产生过渡动画。
一、实现CSS3无限循环动画代码示例。
代码如下：
CSS:
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg)
border:5px solid red
}
50%{
-webkit-transform: rotate(180deg)
background:black
border:5px solid yellow
}
100%{
-webkit-transform: rotate(360deg)
background:white
border:5px solid red
}
}
.loading{
border:5px solid black
border-radius:40px
width: 28px
height: 188px
-webkit-animation:gogogo 2s infinite linear
margin:100px
}
扩展资料实现动画无限循环所需要的CSS属性说明：
1、infinite
在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction
2、animation-name
规定需要绑定到选择器的 keyframe 名称。
3、animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
4、animation-timing-function
规定动画的速度曲线。
5、animation-delay
规定在动画开始之前的延迟。
6、animation-iteration-count
规定动画应该播放的次数。
7、animation-direction
规定是否应该轮流反向播放动画。
