2顶

jquery隔行换色特效

稿源：互联网 2022-04-02 21:43:02 点击： 5596 撤稿纠错

漂亮的隔行换色特效，鼠标经过显示提示层。

以下讨论的是和jquery 隔行换色相关的jquery隔行换色特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 漂亮的隔行换色和鼠标经过变色效果 站长特效网欢迎您</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_zzjs_net{background:url(/img/w_25.gif) no-repeat 0 0;width:340px;height:258px;margin:100px auto 0;}
.www_zzjs_net_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_zzjs_net_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/02420534.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/20060905030521360.gif) no-repeat 4px 6px #DAF2FE;text-indent:10px;}
.span01{width:20px;height:20px;background:#F49A4C;display:block;float:left;text-align:left;}
.www_zzjs_net_content p a,.www_zzjs_net_content p a:visited{float:left;width:225px;height:22px;line-height:22px;overflow:hidden;text-align:left;text-decoration:none;}
.www_zzjs_net_content p a:hover{text-decoration:none;}
.info{width:500px;margin:20px auto 0;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_zzjs.js"></script>
<script type="text/javascript">
/*作者：叶华伟，邮箱：yhw2710@126.com，QQ：517025143*/
$(function(){
 $(".www_zzjs_net_content p:odd").addClass("p03");//隔行换色处，额数行增加样式P03
 //鼠标经过样式变化处
 $(".www_zzjs_net_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="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

需要加载js文件,请刷新页面看效果.
<div class="www_zzjs_net">
 <div class="www_zzjs_net_title">
  <span class="span1">jquery隔行换色和鼠标经过样式</span>
  <span class="span2"><a href="#" target="_blank" title="jquery隔行换色和鼠标经过样式"><img src="/img/w_25_02.gif" width="35" height="31"></a></span>
 </div>
 <div class="www_zzjs_net_content">
   <p class="p01"><a href="http://www.zzjs.net" title="jquery隔行换色和鼠标经过样式<br>格式：Jquery特效<br>网站：站长特效网<br>网址：http://www.zzjs.net " target="_blank">jquery隔行换色和鼠标经过样式</a>[2009-09-28]</p>
  <p class="p01"><a href="http://www.zzjs.net" title="jquery隔行换色和鼠标经过样式<br>格式：Jquery特效<br>网站：站长特效网<br>网址：http://www.zzjs.net " target="_blank">jquery隔行换色和鼠标经过样式</a>[2009-09-28]</p>
  <p class="p01"><a href="http://www.zzjs.net" title="jquery隔行换色和鼠标经过样式<br>格式：Jquery特效<br>网站：站长特效网<br>网址：http://www.zzjs.net " target="_blank">jquery隔行换色和鼠标经过样式</a>[2009-09-28]</p>
  <p class="p01"><a href="http://www.zzjs.net" title="jquery隔行换色和鼠标经过样式<br>格式：Jquery特效<br>网站：站长特效网<br>网址：http://www.zzjs.net " target="_blank">jquery隔行换色和鼠标经过样式</a>[2009-09-28]</p>
  <p class="p01"><a href="http://www.zzjs.net" title="jquery隔行换色和鼠标经过样式<br>格式：Jquery特效<br>网站：站长特效网<br>网址：http://www.zzjs.net " target="_blank">jquery隔行换色和鼠标经过样式</a>[2009-09-28]</p>
  <p class="p01"><a href="http://www.zzjs.net" title="jquery隔行换色和鼠标经过样式<br>格式：Jquery特效<br>网站：站长特效网<br>网址：http://www.zzjs.net " target="_blank">jquery隔行换色和鼠标经过样式</a>[2009-09-28]</p>
  <p class="p01"><a href="http://www.zzjs.net" title="jquery隔行换色和鼠标经过样式<br>格式：Jquery特效<br>网站：站长特效网<br>网址：http://www.zzjs.net " target="_blank">jquery隔行换色和鼠标经过样式</a>[2009-09-28]</p>
  <p class="p01"><a href="http://www.zzjs.net" title="jquery隔行换色和鼠标经过样式<br>格式：Jquery特效<br>网站：站长特效网<br>网址：http://www.zzjs.net " target="_blank">jquery隔行换色和鼠标经过样式</a>[2009-09-28]</p>
  </div>
</div>
<div class="info">
 <p>特效一：隔行换色效果</p>
 <p>特效二：鼠标经过样式变换效果</p>
 <p>特效三：鼠标经过标题提示效果</p>
 <p>特效四：点击超链接无虚线框效果</p>
</div>
</body>
</html>

关于jquery隔行换色特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010091564725.shtml方便下次再访问哦。

·上一篇： 表格图层悬浮特效
·下一篇： 兼容多种浏览器的返回顶部特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

jquery隔行换色特效

文章分类LIST >>返回首页

最新游戏

最新新闻