jquery滑动门的实现细节及心得

jquery给我们带来了太多的惊喜,有时候甚至让我们有些膨胀了,无休止地追求一些效果,不过随着幸运3d终端的不断升级,客户端的运行能力已经不再是什么问题,所以各种各样的Jquery特效真是如雨后春笋般涌现。

WORDPRESS博客一族中,侧边栏切换效果应该应用的很多,很多博客都用上了,不过万戈的博客加了滑动的效果,感觉更绚丽一点,经过大半天的研究,终于将该效果迁移到自己的博客上。

对于本文中提到js代码,css代码,html代码,在万戈的博文中已经做了介绍,我这里要做的是疏通js以及cs代码,做到知其然也知所以然,这样才能触类旁通,灵活应用,其实对于我来说,难点还是在于CSS,jquery代码无非是一个js库,没有什么难理解的,就是前端的布局我比较菜,研究起来有些耗时。

首先上php代码。

[php]

[/php]

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

然后是jquery代码

[javascript]$(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")
});
});[/javascript]

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

另外,在木木同学那里看到了精简版的js实现同样的效果,主要是用了jquery的index函数,个人觉得精简不代表有效率,index()进行搜索的过程当然是要耗时的,不过这种写法比较灵活。
[javascript]
$(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")
});
});[/javascript]

最后是关键的CSS布局代码

[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]

css要注意的地方狠多了:

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

滑动效果

小雪转中雪

18 Comments On jquery滑动门的实现细节及心得

  1. Pingback: jquery滑动门在wordpress的简单运用 | 壹品集

  2. avatar

    哪里滑了 哪里滑了

  3. avatar

    这不是老万的嘛?

  4. avatar

    没看懂哦,不过在Firefox下有错位。

  5. avatar

    我右上角也有一个使用滑动门的,你这个也会非常有特点的效果

  6. avatar

    嗯哼,做的不错呀,呵呵

  7. avatar

    css可以看懂,jquery代码一窍不通。

  8. avatar

    我又看到 很多。。神马。。。头在晕了。。。

  9. avatar

    有空折腾折腾去

  10. avatar

    谢谢博主了,秘密不再是秘密了,呵呵!

  11. avatar

    你好牛逼,我也想要这个效果

  12. avatar

    光光是qj高手阿,啥时候教教我。

    • avatar

      @夏星辰 我什么时候成了高手了啊,我是刚刚开始研究jquery,不像你啊,都自己搞主题了。

  13. avatar

    看来又有新的心得了,必须得看看啊,我才刚看这种文章,可以问下DIV是层是什么吗?

  14. avatar

    随机显示的是评论数量,最新和热门都是显示发布时间,这是故意的吗。。。。

    • avatar

      @恋鱼随风 这个用的是别人的代码,没怎么过问,只要列出来的文章是正确的就行了。

| 真的AJAX提交哦

发表评论