这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本篇文章主要分享了 javascript 实现导航栏中英文切换效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
思路:
ul 的高度为 li 的一半,ul{overflow:hidden}
li:hover{margin-top:-40px;}
- <!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 type="text/CSS">
- *{padding:0; margin:0;} li{ list-style:none; } a{ text-decoration:none;}
- .nav{ width:100%; height:40px; background:#222; margin-top:100px; overflow:hidden;}
- .list{ width:1000px; height:40px; margin:0 auto;} .list li{ float:left;}
- .list li a{ display:block; transition:0.3s;} .list b,.list i{ display:block;
- padding:0 30px; color:#aaa; line-height:40px; text-align:center;} .list
- b{ font-weight:100} .list i{ font-style:normal; background:#333; color:#fff;}
- .list a:hover{ margin-top:-40px;}
- </style>
- </head>
- <body>
- <div class="nav">
- <ul class="list">
- <li>
- <a href="#">
- <b>
- Index
- </b>
- <i>
- 首页
- </i>
- </a>
- </li>
- <li>
- <a href="#">
- <b>
- course
- </b>
- <i>
- 职业课程
- </i>
- </a>
- </li>
- <li>
- <a href="#">
- <b>
- study
- </b>
- <i>
- 就业学习
- </i>
- </a>
- </li>
- <li>
- <a href="#">
- <b>
- BBS
- </b>
- <i>
- 社区
- </i>
- </a>
- </li>
- <li>
- <a href="#">
- <b>
- JiKe+
- </b>
- <i>
- 发现+
- </i>
- </a>
- </li>
- </ul>
- </div>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0602/328464.html