Discuz上修改非常美观大气的时间轴风格文章图文列表,带HTML+CSS+JS详细解析

2014-03-26 12:48 栏目:技术开发, 知识在线 查看(17357)
     首先啥也不说,解释下是什么样的吧。就是下面这样的列表,当用户打开网页的时候是左边样子,也就是列表的第一条数据是展开的,而当用户的鼠标移动到其他的地方的时候,当前记录展开,而其他的则关闭成简洁的样式。是不是很酷?

155415nosbo6yym6ykqmhk155408kdob0pdl3h332dep

下面我就教大家简单的使用方法吧,其实是我前些天做过的。下面提供完整的HTML+CSS+JS代码。
使用方法:
把一下HTML+CSS+JS加入你DIY的数据模块当中,当然我建议在DIY当中最好仅保留HTML代码,其他的在主页面引用,这是一个很好的习惯,不要问为什么。完了第一个
中的module类必须带上,因为这是DZ中默认的数据调用功能的类。
HTML
<div class=”module muquansdtimes “>
<ul id=”times”>
[loop]
[order=1]
<li id=”a{currentorder}” class=”on cl” onmouseover=”muquansd(‘times’,’a{currentorder}’)”>
<span>{dateline}</span>
<div><h3><a href=”{url}” title=”{title}”{target}>{title}</a></h3><p>{summary}</p></div>
<em class=”png”></em>
</li>
[/order]
<li id=”a{currentorder}” class=”cl” onmouseover=”muquansd(‘times’,’a{currentorder}’)”>
<span>{dateline}</span>
<div><h3><a href=”{url}” title=”{title}”{target}>{title}</a></h3><p>{summary}</p></div>
<em class=”png”></em>
</li>
[/loop]
</ul>
</div>
CSS
<style>
.muquansdtimes{ padding-top:13px;}
.muquansdtimes ul{ background:url( line.gif) repeat-y 60px 0  }
.muquansdtimes li{ position:relative; padding:5px 0}
.muquansdtimes li span{ float:left; width:45px; height:20px; margin-right:30px;                    background:url( span.gif) no-repeat 0 0; text-align:center;}
.muquansdtimes li div{ padding-left:75px}
.muquansdtimes li div h3{ font-size:14px; height:24px; line-height:24px; overflow:hidden; font-weight:400}
.muquansdtimes li div h3 a{ color:#333}
.muquansdtimes li div p{ display:none; color:#999}
.muquansdtimes li em{ width:11px; height:11px; position:absolute; left:55px; top:10px; background:url( dian.png) no-repeat 0 0;}
.muquansdtimes li.on div h3 a{ color:#369}
.muquansdtimes li.on div p{ display:block}
.muquansdtimes li.on span{ color:#fff; background:url( span.gif) no-repeat 0 -20px;}
.muquansdtimes li.on em{ background:url(dian.png) no-repeat 0 -11px;}
</style>
JS
<script language=”javascript”>
  function muquansd(area,id) {
    var lis=document.getElementById(area).getElementsByTagName(‘li’);
   for(i=0; i<lis.length; i++) { lis[i].className=”; }
    document.getElementById(id).className=’on’;
    document.getElementById(id).blur();
  }
</script>

使用到的图片素材

img.rar

代码打包

times.html

与我们的项目经理联系
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:Discuz上修改非常美观大气的时间轴风格文章图文列表,带HTML+CSS+JS详细解析 - 微构网络
分享: