斜角导航及滑动门的延伸

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

之前有在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>

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

Moondy 发表于 2009-11-15 8,720 Views | 类别: Xhtml/Css

6条留言立即发表评论

#1hzhjun @ 2009-11-25 11:40 回复

在BI上看到你的文章，很不错！
你写的东西都很实用，这也是我们作为前端所应该具备的，从工作中来，再回到工作中去。。。
#2hzhjun @ 2009-11-25 11:56 回复

貌似第二个实例中丢掉了结束标记。
- moondy @ 2009-11-25 13:45 回复
  
  啊，是多了一个结束标签，多谢提醒啦！
#3moondy @ 2009-12-2 15:28 回复
- moondy @ 2009-12-2 21:55 回复
  
  是哪位在冒充俺的名号哇
#4狐狸 @ 2009-12-20 20:59 回复

有段时间没来了，博客变化不小啊，很个性的博客。