discuz如何逐條滾動(dòng)顯示論壇帖子
2018-11-02 來源：學(xué)做網(wǎng)站論壇
在DZ模板制作過程中，很多版塊都是通過DIY功能來調(diào)用版塊數(shù)據(jù)的，但由于版塊的尺寸有限，我們要在一個(gè)版塊下調(diào)用更多的數(shù)據(jù)，我們可以使用逐條顯示調(diào)用的效果。
也就是在一個(gè)固定的區(qū)域中，通過逐條滾動(dòng)的方式展示版塊的數(shù)據(jù)，這樣可以調(diào)用出更多的數(shù)據(jù)內(nèi)容。
我們在自己制作DZ模板時(shí)，可以使用DZ論壇的DIY功能去實(shí)現(xiàn)這種效果。結(jié)合自己的代碼與DIY功能可以實(shí)現(xiàn)逐條顯示調(diào)用版塊數(shù)據(jù)，代碼如下:
<div class="deanwenzhang">
<ul>[loop]
<li>
<div class="deanwzl"><a href="{url}" target="_blank"><img src="{pic}" width="{picwidth}" height="{picheight}" /></a></div>
<div class="deanwzm"><a href="home.php?mod=space&{authorid}=1&do=profile" target="_blank"><img src="{avatar}" /></a></div>
<div class="deanwzr">
<div class="deanyonghuname"><a href="home.php?mod=space&{authorid}=1&do=profile" target="_blank">{author}</a></div>
<p><span class="deanup"></span><span>{summary}</span><span class="deandown"></span></p>
<div class="deandate">{dateline}</div>
</div>
<div class="clear"></div>
</li>
[/loop]</ul>
</div>
<ul>[loop]
<li>
<div class="deanwzl"><a href="{url}" target="_blank"><img src="{pic}" width="{picwidth}" height="{picheight}" /></a></div>
<div class="deanwzm"><a href="home.php?mod=space&{authorid}=1&do=profile" target="_blank"><img src="{avatar}" /></a></div>
<div class="deanwzr">
<div class="deanyonghuname"><a href="home.php?mod=space&{authorid}=1&do=profile" target="_blank">{author}</a></div>
<p><span class="deanup"></span><span>{summary}</span><span class="deandown"></span></p>
<div class="deandate">{dateline}</div>
</div>
<div class="clear"></div>
</li>
[/loop]</ul>
</div>
除了HTML代碼之外，我們還需要加一段JS特效代碼來實(shí)現(xiàn)逐條顯示的效果。
[代碼]js代碼:
<script type="text/javascript">
jq(function(){var scrtime;jq(".deanwenzhang").hover(function(){clearInterval(scrtime);},
function(){scrtime = setInterval(function(){var jqul = jq(".deanwenzhang ul");var liHeight = jqul.find("li:last").height();jqul.animate({marginTop : liHeight + 11+ "px"},1000,function(){jqul.find("li:last").prependTo(jqul)jqul.find("li:first").hide();jqul.css({marginTop:0});jqul.find("li:first").fadeIn(1000);});},5000);}).trigger("mouseleave");});
</script>
jq(function(){var scrtime;jq(".deanwenzhang").hover(function(){clearInterval(scrtime);},
function(){scrtime = setInterval(function(){var jqul = jq(".deanwenzhang ul");var liHeight = jqul.find("li:last").height();jqul.animate({marginTop : liHeight + 11+ "px"},1000,function(){jqul.find("li:last").prependTo(jqul)jqul.find("li:first").hide();jqul.css({marginTop:0});jqul.find("li:first").fadeIn(1000);});},5000);}).trigger("mouseleave");});
</script>
通過這樣的代碼組合，我們就可以通過DIY功能去在某個(gè)版塊逐條調(diào)用版塊數(shù)據(jù)了。
標(biāo)簽： 代碼
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
最新資訊
熱門推薦