<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>
transform 不会使DOM脱离文档流，当通过 translateX 等属性值移动了元素后，它仍然占据原来的位置。好处是， transform 制作的动画会直接进入合成阶段，避开重排重绘，可以通过 Performance 录制面板来查看 transform 动画的效率。
MDN animation
深入浅出CSS动画
MDN animate()
监听 CSS animation 动画的事件:
这些监听事件对 animate() 是无效的。
页面顶部经常会见到水平无限轮播的公告。
由于轮播的内容是动态的，可能很多，也可能很少，如果公告内容的宽度没有超过最大宽度限制，那么就不应该轮播，如果超过了，则发起轮播。
假设我们永远只有一条最新的公告
原理：当一次动画执行结束时，影子内容的头部刚好对准轮播内容的初始位置，那么下次动画开始时，轮播内容将重新回到初始位置，由于影子内容与轮播内容相同，那么就给人造成一种无限轮播的错觉。
逻辑实现：父元素设置了 overflow: hidden ，又想要获取父元素、子元素的真实宽度，那么可以通过 scrollWidth 获取。
兼容性：如果不支持 animate() ，那么我们可以动态创建 <style>+ @keyframes ，插入 <head>, 但也要记得移除。
要创建 CSS3 动画，你需要了解 @keyframes 规则。@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
