扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
Discuz上修改非常美观大气的时间轴风格文章图文列表，带HTML+CSS+JS详细解析
首先啥也不说，解释下是什么样的吧。就是下面这样的列表，当用户打开网页的时候是左边样子，也就是列表的第一条数据是展开的，而当用户的鼠标移动到其他的地方的时候，当前记录展开，而其他的则关闭成简洁的样式。是不是很酷？
下面我就教大家简单的使用方法吧，其实是我前些天做过的。下面提供完整的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>
使用到的图片素材
转载请注明出处：Discuz上修改非常美观大气的时间轴风格文章图文列表，带HTML+CSS+JS详细解析 - 微构网络
- 在线咨询
- 15574303608
-
项目经理微信
-
移动版官网