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

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

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

155415nosbo6yym6ykqmhk155408kdob0pdl3h332dep

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

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

我們?cè)谖⑿派?4小時(shí)期待你的聲音

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

轉(zhuǎn)載請(qǐng)注明出處：Discuz上修改非常美觀大氣的時(shí)間軸風(fēng)格文章圖文列表，帶HTML+CSS+JS詳細(xì)解析 - 微構(gòu)網(wǎng)絡(luò)
分享：
磐安县| 顺昌县| 老河口市| 云和县| 虹口区| 清河县| 稷山县| 平塘县| 兴国县| 贡觉县| 颍上县| 紫金县| 城固县| 通州区| 澜沧| 大化| 梅河口市| 安康市| 孟津县| 和顺县| 陈巴尔虎旗| 无为县| 赣榆县| 家居| 肥乡县| 新平| 武鸣县| 平远县| 永丰县| 台湾省| 南宁市| 介休市| 南乐县| 绥宁县| 元氏县| 谢通门县| 牙克石市| 岱山县| 江达县| 龙海市| 阳东县|