滑动门

打有‘滑动门’标签的日志

斜角导航及滑动门的延伸 (2009-11-15)

类别: Xhtml/Css | 9,418 Views| 7条评论

下面的这两个例子都跟滑动门有关，应该都算滑动门的延伸。

之前有在BI上看到有朋友发过斜角导航，觉得可以有更好的解决方案。但最近都很忙，两个月没有来更新内容了，今天抽了点时间写了个DEMO发上来，自己写的，如果跟哪位高人有雷同的话那纯属巧合咯。也不说太多了，直接发例子了，方法很简单，一看就明白的。有一点要注意了，图片的透明部分需要花点时间来处理了。

提示：你可以先修改部分代码再运行。

其实当真正理解到方法之后，就可以延伸出很多效果出来。比如说下面的这个步骤导航（名字是我随便起的），是我在某个实际项目中用到的一个效果，给大家参考下，其实还能再优化一些的。

<!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=utf-8" /> <title>无标题文档</title> <style> .help_step_box {background:#f1f7e4; height:55px; overflow:hidden; border-top:1px solid #FFF;} .help_step_item {float:left; height:55px; line-height:55px; padding:0 25px 0 45px; cursor:pointer; position:relative; font-size:14px; font-weight:bold;} .help_step_num {width:19px; height:19px; line-height:19px; position:absolute; text-align:center; top:18px; left:20px; font-size:16px; font-weight:bold; background:url(http://www.moondyzone.com/wp-content/uploads/2009/11/num.png); color:#156600;} .help_step_set {background:#27a806; color:#FFF;} .help_step_set .help_step_left {width:8px; height:55px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/11/bak2.jpg) left top no-repeat; position:absolute; left:0; top:0;} .help_step_set .help_step_right {width:8px; height:55px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/11/bak2.jpg) left bottom no-repeat; position:absolute; right:-8px; top:0;} </style> <body> <div class="help_wrap"> <div class="help_step_box fa"> <div onclick="javascript:go_fa_step(1)" id="fa_1" class="help_step_item"> <div class="help_step_num">1</div> 拆开方便面 <div class="help_step_right"></div> </div> <div onclick="javascript:go_fa_step(2)" id="fa_2" class="help_step_item help_step_set"> <div class="help_step_left"></div> <div class="help_step_num">2</div> 取出调料包 <div class="help_step_right"></div> </div> <div onclick="javascript:go_fa_step(3)" id="fa_3" class="help_step_item" > <div class="help_step_left"></div> <div class="help_step_num">3</div> 加热水泡3~5分钟 <div class="help_step_right"></div> </div> <div onclick="javascript:go_fa_step(4)" id="fa_4" class="help_step_item" > <div class="help_step_left"></div> <div class="help_step_num">4</div> 加入调料并搅拌 <div class="help_step_right"></div> </div> <div onclick="javascript:go_fa_step(5)" id="fa_5" class="help_step_item"> <div class="help_step_left"></div> <div class="help_step_num">5</div> 可以吃了 </div> </div> </div> <script language="javascript"> function go_fa_step(id){ for (i=1; i<6; i++){ document.getElementById("fa_"+i).className='help_step_item'; } document.getElementById("fa_"+id).className+=" help_step_set" } </script> </body></html>

提示：你可以先修改部分代码再运行。

CSS滑动门技术详解 (2009-4-29)

类别: Xhtml/Css | 2,289 Views| 3条评论

其实CSS滑动门这个概念早在几年前就已经出现了，只是近来年被提得比较多而已。但是常常有人把它跟选项卡效果混淆在一起，特别是一些新手朋友，所以我在这里写篇详解，希望能有所帮助。

说起来滑动门也不是什么高深的技术，也只是CSS的一种手法罢了。它是利用背景图像的交迭以及相互滑动来实现一些效果。最常见的就是圆角的导航了，我们可以把一左一右两个圆角背景想像成两扇可以滑动的门，他们可以滑到一起并交迭以显示较少的内容，也可以相互滑开以显示较多的内容，就如下图所示：

在以往的一些教程中，都喜欢把背景图切成一宽一窄两部分进行拼接，其实一张图就足矣。

在这里，我们只用了<a>跟<span>两个标签，样式可以定义三种状态，可以说是最简单的一种方式了。此为本民工原创，如有雷同纯属巧合，转载请注明出处。

<!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=utf-8" /> <title>无标题文档</title> <style> body {font-size:12px;} .nav {margin:0 auto; text-align:center; font-weight:bold; border-bottom:3px solid #579cc6;} .nav a {display:inline-block; margin:0 -4px; height:25px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) left bottom no-repeat; padding-left:15px; color:#666; text-decoration:none; cursor:pointer;} .nav a span {display:inline-block; height:25px; line-height:25px; background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) right bottom no-repeat; padding-right:15px;} .nav a:hover {background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) left top no-repeat; color:#FFF;} .nav a:hover span {background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) right top no-repeat;} .nav a.set {background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) left top no-repeat; color:#FFF; } .nav a.set span {background:url(http://www.moondyzone.com/wp-content/uploads/2009/04/bg-index.jpg) right top no-repeat;} </style> </head> <body> <div class="nav"> <a class="set" href="http://www.moondyzone.com/css/285.html"><span>首页</span></a> <a href="http://www.moondyzone.com/css/285.html"><span>分类一</span></a> <a href="http://www.moondyzone.com/css/285.html"><span>分类分类</span></a> <a href="http://www.moondyzone.com/css/285.html"><span>还可以再长一点</span></a> <a href="http://www.moondyzone.com/css/285.html"><span>欢迎</span></a> <a href="http://www.moondyzone.com/css/285.html"><span>我的博客</span></a> </div> </body> </html>

提示：你可以先修改部分代码再运行。

Moondy’s Zone
一位IT民工的点点滴滴…… WEB前端、网页重构、AS3

打有‘滑动门’标签的日志

斜角导航及滑动门的延伸 (2009-11-15)

CSS滑动门技术详解 (2009-4-29)

分类目录

最近文章

标签云

最新评论

加油站

友情链接

Moondy’s Zone 一位IT民工的点点滴滴…… WEB前端、网页重构、AS3

打有‘滑动门’标签的日志

斜角导航及滑动门的延伸 (2009-11-15)

CSS滑动门技术详解 (2009-4-29)

分类目录

最近文章

标签云

最新评论

加油站

友情链接

Moondy’s Zone
一位IT民工的点点滴滴…… WEB前端、网页重构、AS3