会员
周边
众包
新闻
博问
闪存
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
TomSun
享受编程的快乐!Attitude is everything!
导航
博客园
首页
新随笔
联系
订阅
管理
公告
不间断连续图片滚动效果的制作方法
Posted on
2005-09-26 10:20
TomSun
阅读(
2566
) 评论(
0
)
编辑
收藏
举报
先制作向上滚动的效果:
插入代码:
<!--
指向链接图片url
-->
<
base
href
="http://www.it365cn.com"
>
<
div
id
=demo
style
=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff
>
<
div
id
=demo1
>
<!--
定义图片
-->
<
img
src
="images/logo_1.gif"
>
<
img
src
="images/logo/flashempire.gif"
>
<
img
src
="images/logo.gif"
>
<
img
src
="images/logo/5dmedia.gif"
>
<
img
src
="images/logo/macromedia.gif"
>
<
img
src
="images/logo/sucaiw.gif"
>
<
img
src
="images/logo/blueieda.gif"
>
<
img
src
="images/logo/htmlcn.gif"
>
<
img
src
="images/logo/fwcn.gif"
>
</
div
>
<
div
id
=demo2
></
div
>
</
div
>
<
script
>
var
speed
=
30
demo2.innerHTML
=
demo1.innerHTML
function
Marquee()
{
if
(demo2.offsetTop
-
demo.scrollTop
<=
0
)
demo.scrollTop
-=
demo1.offsetHeight
else
{
demo.scrollTop
++
}
}
var
MyMar
=
setInterval(Marquee,speed)
demo.onmouseover
=
function
()
{clearInterval(MyMar)}
demo.onmouseout
=
function
()
{MyMar
=
setInterval(Marquee,speed)}
</
script
>
制作向下滚动的效果:
将上面“制作向上滚动的效果”中的红色字体Js部分替换成:
<
script
>
var
speed
=
30
demo2.innerHTML
=
demo1.innerHTML
demo.scrollTop
=
demo.scrollHeight
function
Marquee()
{
if
(demo1.offsetTop
-
demo.scrollTop
>=
0
)
demo.scrollTop
+=
demo2.offsetHeight
else
{
demo.scrollTop
--
}
}
var
MyMar
=
setInterval(Marquee,speed)
demo.onmouseover
=
function
()
{clearInterval(MyMar)}
demo.onmouseout
=
function
()
{MyMar
=
setInterval(Marquee,speed)}
</
script
>
制作向左滚动的效果:
<
div
id
=demo
style
=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff
>
<
table
align
=left
cellpadding
=0
cellspace
=0
border
=0
>
<
tr
>
<
td
id
=demo1
valign
=top
><
img
src
="images/logo_1.gif"
><
img
src
="images/logo/flashempire.gif"
><
img
src
="images/logo.gif"
><
img
src
="images/logo/5dmedia.gif"
><
img
src
="images/logo/macromedia.gif"
><
img
src
="images/logo/sucaiw.gif"
><
img
src
="images/logo/blueieda.gif"
><
img
src
="images/logo/htmlcn.gif"
><
img
src
="images/logo/fwcn.gif"
>
</
td
>
<
td
id
=demo2
valign
=top
></
td
>
</
tr
>
</
table
>
</
div
>
<
script
>
var
speed
=
30
demo2.innerHTML
=
demo1.innerHTML
function
Marquee()
{
if
(demo2.offsetWidth
-
demo.scrollLeft
<=
0
)
demo.scrollLeft
-=
demo1.offsetWidth
else
{
demo.scrollLeft
++
}
}
var
MyMar
=
setInterval(Marquee,speed)
demo.onmouseover
=
function
()
{clearInterval(MyMar)}
demo.onmouseout
=
function
()
{MyMar
=
setInterval(Marquee,speed)}
</
script
>
制作向右滚动的效果:
将上面“制作向左滚动的效果”中的红色字体Js部分替换成:
<
script
>
var
speed
=
30
demo2.innerHTML
=
demo1.innerHTML
demo.scrollLeft
=
demo.scrollWidth
function
Marquee()
{
if
(demo.scrollLeft
<=
0
)
demo.scrollLeft
+=
demo2.offsetWidth
else
{
demo.scrollLeft
--
}
}
var
MyMar
=
setInterval(Marquee,speed)
demo.onmouseover
=
function
()
{clearInterval(MyMar)}
demo.onmouseout
=
function
()
{MyMar
=
setInterval(Marquee,speed)}
</
script
>
会员力量,点亮园子希望
刷新页面
返回顶部
Powered by:
博客园
Copyright © 2024 TomSun
Powered by .NET 8.0 on Kubernetes