Ecshop模板制作_让首页“站内快讯”垂直滚动显示(无缝滚动)-站长杂谈下载

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

开通本站Svip会员,全站资源免费下
Ecshop首页“站内快讯”默认是静止不动的,很多人想让它垂直滚动显示,这里简要说一下方法
5 V5 Q" i. ~3 a- w" U5 G. I6 w如果只是要简单的垂直滚动 用 html TAG.html" target="_blank" class="relatedlink">标签中的 <maquee> 就能实现,但是不能实现无缝结合。7 V: X) T: j; M" g
如果想要无缝垂直滚动,就需要一点JS代码的支持。8 `. r5 \6 ?" B
$ c: V# [3 S3 B. ]; e
下面就讲一讲如何实现“站内快讯”垂直无缝滚动显示:% K# C$ A/ F$ c& f8 L0 I; c4 [
7 q6 G! G# x4 Q9 r+ k1 ^
将 library/new_articles.lbi 文件内容完全替换为下面代码即可:+ L6 g  N0 ]/ r# G
(经测试完全兼容IE6,IE7,FIREFOX)  r) y/ `. }2 `3 `# S3 r
4 c2 M9 C' w3 W* y! ?; P3 d
注意:下面方法已经在官方默认模板基础上测试完全通过,其他模板没做测试。
4 z  D4 `2 a- \9 @$ u+ |, L( s8 U( a  V2 c( O; i
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
2 V+ [) @3 G" t6 O6 S: u% ^. P9 {5 u<div id="artup" style="overflow:hidden; height: 170px;">0 T* u- u7 l5 p& Z5 _, K: @
<div id="artup1">) j& U. o& K& z1 H( z7 N
<ul style="padding:0;margin:0" id="artup1ul">
* N( J3 a6 j0 A6 m- R<!--{foreach name="new_articles" from=$new_articles item=article}-->' W- J' ]" F: P8 u1 d
<li>* z2 X+ h/ \' J) X7 A: [9 O+ L6 }
[<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>+ W9 ]0 K; d/ h$ k
</li>
) C0 ^& G0 \4 a3 \<!--{/foreach}-->
! d$ {* f5 Z0 B4 }$ T</ul>
$ F8 p+ j) N2 Q) E) h</div>4 T+ o/ o# s5 Z8 y8 y; ?1 L
<div id="artup2"> </div>
1 E) W$ t/ h) \, L' D</div>9 C3 O1 m1 e0 q, |
<script type="text/javascript">, z3 `' u& n/ }5 l7 ^+ Q- A
var speed=30;
- k. v/ |, q$ o+ w4 pvar ARTUP=document.getElementById('artup');
# G8 B5 ~" F0 n: i/ `! C+ Tvar ARTUP1=document.getElementById('artup1');
6 x; |7 R; y0 {' svar ARTUP2=document.getElementById('artup2');
% d" L' Z4 O8 F: _var ARTUP1ul=document.getElementById('artup1ul');4 p9 o" M  o/ R
var result = "";
6 E& V; J: [" f) r  l. k4 Yfor(var i=0; i<25; i++) result += ARTUP1ul.innerHTML;5 G% ?) }) d# H2 m2 A( Z
ARTUP1ul.innerHTML=result, S6 ^3 R$ m2 P5 T; F* R
ARTUP2.innerHTML=ARTUP1.innerHTML
1 H/ F3 H) u/ W( F9 u4 N5 wfunction Marquee1(){
* K" o) @( E* t' U* D5 |$ O1 eif(ARTUP2.offsetHeight-ARTUP.scrollTop<=0)  a8 l* }/ f/ T2 v  B- `. [
ARTUP.scrollTop-=ARTUP1.offsetHeight
$ N  S! p4 M# j, u- Z# X: Telse{4 M8 T) G+ L7 o' O
ARTUP.scrollTop++8 ?, c$ d/ C  b& y- A, s7 j
}
2 i# t* V3 h: p5 j6 v}6 I" `6 ?5 U/ t) ?! L
var MyMar1=setInterval(Marquee1,speed)! Q' V) V; }2 D2 o
ARTUP.onmouSEOver=function() {clearInterval(MyMar1)}
0 z% a8 `; g8 m, y7 U) ^ARTUP.onmouseout=function() {MyMar1=setInterval(Marquee1,speed)}
. A) o! X7 g+ }! \/ S</script>

+ n4 ^% a: W" u& M4 I- d) r

全部评论 0

您需要登录后才可以回帖 立即登录
登录
0
0
0
返回顶部