【www.bbyears.com--js教程】
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
"http://www.w3.org/1999/xhtml"
lang=
"utf-8"
>
"Content-Type"
content=
"text/html; charset=utf-8"
/>
无缝滚动图片示例-F-BLOG
<script type=
"text/javascript"
>
word">function
$(id){
word">return
document.getElementById(id);
}
function
Marquee(id,toFollow,speed)
{
var
doScroll;
var
scrollBox_x=
"+id+
"abox'>"
+$(id).innerHTML+
"+id+
"bbox'>"
+$(id).innerHTML+
""
;
var
scrollBox_y=
"+id+
"abox'>"
+$(id).innerHTML+
"+id+
"bbox'>"
+$(id).innerHTML+
""
;
var
begin=
function
(){
switch
(toFollow){
case
"left"
:
$(id).innerHTML=scrollBox_x;
doScroll=setInterval(
function
(){
if
($(id).scrollLeft==$(id+
"abox"
).offsetWidth) $(id).scrollLeft=0;
$(id).scrollLeft++;
},speed);
break
;
case
"right"
:
$(id).innerHTML=scrollBox_x;
doScroll=setInterval(
function
(){
if
($(id).scrollLeft<=0) $(id).scrollLeft=$(id+
"bbox"
).offsetWidth;
$(id).scrollLeft--;
},speed);
break
;
case
"top"
:
$(id).innerHTML=scrollBox_y;
doScroll=setInterval(
function
(){
if
($(id).scrollTop==$(id+
"abox"
).offsetHeight) $(id).scrollTop=0;
$(id).scrollTop++;
},speed);
break
;
case
"bottom"
:
$(id).innerHTML=scrollBox_y;
doScroll=setInterval(
function
(){
if
($(id).scrollTop<=0) $(id).scrollTop=$(id+
"bbox"
).offsetHeight;
$(id).scrollTop--;
},speed);
break
;
}
}
begin();
$(id).onmouseover=
function
() {clearInterval(doScroll);}
$(id).onmouseout=
function
() {begin();}
}
window.onload=
function
(){
Marquee(
"demo2"
,
"left"
,30);
Marquee(
"demo1"
,
"right"
,20);
Marquee(
"demo3"
,
"top"
,30);
Marquee(
"demo4"
,
"bottom"
,30);
}
</script>
"demo1"
style=
"overflow:hidden;height:100px;width:300px;"
>
"mm.jpg"
mce_src=
"mm.jpg"
style=
"height:100px;width:200px;"
/>
"me.jpg"
mce_src=
"me.jpg"
style=
"height:100px;width:200px;"
/>
"demo2"
style=
"overflow:hidden;height:100px;width:300px;"
>
"mm.jpg"
mce_src=
"mm.jpg"
style=
"height:100px;width:200px;"
/>
"me.jpg"
mce_src=
"me.jpg"
style=
"height:100px;width:200px;"
/>
"demo3"
style=
"overflow:hidden;height:150px;width:200px;"
>
"mm.jpg"
mce_src=
"mm.jpg"
style=
"height:100px;width:200px;"
/>
"me.jpg"
mce_src=
"me.jpg"
style=
"height:100px;width:200px;"
/>
"demo4"
style=
"overflow:hidden;height:150px;width:200px;"
>
"mm.jpg"
mce_src=
"mm.jpg"
style=
"height:100px;width:200px;"
/>
"me.jpg"
mce_src=
"me.jpg"
style=
"height:100px;width:200px;"
/>