以下是 jQ手机排行榜标题滑动切换代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQ手机排行榜标题滑动切换代码</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/j-accordin.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.accordion').jaccordion();
});
</script>
</head>
<body>
<div>
<div class="accordion_container">
<div class="buttomtitle"></div>
<div class="accordion">
<div class="first current">
<div class="content">
<img src="images/shouji_buttom1.jpg" />
<div class="word" >
<p>价格：<em style="color:#F00;"><strong>￥6088</strong></em></p><br />
<p><a href="#">国强宏利机吾大世</a></p>
</div>
</div>
<div class="tab">
<span><img src="images/tea1.jpg" /></span>
<strong><a href="#" target="_blank">苹果 iPhone 6 Plus</a></strong>
</div>
</div>
<div class="second">
<div class="content second">
<a href="#" target="_blank"><img src="images/shouji_buttom2.jpg" /></a>
<div class="word" >
<p>价格：<em style="color:#F00;"><strong>￥2999</strong></em></p><br />
<p><a href="#">盛旺鸿运电脑经营</a></p>
</div>
</div>
<div class="tab">
<span><img src="images/tea2.jpg" /></span>
<strong><a href="#" target="_blank">OPPO R5</a></strong>
</div>
</div>
<div class="third">
<div class="content third">
<a href="#" target="_blank"><img src="images/shouji_buttom3.jpg" /></a>
<div class="word" >
<p>价格：<em style="color:#F00;"><strong>￥4999</strong></em></p><br />
<p><a href="#">八一数码手机专营</a></p>
</div>
</div>
<div class="tab">
<span><img src="images/tea3.jpg" /></span>
<strong><a href="#" target="_blank">索尼Xperia Z3</a></strong>
</div>
</div>
<div class="four">
<div class="content four">
<a href="#" target="_blank"><img src="images/shouji_buttom4.jpg" /></a>
<div class="word" >
<p>价格：<em style="color:#F00;"><strong>￥5399</strong></em></p><br />
<p><a href="#">八一数码手机专营</a></p>
</div>
</div>
<div class="tab">
<span><img src="images/tea4.jpg" /></span>
<strong><a href="#" target="_blank">三星GALAXY Note4</a></strong>
</div>
</div>
<div class="file">
<div class="content file">
<a href="#" target="_blank"><img src="images/shouji_buttom5.jpg" /></a>
<div class="word" >
<p>价格：<em style="color:#F00;"><strong>￥999</strong></em></p><br />
<p><a href="#">宏达手机旗舰店</a></p>
</div>
</div>
<div class="tab">
<span><img src="images/tea5.jpg" /></span>
<strong><a href="#" target="_blank">中兴V5 Max</a></strong>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS代码(j-accordin.min.js):
(function($){
$.fn.jaccordion=function(){
$(this).each(function(){
var c=$(this).children().length;
var d=Array(c-1);
var e=Array(c-1);
$(this).children().each(function(a){
if(a==(c-1))return;
e[a]=$(this).position().top;
d[a]=$(this).position().top-$(this).children().outerHeight()}
);
var f=this;
$(this).children().mouseenter(function(){
var a=$(f).children().index(this);
var b=$(f).children().index($(f).children('[class~="current"]'));
if(!$(this).hasClass('current')){
if(b>a){
for(var i=b-1;
i>=a;
i--){
$($(f).children().get(i)).stop(false,false);
to_top=e[i]+'px';
$($(f).children().get(i)).animate({
top:to_top}
)}
}
else if(b<a){
for(var i=b;
i<a;
i++){
$($(f).children().get(i)).stop(false,false);
to_top=d[i]+'px';
$($(f).children().get(i)).animate({
top:to_top}
)}
}
$(f).children().removeClass('current');
$(this).addClass('current')}
}
)}
)}
}
)(jQuery);
CSS代码(style.css):
*{padding:0px;margin:0px;}
.buttomtitle{width:280px;height:50px;background:url(../images/toptitle.png) no-repeat;background-position:bottom;background-position:left;}
/* accordion_container */
.accordion_container{margin:0 auto;width:280px;}
.accordion_container .content,.accordion_container .tab{width:260px;}
.accordion_container .tab{background:#fafafa;height:30px;float:left;}
.accordion_container .tab a:hover{color:#F00;text-decoration:underline;}
.accordion_container .tab a{color:#4B7196;text-decoration:none;}
a{color:inherit}
.accordion_container .tab span{float:left;margin-top:10px;}
.accordion_container .tab strong{margin-left:15px;float:left;margin-top:10px;}
.accordion_container .tab{padding:10px;}
.accordion_container .content{width:280px;height:120px;width:280px;}
.accordion_container .content img{display:block;width:100px;height:100px;float:left;margin:10px;}
.accordion_container .first{z-index:5;top:0px;}
.accordion_container .second{z-index:4;top:49px;}
.accordion_container .third{z-index:3;top:98px;}
.accordion_container .four{z-index:2;top:147px;}
.accordion_container .file{z-index:1;top:196px;}
.accordion{position:relative;overflow:hidden;height:400px;}
.accordion > div{position:absolute;left:0px;border-left:1px solid #aaa;border-right:1px solid #aaa;left:-1px;cursor:pointer;background-color:#FFF;width:280px;}
.hide{}
.word{width:130px;height:80px;float:right;margin-top:25px;margin-right:20px;text-decoration:none;}
.word p a{color:#4B7196;line-height:20px;text-decoration:none;}
.word p a:hover{color:#F00;text-decoration:none;}
分享到QQ
分享到微博
微信扫一扫
