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

2014-03-26 12:48 栏目:技术开发, 知识在线 查看(10597)
? ? ?首先啥也不说,解释下是什么样的吧。就是下面这样的列表,当用户打开网页的时候是左边样子,也就是列表的第一条数据是展开的,而当用户的鼠标移动到其他的地方的时候,当前记录展开,而其他的则关闭成简洁的样式。是不是很酷?
下面我就教大家简单的使用方法吧,其实是我前些天做过的。下面提供完整的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详细解析 - 微构网络
分享:
  • 中央直属机关工委主要职责 2019-05-22
  • 打造“互联网+”,共享经济改变百姓生活 2019-04-22
  • 破财免灾!C罗愿向西班牙税务部门缴纳1880万欧元 2019-04-19
  • 中国品牌SUV新标杆 人民网试驾WEY VV7VV5 2019-04-19
  • 杨爱国:借助小博会促进尚志社会经济加快发展 2019-04-15
  • 泪目!川农院士逝世5年,夫人每日都去看他的雕像…思念如马,不停蹄! 2019-04-15
  • 海信世界杯首秀出奇招 竟打出俄文广告 2019-03-25
  • 财政部:对原产于美国的500亿美元进口商品加征关税 2019-03-11
  • 我和《人民日报》(我与人民日报·纪念人民日报创刊70周年) 2019-03-11
  • 杭州再增100个海绵城市项目 2018-11-08
  • 新华网申领新闻记者证资格审核公示 2018-11-08
  • 229| 300| 572| 565| 372| 673| 206| 406| 5| 311|