zoukankan
html css js c++ java
[转]不间断连续图片滚动效果的制作方法(JS)
From:
http://x8.maicoo.com/tech/9/225.html
以前我们站点也介绍过连续滚动的图片,但缺陷是有间断。如何制作连续不间断的播放滚动呢?请参看制作方法:
先制作向上滚动的效果:(演示:
http://x8.maicoo.com/tech/9/225.html
)
<!--
指向链接图片url
-->
<
base
href
="http://www.it365cn.com"
>
<
div
id
=demo
style
=overflow:hidden;height:150;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
>
制作向左滚动的效果:
<
base
href
="http://www.it365cn.com"
>
<
div
id
=demo
style
=overflow:hidden;height:33;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部分替换成:
<
base
href
="http://www.it365cn.com"
>
<
div
id
=demo
style
=overflow:hidden;height:33;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
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
>
查看全文
相关阅读:
MIN (Transact-SQL)【转】
ROW_NUMBER() OVER函数的基本用法用法【转】
读取文件中的内容
Stopwatch 和TimeSpan介绍【转】
TimeSpan类【转】
Stopwatch 类【转】
ToString()使用方法
用c#读取文件内容中文是乱码的解决方法:
vue实现购物车和地址选配(二)
vue实现购物车和地址选配
原文地址:https://www.cnblogs.com/SummerRain/p/799441.html
最新文章
连连看(dfs)
Prime Ring Problem(dfs水)
Oil Deposits(dfs水)
Ugly Numbers(STL应用)
Team Queue(STL练习题)
The Blocks Problem(vector)
Necklace(树状数组+离线操作)
Let the Balloon Rise(水)
Digit Generator(水)
find the nth digit(二分查找)
热门文章
Numpy学习之(九)
Numpy学习之(八)
Numpy学习之(七)
Numpy 学习之(六)
Numpy学习之(五)
Numpy学习之(四)
Python zip()函数
Numpy学习之(三)
python中的除法,取整和求模
numpy 中的modf()
Copyright © 2011-2022 走看看