jquery隔行换色特效-JS特效-爱易网页

jquery隔行换色特效

日期：2014-05-18　浏览次数：20356 次

以下是程序代码

<!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</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="4215">下一篇：网页颜色变灰效果</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34247' title='同为70前后人，马云为什么总是像外星人那么瘦' target="_blank">
                        同为70前后人，马云为什么总是像外星人那么瘦</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34398' title='北京电信推“0月租卡”，同网通话免费' target="_blank">
                        北京电信推“0月租卡”，同网通话免费</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34402' title='不提老罗，不说情怀，仅从十四个投诉问题入手谈锤子手机' target="_blank">
                        不提老罗，不说情怀，仅从十四个投诉问题入手谈锤子手机</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10834' title='三星维修新规：Galaxy S4主板进水也收费修' target="_blank">
                        三星维修新规：Galaxy S4主板进水也收费修</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34417' title='迅雷高管解读财报：收购快盘可快速融入小米' target="_blank">
                        迅雷高管解读财报：收购快盘可快速融入小米</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34420' title='百度透露无人驾驶战略 研发三维交通地图' target="_blank">
                        百度透露无人驾驶战略 研发三维交通地图</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34448' title='英特尔VS苹果：移动芯片大战' target="_blank">
                        英特尔VS苹果：移动芯片大战</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34328' title='小微型IDC云化趋势加剧 云计算未来或现终极模式' target="_blank">
                        小微型IDC云化趋势加剧 云计算未来或现终极模式</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34102' title='中国雅虎邮箱今日关停 由盛及衰的背后' target="_blank">
                        中国雅虎邮箱今日关停 由盛及衰的背后</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2026 爱易网页 当前在线：1461人　
        网站在22时53分52秒内访问总人数：264083人
    2秒前 29.90%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>