导航栏背景图片切换 导航栏背景图片

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

导航栏背景图片的切换,使用CSS或者JS。

下面是用使用JQuery来实现。

<ul> <li><atitle="部门A"href="#"target="_blank">部门A</a></li> <li><atitle="部门B"href="#"target="_blank">部门B</a></li> <li><atitle="部门C"href="#"target="_blank">部门C</a></li> <li><atitle="部门D"href="#"target="_blank">部门D</a></li> <li><atitle="部门E"href="#"target="_blank">部门E</a></li> </ul>

样式:

.topNavigation{ float:left; height:35px; line-height:35px; overflow:hidden; padding-left:8px; } .topNavigationli{ float:left; height:37px; line-height:37px; list-style:noneoutsidenone; padding:021px; text-align:center; vertical-align:middle; width:auto; } .topNavigationlia:link{ color:#000000; font-size:13px; font-weight:bold; text-decoration:none; }

效果如下:



JQuery脚本:

<scriptsrc="../JavaScripts/jquery.min.js"type="text/javascript"></script> <scripttype="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>

最终效果:



导航栏背景图片切换 导航栏背景图片


您可能也喜欢:

JS 日历及日期扩展 2013.02.22

  JS 日历及日期扩展

ChildNodes与parentNode 2011.12.02

  ChildNodes与parentNode

【转载】SharePoint 2010 MasterPage去Ribbon 的方法 2013.01.19

  【转载】SharePoint 2010 MasterPage去Ribbon 的方法

《ExtJS2.0实用简明教程》之ExtJS版的Hello 2008.08.26

  《ExtJS2.0实用简明教程》之ExtJS版的Hello

EXTJS 2011.08.20

  EXTJS

jQuery选择器全解【转】 2012.04.19

jQuery选择器全解【转】

JQuery中文入门教程 2011.08.20

JQuery中文入门教程

广告代码 2012.11.08

广告代码

26个Jquery使用小技巧(jQuery tips, tricks & solutions) 2011.08.20

26个Jquery使用小技巧(jQuery tips, tricks & solutions)

50个jquery代码片段 2011.12.12

50个jquery代码片段

jQuery温习篇---强大的JQuery选择器 2011.08.20

jQuery温习篇---强大的JQuery选择器

【引用】html 元素的默认样式值 2011.10.23

【引用】html 元素的默认样式值

   转发至微博

  

爱华网本文地址 » http://www.413yy.cn/a/25101012/105697.html

更多阅读

怎样去掉QQ空间的标题栏? qq空间标题栏背景尺寸

QQ空间标题栏没有直接取消的功能。如果您不想显示默认的标题栏样式,建议您用QQ空间装扮进行装饰,同时我们提供了一款免费透明的标题栏给大家体验,详细操作如下。怎样去掉QQ空间的标题栏?——工具QQ空间6.0版本怎样去掉QQ空间的标题栏

怎样为PPT插入背景图片 怎样给ppt加背景图片

在我们制作PPT时,简单的插入图片,然后调整一下这是相当不专业也不美观的,我们看到的精美的PPT,基本都是插入的背景哦怎样为PPT插入背景图片——工具/原料PPT怎样为PPT插入背景图片——步骤/方法怎样为PPT插入背景图片 1、首先打开PPT文

怎样将图片背景变透明 精 如何把图片背景变透明

怎样将图片背景变透明 精——简介在某些特殊需求下,往往需要将图片背景变为透明。通常支持图片背景透明的文件格式是PNG。因此我们只需要将图片需要透明的部分删除掉,然后存为PNG格式的图片即可。下面就来看一下具体的操作方法。怎样

qq空间怎么设置背景图片 手机qq全屏背景自定义

qq空间怎么设置背景图片——简介QQ空间还可以设置背景图片哦,使用自己喜欢的背景图片,是不是让我们自己的QQ空间看起来更加绚丽呢?哈哈,那么我们就来尝试使用这个功能喽,为了让我们的空间别具一格,好了,大家速来围观我的经验啦。qq空间怎

怎么设置word背景图片 word如何设置背景

怎么设置word背景图片——简介我们在编辑word文档的时候,为了使自己的文档阅读起来的时候更加的赏心悦目,我们想给word设置一个背景,让文档看起来不那么的单调,那么我们该怎么操作呢?怎么设置word背景图片——工具/原料word2007怎么设

声明:《导航栏背景图片切换 导航栏背景图片》为网友薄荷绿姑娘分享!如侵犯到您的合法权益请联系我们删除