2024国产成人精品免费视频|日本免费一区二区三区毛片|久久97超碰色中文字幕|亚洲天堂a中文字幕

Discuz上修改非常美觀大氣的時間軸風(fēng)格文章圖文列表，帶HTML+CSS+JS詳細(xì)解析

2014-03-26 12:48 欄目：技術(shù)開發(fā), 知識在線 查看(18360)
? ? ?首先啥也不說，解釋下是什么樣的吧。就是下面這樣的列表，當(dāng)用戶打開網(wǎng)頁的時候是左邊樣子，也就是列表的第一條數(shù)據(jù)是展開的，而當(dāng)用戶的鼠標(biāo)移動到其他的地方的時候，當(dāng)前記錄展開，而其他的則關(guān)閉成簡潔的樣式。是不是很酷？

155415nosbo6yym6ykqmhk155408kdob0pdl3h332dep

下面我就教大家簡單的使用方法吧，其實(shí)是我前些天做過的。下面提供完整的HTML+CSS+JS代碼。
使用方法：
把一下HTML+CSS+JS加入你DIY的數(shù)據(jù)模塊當(dāng)中，當(dāng)然我建議在DIY當(dāng)中最好僅保留HTML代碼，其他的在主頁面引用，這是一個很好的習(xí)慣，不要問為什么。完了第一個
中的module類必須帶上，因?yàn)檫@是DZ中默認(rèn)的數(shù)據(jù)調(diào)用功能的類。
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

與我們的項目經(jīng)理聯(lián)系
掃二維碼與項目經(jīng)理溝通

我們在微信上24小時期待你的聲音

解答本文疑問/技術(shù)咨詢/運(yùn)營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流

轉(zhuǎn)載請注明出處：Discuz上修改非常美觀大氣的時間軸風(fēng)格文章圖文列表，帶HTML+CSS+JS詳細(xì)解析 - 微構(gòu)網(wǎng)絡(luò)
分享：
揭西县| 故城县| 乐至县| 娄底市| 宿迁市| 同德县| 临西县| 嘉祥县| 四川省| 宁都县| 抚顺县| 徐汇区| 肥乡县| 兴安县| 福海县| 保靖县| 息烽县| 平利县| 阜新| 西安市| 施秉县| 邵阳县| 新乐市| 保定市| 灵石县| 河北省| 五大连池市| 东安县| 天长市| 当涂县| 海南省| 顺平县| 额敏县| 桑植县| 黄石市| 泰安市| 宁远县| 新兴县| 乌鲁木齐县| 宣城市| 新田县|