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

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

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

155415nosbo6yym6ykqmhk155408kdob0pdl3h332dep

下面我就教大家簡單的使用方法吧，其實是我前些天做過的。下面提供完整的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

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

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

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

轉載請注明出處：Discuz上修改非常美觀大氣的時間軸風格文章圖文列表，帶HTML+CSS+JS詳細解析 - 微構網絡
分享：
慈溪市| 锡林浩特市| 新乡县| 赫章县| 姜堰市| 金门县| 东山县| 江永县| 千阳县| 措美县| 济阳县| 绥中县| 梅河口市| 大足县| 安宁市| 夏津县| 观塘区| 尼玛县| 昆山市| 陇川县| 海门市| 泉州市| 常熟市| 鄂托克旗| 桂平市| 恩平市| 上蔡县| 钟祥市| 兰西县| 澳门| 疏勒县| 贵港市| 饶阳县| 木兰县| 兰坪| 门源| 内江市| 峡江县| 城市| 冷水江市| 沙河市|