使用场景:
为了让客户看到公司产品销售火热,网站主希望在网站首页滚动展示部分订单。
实际订单情况,可以从后台设置。
操作流程:
Step1:
开启功能:功能->搜索“首页滚动订单管理”功能;
Step2:
添加记录:首页滚动订单管理页面,添加需要展示内容;
Step3:
插入调用标签:在模板代码找到需要添加滚动订单的位置,插入以下的调取代码,如下;
<div class="info-column col-lg-4 col-md-12 col-sm-12">
<div class="inner-column" style="background-image: url(/storage/14872/tpl/my_23/images/reserve-info.jpg)">
<!-- Sec Title -->
<div class="sec-title light centered">
<div class="title">Join Apply</div>
<h2>已申请</h2>
</div>
<div class="scroll-order" id="scroll_order_0" style="overflow:hidden;height:255px;width:300px;">
<div id="scroll_order_1">
<ul class="table-list">
{list_order}
<li> [value:user/] <span> [value:content/]</span><br>
<span> 刚刚</span>
</li>
{/list_order}
</ul>
</div>
<div id="scroll_order_2"></div>
<script>
var speed=50;
scroll_order_2.innerHTML=scroll_order_1.innerHTML
function Marquee(){
if(scroll_order_2.offsetTop-scroll_order_0.scrollTop<=0)
scroll_order_0.scrollTop-=scroll_order_1.offsetHeight;
else{
scroll_order_0.scrollTop++;
}
}
var MyMar=setInterval(Marquee,speed);
scroll_order_0.onmouseover=function() {clearInterval(MyMar)};
scroll_order_0.onmouseout=function() {MyMar=setInterval(Marquee,speed);}
</script>
</div>
效果如图所示:
参考视频教程:https://ke.seowhy.com/play/3998.html