电话

    0411-39943997

仟亿科技
客服中心
  • 电话
  • 电话咨询:0411-39943997
  • 手机
  • 手机咨询:15840979770
    手机咨询:13889672791
网络营销 >更多
您现在的位置:首页 > 新闻中心 > 常见问题

实现网页评论表框背景色轮换显示

作者:billionnet 发布于:2012/4/12 18:49:22 点击量:

这两天一直在研究这个问题。原因很简单:在仿Prowe V3这款主题时,评论列表那个地方,网页一直没办法实现原作的样式,即:评论条目1、2、3、4、5、6……背景色轮换交替显示。我知道这个效果对Z-Blog来说实现有点困难,必须借助JS来达成(其实WP也是倚靠JS来实现的),而我偏偏又对JS似懂非懂。没办法,只得硬着头皮去请教haphic,结果他丢给了我一段JS代码,说是针对这个问题的。哇,头晕!说实话,我一点儿也没看懂。怎么办呢?接下来的几天时间里,一直在思考这个问题。工夫不负有心人呵,总算让我写出了一个有效的代码。这里发出来,与大家共享下——

先说下做法吧,首先要更改列表模板中评论板块的布局,改成如下结构:

 


       
       
       
       
       
       
commment1
commment2
commment3
commment4
commment5
依此类推……

 

接着,再定义隔行属性以及判断函数注意:下面的JS定义代码必须放到

前面)

 

OK,这样就可以啦,就是这么简单。

注意:在这里,style下的css样式是机动的,可任由你定义,最终效果可以五花八门,比如做成一左一右的交替……

当然,你或许会说:现在都xhtml+css时代了,还用表框来套?也对,那再来个改进吧——用li元素来装每一条评论,这样显示速度也会好于用表格装吧。样式及JS代码如下:

div布局结构如下:

 


    

             
  • commment1

  •          
  • commment2

  •          
  • commment3

  •          
  • commment4

  •          
  • commment5

  •          
  • 依此类推……

  •     

 

OK,也完成了,更简单吧?

最后一点小提示:据我充当“小白鼠”测试,此法目前只在IE下有效,火狐、谷歌等浏览器,貌似都不支持。晕哦,找时间继续改进!先看两个运用的范例吧——

实现评论表框背景色轮换显示

    这个就是Prowe V3原作的评论列表样式,背景色交替显示。

实现评论表框背景色轮换显示

    这个是haphic新主题的评论列表样式,一右一右交替显示。

不知道他们的JS与我写的差别在哪儿。暂时嫉妒一下呵。



分享到:


Copyright@ 2011-2016 版权所有:大连千亿科技有限公司 辽ICP备11013762-3号   google网站地图   百度网站地图   网站地图

公司地址:大连市沙河口区中山路692号辰熙星海国际2317 客服电话:0411-39943997 QQ:2088827823 37482752

法律声明:未经许可,任何模仿本站模板、转载本站内容等行为者,本站保留追究其法律责任的权利! 隐私权政策声明