北极寒流 » 网络资源 » jquery滑动门在wordpress的简单运用 - 2011.05.15

jquery滑动门在wordpress的简单运用

jquery滑动门在wordpress的简单运用。代码来自网络,收集备忘。

首先上php代码。
<div ID="moreposts" class="radius">
		<div ID="tab">
			<div ID="tabContentA">
                  <ul><?php some_posts( $orderby = 'date', $plusmsg = 'post_date', 10 );?></ul>
			</div>
			<div ID="tabContentB">
                   <ul><?php some_posts( $orderby = 'comment_count', $plusmsg = 'commentcount', 10 );?></ul>
			</div>
			<div ID="tabContentC">
                   <ul><?php some_posts( $orderby = 'rand', $plusmsg = 'post_date', 10 );?></ul>
			</div>
		</div>
		<div ID="switcher">
			<ul>
				<li ID="switcherA">最新的</li>
				<li ID="switcherB">热评的</li>
				<li ID="switcherC">随机的</li>
			</ul>
			<img width="11" height="7" src="<?php bloginfo('template_url'); ?>/images/switcher.gif">
		</div>
	</div>

到这里很容易看出基本思路,三个列表的hover事件控制着三个内容div层的交替显示,再加点jquery自带的显示效果就行了。

然后是jquery代码
$(document).ready(function(){
$("li#switcherA").hover(function(){
	//停止图片动画
	$("#switcher img").stop(true,true);
		//animate执行css属性集的自行以动画
		//下面一句代码的意思就是将三角形图片移到父级元素left=54px处。
		$("#switcher img").animate({left:"54px"},250);
		//A内容层淡入
		$("#tabContentA").fadeIn("slow");
		//B内容层淡出
		$("#tabContentB").fadeOut("fast");
		//C内容层淡出
		$("#tabContentC").fadeOut("fast")
	});
	$("li#switcherB").hover(function(){
		$("#switcher img").stop(true,true);
		$("#switcher img").animate({left:"150px"},250);
		$("#tabContentA").fadeOut("fast");
		$("#tabContentB").fadeIn("slow");
		$("#tabContentC").fadeOut("fast")
	});
	$("li#switcherC").hover(function(){
		$("#switcher img").stop(true,true);
		$("#switcher img").animate({left:"246px"},250);
		$("#tabContentA").fadeOut("fast");
		$("#tabContentB").fadeOut("fast");
		$("#tabContentC").fadeIn("slow")
	});
});

无非就是用到了juery封装好的animate,stop,fadeIn,fadeOut四个函数来实现动画效果,代码加了注释,应该非常容易理解。

另外,在木木同学那里看到了精简版的js实现同样的效果,主要是用了jquery的index函数,个人觉得精简不代表有效率,index()进行搜索的过程当然是要耗时的,不过这种写法比较灵活。

$(document).ready(function(){
	$("#switcher li").hover(function () {
		var i=$('#switcher li').index(this),l=i*96+75;
		$("#switcher span").stop(true,true).animate({left:l},250);
		$("#tab").children().eq(i).fadeIn("slow").siblings().fadeOut("fast")
	});
});
最后是关键的CSS布局代码
/*滑动*/
#moreposts {
	width: 308px;
	height: 280px;
	float: right;
	border: 1px solid #C8C8C8;
	position: relative;
	color: #646464;
	margin-bottom:5px;
	background-color: #F6F6F6;
}
#tab{
	height:240px;
	padding-left:10px;
	padding-top:10px;
	padding-right:10px;
	padding-bottom:10px;
	overflow:hidden;
}
#tab div{
	height:260px;
	overflow:hidden;
}
#tab ul li{
	width:280px;
	line-height:18px;
	text-align:right;
	font:12px SimSun;
	margin-bottom:4px;
}
#tab ul li a{
	width:200px;
	height:18px;
	float:left;
	text-align:left;
	overflow:hidden;
}
#tabContentB,#tabContentC{
	/* 非首块内容区域默认不显示 */
	display:none;
}
#switcher ul{
	width:288px;
	position:absolute;
	border-top:1px solid #646464;
	bottom:2px;
	padding-top:11px;
	margin:0 10px;
	font-size:1.2em;
	display: block;
}
#switcher ul li{
	width:96px;
	line-height:17px;
	text-align:center;
	float:left;
	cursor:pointer;
}
#switcher img {
	position: absolute;
	bottom: 39px;
	left: 54px;
}
.radius{
	border-radius:5px;
}

css要注意的地方狠多了:

  • 滑动区域的总宽度不能超过侧边栏宽度310,所以定义了moreposts的宽度为308,再加上边框1*2px,正好等于310px;
  • 三个内容层的高度一定要占满他们父层tab的高度,否则在动画切换的过程中,会出现两个层错乱的情况,道理很简单,如果内容层小于其外层容器,那么被隐藏的第二个内容层在渐渐显示(而且是移动的)的时候就会被看到,加上第一个内容层还没有退去,就会显得凌乱。
  • 最后就是下面的移动图片,自己好好计算一下相对位置就行了,img的bottom:39基本等于li的行高17+li的magin-bottom10+ul的bottom2+ul的padding-top: 11;

原文:http://www.loststop.com/archive/soft-and-internet/3457.html