仿天猫原创频道-品牌发展时间表-动画效果

最新推荐文章于 2019-06-11 16:16:24 发布

iteye_6992

最新推荐文章于 2019-06-11 16:16:24 发布

阅读量106

点赞数

分类专栏： jquery 文章标签： jquery ViewUI

jquery 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="jquery-1.8.3.js"></script>
<title>无标题文档</title>
<style>
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
#outDiv{
width:435px;
height:85px;
position:relative;
margin-top:20px;
margin-left:20px;
border:1px solid #000;
}
.up_content{
position:absolute;
width:135px;
height:60px;
}
.up_content p{
width:133px;
height:38px;
background-color:#999;
position:absolute;
opacity:0;
filter:alpha(opacity=0);
padding-left:2px;
padding-top:2px;
color:#fff;
}
.up_content b{
position:absolute;
border-width:10px;
border-style:solid dashed dashed dashed; //实现三角形效果
border-color:#999 transparent transparent transparent; //实现三角形效果
left:57px;
width:0;
bottom:0;
opacity:0;
filter:alpha(opacity=0);
}
#outDiv .active p, #outDiv .active b{
opacity:1;
filter:alpha(opacity=100);
}
.years{
position:absolute;
background:url(T1Gy2TXf0eXXalw5Hh-990-209.png) -125px -86px no-repeat;
background-color:#666;
width:433px;
height:35px;
top:50px;
}
.years li{
background-image:url(T1Gy2TXf0eXXalw5Hh-990-209.png);
background-color:#ddd;
background-repeat:no-repeat;
width:45px;
height:35px;
position:absolute;
border-left:2px dashed #fff;
border-right:2px dashed #fff;
filter:alpha(opacity=0);
opacity:0;
}
.years .year1{
left:43px;
background-position:-170px -122px;
}
.years .year2{
left:118px;
background-position:-244px -122px;
}
.years .year3{
left:192px;
background-position:-320px -122px;
}
.years .year4{
left:267px;
background-position:-394px -122px;
}
.years .year5{
left:342px;
background-position:-470px -122px;
}
.years .liActive{
filter:alpha(opacity=100);
opacity:1;
}
</style>
</head>

* 仿天猫原创频道-品牌发展时间表-动画效果

* 通过setTimeout实现轮动；

* ie8.ff.opera中测试可用，其他浏览器未测

* *****madeby keimon*******

* ******2013-01-10*********

*/
var timer;
var len = $('.up_content').length;
var i =0;
function t(i){
if(i==5){
i=0;
}
$('.up_content').removeClass('active');
$('ul.years li').removeClass('liActive');
$('.up_content').eq(i).addClass('active');
$('ul.years li').eq(i).addClass('liActive');
timer = setTimeout(function(){t(i)}, 2000);
i++;
}
t(i);

//当鼠标经过li标签时，取消计时器，当鼠标离开时，重新开启计时器

$('ul.years li').hover(function(){
   clearTimeout(timer);
   $('.up_content').removeClass('active');
   $('ul.years li').removeClass('liActive');
   var liHover = this;
   i = $('ul.years li').index(liHover);
   $('.up_content').eq(i).addClass('active');
   $('ul.years li').eq(i).addClass('liActive');
},function(){
   timer = setTimeout(function(){t(i)}, 2000);
})
</script>
</body>
</html>