您现在的位置： 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文
jquery简单实现鼠标经过导航条改变背景图
作者：佚名 责任编辑：admin 更新时间：2022-06-22
鼠标经过导航条改变背景图的效果很是好看，下面为大家介绍下使用jquery是如何实现的，感兴趣的朋友可以参考下
代码如下: <!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> *{ margin:0; padding:0; } body{ text-align:center; background:yellow; } #container{ width:962px; height:auto; background:url(b3.jpg); margin:0px auto; } #head{ height:100px; width:100%; } .head_ul{ list-style:none; margin-left:200px; } .head_ul li{ float:left; width:90px; height:50px; line-height:40px; font-size:20px; margin-top:40px; background:url(b1.png); } .head_ul li a{ text-decoration:none; } #main{ width:100%; height:1500px; } #left{ width:30%; height:100%; float:left; } #right{ width:70%; height:100%; float:left; } #clear{ clear:both; } #foot{ height:100px; width:100%; } </style> <script src="jquery-1.7.2.js"></script> <script> $(function(){ $(".head_ul li").hover(function(){ $(this).css('background','url(b2.png)'); },function(){ $(this).css('background','url(b1.png)'); } ); }); </script> </head> <body> <div id="container"> <div id="head"> <ul class="head_ul"> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> <li><a href="#">首页</a></li> </ul> </div> <div id="main"> <div id="left"></div> <div id="right"></div> <div id="clear"></div> </div> <div id="foot"></div> </div </body> </html>- 上一个程序编程： javascript确认框的三种使用方法
- 下一个程序编程： 鼠标移入移出事件改变图片的分辨率的两种方法
