jQuery 隔行换色鼠标滑动单行变色代码

发布时间：2018-08-16 20:56 所属栏目：121 来源：站长网

导读：基于 jQuery 技术的隔行换色效果，样式比较粗糙，没有太多美化。效果：鼠标经过每一行的时候，行的背景会改变，这样会使你的列表结构更清淅，用户体验提升。请大家注意，第一次运行可能提示有错误，所以请点击网页演示或运行演示后，刷新一下网页再运行

　　基于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=gbk" /> <title>jQuery 隔行换色鼠标经过变化 - Liehuo.Net</title> <script type="text/javascript" src="http://www.veryhuo.com/uploads/common/js/jquery-1.3.2.js"></script> <style> /* 隔行换色 */ body{font-size:9pt;} li{padding:3px;} .demoOver{background:#ccc;} .demoBg{background:#f1f1f1;} </style> </head> <body> <script type="text/javascript"> // 隔行换色 $(function(){ $(".demo ul li").mouseover(function(){ $(this).addClass("demoOver"); }).mouseout(function(){ $(this).removeClass("demoOver"); }) $(".demo ul li:even").addClass("demoBg"); }) </script>  请大家注意，第一次运行可能提示有错误，请刷新一下网页再运行一次就正常了。 <div class="demo"> <ul> <li><a href="#" title="苍井空将出席久游发布会,AV女优转战中国网游">苍井空将出席久游发布会,AV女优转战中</a></li> <li><a href="http://www.veryhuo.com/a/view/17226.html" title="有消息称富士康从六月开始涨工资50-100元">有消息称富士康从六月开始涨工资50-100</a></li> <li><a href="http://www.veryhuo.com/a/view/17313.html" title="富士康第13跳新闻传出,港媒称女员工正在抢救">富士康第13跳新闻传出,港媒称女员工正</a></li> <li><a href="#" title="谷姐、iPed平板电脑登中国九大山寨产品榜单">谷姐、iPed平板电脑登中国九大山寨产品</a></li> <li><a href="http://www.veryhuo.com/a/view/17891.html" title="谷歌LOGO纪念丹尼斯·伽伯(Dennis Gabor)诞辰">谷歌LOGO纪念丹尼斯·伽伯(Dennis Gabo</a></li> <li><a href="#" title="Debrahlee Lorenzana 过于性感被花旗银行开除">Debrahlee Lorenzana 过于性感被花旗银</a></li> <li><a href="http://www.veryhuo.com/a/view/17650.html" title="富士康涨工资20%,传苹果可能将提供补贴">富士康涨工资20%,传苹果可能将提供补贴</a></li> <li><a href="http://www.veryhuo.com/a/view/20176.html" title="Tuan.qq.com今日上线腾讯正式进入<b>团购</b>市场">Tuan.qq.com今日上线腾讯正式进入团购</a></li> <li><a href="#" title="黛玉裸死!? 网友：是＂震撼＂还是扯淡?">黛玉裸死!? 网友：是＂震撼＂还是扯淡?</a></li> <li><a href="http://www.veryhuo.com/a/view/18774.html" title="SIM卡剪卡器销售火热,只因苹果发布iPhone 4?">SIM卡剪卡器销售火热,只因苹果发布iPho</a></li> </ul> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）

jQuery 隔行换色 鼠标滑动单行变色代码

jQuery 隔行换色鼠标滑动单行变色代码