A5下载 - 努力做内容最丰富最安全的下载站!

A5站长下载站

当前位置:A5下载 > 源码技巧 > Ecshop > Ecshop模板制作_让首页“站内快讯”垂直滚动显示

Ecshop模板制作_让首页“站内快讯”垂直滚动显示

时间:2015-10-26 10:05作者:fang人气:125

Ecshop首页“站内快讯”默认是静止不动的,很多人想让它垂直滚动显示,这里简要说一下方法

如果只是要简单的垂直滚动 用 html 标签中的 <maquee> 就能实现,但是不能实现无缝结合。

如果想要无缝垂直滚动,就需要一点JS代码的支持。

下面就讲一讲如何实现“站内快讯”垂直无缝滚动显示:

将 library/new_articles.lbi 文件内容完全替换为下面代码即可:

(经测试完全兼容IE6,IE7,FIREFOX)

注意:下面方法已经在官方默认模板基础上测试完全通过,其他模板没做测试。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<div id="artup" style="overflow:hidden; height: 170px;">

<div id="artup1">

<ul style="padding:0;margin:0" id="artup1ul">

<!--{foreach name="new_articles" from=$new_articles item=article}-->

<li>

[<a href="{$article.cat_url}">{$article.cat_name}</a>] <a href="{$article.url}" title="{$article.title|escape:html}">{$article.short_title|truncate:10:"...":true}</a>

</li>

<!--{/foreach}-->

</ul>

</div>

<div id="artup2"> </div>

</div>

<script type="text/javascript">

var speed=30;

var ARTUP=document.getElementById('artup');

var ARTUP1=document.getElementById('artup1');

var ARTUP2=document.getElementById('artup2');

var ARTUP1ul=document.getElementById('artup1ul');

var result = "";

for(var i=0; i<25; i++) result += ARTUP1ul.innerHTML;

ARTUP1ul.innerHTML=result

ARTUP2.innerHTML=ARTUP1.innerHTML

function Marquee1(){

if(ARTUP2.offsetHeight-ARTUP.scrollTop<=0)

ARTUP.scrollTop-=ARTUP1.offsetHeight

else{

ARTUP.scrollTop++

}

}

var MyMar1=setInterval(Marquee1,speed)

ARTUP.onmouseover=function() {clearInterval(MyMar1)}

ARTUP.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}

</script>

以上就是关于Ecshop模板制作让首页“站内快讯”垂直滚动显示的方法,希望对大家有所帮助。

标签Ecshop,模板,制作,首页,站内快讯,垂直,滚动,显示

相关下载

查看所有评论+

网友评论

网友
您的评论需要经过审核才能显示

公众号