导航栏背景图片切换

2012-03-19 11:03:22| 分类： JQuery | 标签：jquery sharepoint 导航栏背景切换 |字号订阅

导航栏背景图片的切换，使用CSS或者JS。
下面是用使用JQuery来实现。
<ul class="topNavigation">             <li><a title="部门A" href="#" target="_blank">部门A</a></li>             <li><a title="部门B" href="#" target="_blank">部门B</a></li>             <li><a title="部门C" href="#" target="_blank">部门C</a></li>             <li><a title="部门D" href="#" target="_blank">部门D</a></li>             <li><a title="部门E" href="#" target="_blank">部门E</a></li> </ul>
样式：
.topNavigation {     float: left;     height: 35px;     line-height: 35px;     overflow: hidden;     padding-left: 8px; }  .topNavigation li {     float: left;     height: 37px;     line-height: 37px;     list-style: none outside none;     padding: 0 21px;     text-align: center;     vertical-align: middle;     width: auto; }  .topNavigation li a:link {     color: #000000;     font-size: 13px;     font-weight: bold;     text-decoration: none; }
效果如下：

JQuery脚本：

<script src="../JavaScripts/jquery.min.js" type="text/javascript"></script>             <script type="text/javascript">                 setTimeout(function () {                     $(function () {                         $(".topNavigation").children("li").each(function () {                             $(this).mouseover(function () {        $(this).css({ "background-image": "url('../images/nav_btn_hover.png')", "background-position": "top" });                             }),                         $(this).mouseleave(function () {        $(this).css({ "background-image": "url('../images/line.gif')", "background-position": "right" });                         })                         }, null);                     });                 }, 1000);             </script>

最终效果：

转发至微博

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。