国产又猛又爽又黄视频|在线观看人成视频免费|少妇高潮太爽了在线视频|911国产免费无码专区|特黄做受又大又粗又长大片|欧美一级二级免费在线观看|日日夜人人澡人人澡人人看免|欧洲午夜精品一级毛片在线播放

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

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

155415nosbo6yym6ykqmhk155408kdob0pdl3h332dep

下面我就教大家簡單的使用方法吧，其實是我前些天做過的。下面提供完整的HTML+CSS+JS代碼。
使用方法：
把一下HTML+CSS+JS加入你DIY的數(shù)據(jù)模塊當中，當然我建議在DIY當中最好僅保留HTML代碼，其他的在主頁面引用，這是一個很好的習慣，不要問為什么。完了第一個
中的module類必須帶上，因為這是DZ中默認的數(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ù)咨詢/運營咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流

轉(zhuǎn)載請注明出處：Discuz上修改非常美觀大氣的時間軸風格文章圖文列表，帶HTML+CSS+JS詳細解析 - 微構(gòu)網(wǎng)絡(luò)
分享：