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=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>分享一款jquery隔行换色鼠标感应变色特效_武鸣人</title>
<style type="text/css">
*{padding:0px;margin:0px;line-height:1.8em;}
/*body css*/
body{font-family:Arial, Tahoma;font-size:12px;background:#0B2438;color:#545454;text-align:center;margin:0 auto;}
a{text-decoration:none;}
a:link{color:#545454;}
a:visited{color:#545454;}
a:hover{text-decoration:underline;color:#CC0000;}
a:active{color:#333;}
h1,h2,h3,h4,h5,h6{font-size:12px;}
img{border:0px;}
.www_wuming_ren{background:url(/img/20240325_www_wuming_ren_3.gif) no-repeat 0 0;width:340px;height:258px;margin:50px 50px 50px 50px;}
.www_wuming_ren_title{width:325px;margin:0 auto;height:30px;line-height:30px;font-size:14px;font-weight:bold;color:#237BAF;}
.span1{float:left;width:auto;line-height:38px;margin-left:30px;}
.span2{float:right;width:auto;}
.www_wuming_ren_content{width:320px;margin:0 auto;height:212px;padding-top:10px;color:#CC0000;}
.p03{background-color:#EEF3FD;}
.p01{border-left:#FFFFFF solid 1px;border-right:#FFFFFF solid 1px;border-top:#FFFFFF solid 1px;border-bottom:#EBEBEB dashed 1px;width:310px;height:24px;text-align:right;text-indent:10px;padding:0 5px;background-image:url(/img/20240325_www_wuming_ren_4.gif);background-repeat:no-repeat;background-position:4px 7px;}
.p02{border:#2392D2 solid 1px;width:310px;height:24px;text-align:right;padding:0 5px;background:url(/img/20240325_www_wuming_ren_5.gif) no-repeat 4px 6px #DAF2FE;text-indent:10px;}
.span01{width:20px;height:20px;background:#F49A4C;display:block;float:left;text-align:left;}
.www_wuming_ren_content p a,.www_wuming_ren_content p a:visited{float:left;width:225px;height:22px;line-height:22px;overflow:hidden;text-align:left;text-decoration:none;}
.www_wuming_ren_content p a:hover{text-decoration:none;}
.info{width:500px;margin:50px 50px 50px 50px;height:auto;padding:10px;background:#EEE;text-align:left;}
/*标题提示文字定义*/
body div#tooltip{position:absolute;z-index:1000;max-width:300px;width:auto!important;width:auto;background:#006CDB;border:#FEFFD4 solid 1px;text-align:left;padding:3px;}
body div#tooltip p{margin:0;padding:0;color:#FFFFFE;font:12px verdana,arial,sans-serif;}
body div#tooltip p em{display:block;margin-top:3px;color:#f60;font-style:normal;font-weight:bold;}
</style>
<script type="text/javascript" src="/img/jquery_wuming_ren.js"></script>
<script type="text/javascript">
$(function(){
$(".www_wuming_ren_content p:odd").addClass("p03");//隔行换色处，额数行增加样式P03
//鼠标经过样式变化处
$(".www_wuming_ren_content p").hover(
function () {
$(this).addClass("p02");//鼠标经过时增加样式P02
},
function () {
$(this).removeClass("p02");//鼠标离开时移除样式P02
}
)
//超链接无虚线框处
$("a").focus(
function () {
$(this).blur();//得到焦点与失去焦点效果一致
}
)
})
//标题提示效果处
var sweetTitles = {
x : 10,
y : 20,
tipElements : "a",
init : function() {
$(this.tipElements).mouseover(function(e){
this.myTitle = this.title;
this.myHref = this.href;
this.myHref = (this.myHref.length > 200 ? this.myHref.toString().substring(0,200)+"..." : this.myHref);
this.title = "";
var tooltip = "";
if(this.myTitle == "")
{
tooltip = "";
}
else
{
tooltip = "<div id='tooltip'><p>"+this.myTitle+"</p></div>";
}
$('body').append(tooltip);
$('#tooltip')
.css({
"opacity":"0.8",
"top":(e.pageY+20)+"px",
"left":(e.pageX+10)+"px"
}).show('fast');
}).mouseout(function(){
this.title = this.myTitle;
$('#tooltip').remove();
}).mousemove(function(e){
$('#tooltip')
.css({
"top":(e.pageY+20)+"px",
"left":(e.pageX+10)+"px"
});
});
}
};
$(function(){
sweetTitles.init();
});
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
需要加载js文件,请刷新页面看效果.
<div class="www_wuming_ren">
<div class="www_wuming_ren_title">
<span class="span1">jquery隔行换色和鼠标经过样式</span>
<span class="span2"><a href="#" target="_blank" title="jquery隔行换色和鼠标经过样式"><img src="/img/20240325_www_wuming_ren_6.gif" width="35" height="31"></a></span>
</div>
<div class="www_wuming_ren_content">
<p class="p01"><a href="https://www.wuming.ren" title="jquery隔行换色和鼠标经过样式<br>格式：Jquery特效<br>网站：武鸣人<br>网址：https://www.wuming.ren " target="_blank">jquery隔行换色和鼠标经过样式</a>[2009-09-28]</p>
<p class="p01"><a href="https://www.wuming.ren" title="jquery隔行换色和鼠标经过样式<br>格式：Jquery特效<br>网站：武鸣人<br>网址：https://www.wuming.ren " target="_blank">jquery隔行换色和鼠标经过样式</a>[2009-09-28]</p>
<p class="p01"><a href="https://www.wuming.ren" title="jquery隔行换色和鼠标经过样式<br>格式：Jquery特效<br>网站：武鸣人<br>网址：https://www.wuming.ren " target="_blank">jquery隔行换色和鼠标经过样式</a>[2009-09-28]</p>
<p class="p01"><a href="https://www.wuming.ren" title="jquery隔行换色和鼠标经过样式<br>格式：Jquery特效<br>网站：武鸣人<br>网址：https://www.wuming.ren " target="_blank">jquery隔行换色和鼠标经过样式</a>[2009-09-28]</p>
<p class="p01"><a href="https://www.wuming.ren" title="jquery隔行换色和鼠标经过样式<br>格式：Jquery特效<br>网站：武鸣人<br>网址：https://www.wuming.ren " target="_blank">jquery隔行换色和鼠标经过样式</a>[2009-09-28]</p>
<p class="p01"><a href="https://www.wuming.ren" title="jquery隔行换色和鼠标经过样式<br>格式：Jquery特效<br>网站：武鸣人<br>网址：https://www.wuming.ren " target="_blank">jquery隔行换色和鼠标经过样式</a>[2009-09-28]</p>
<p class="p01"><a href="https://www.wuming.ren" title="jquery隔行换色和鼠标经过样式<br>格式：Jquery特效<br>网站：武鸣人<br>网址：https://www.wuming.ren " target="_blank">jquery隔行换色和鼠标经过样式</a>[2009-09-28]</p>
<p class="p01"><a href="https://www.wuming.ren" title="jquery隔行换色和鼠标经过样式<br>格式：Jquery特效<br>网站：武鸣人<br>网址：https://www.wuming.ren " target="_blank">jquery隔行换色和鼠标经过样式</a>[2009-09-28]</p>
</div>
</div>
<div class="info">
<p>特效一：隔行换色效果</p>
<p>特效二：鼠标经过样式变换效果</p>
<p>特效三：鼠标经过标题提示效果</p>
<p>特效四：点击超链接无虚线框效果</p>
</div>
</body>
</html>本文来自武鸣人网站，转载请注明出处