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
>
查看全文
相关阅读:
散列表(Hash Table)
MVC中TextBox事件
AJAX控制DropDownList两级联动
唯一标示
检查对象属性是否有空值
foreach枚举div控制单个显示
JS获取DropDownList其中一项的文本值
随便
MVC常用
不可用输入框
原文地址:https://www.cnblogs.com/SummerRain/p/799441.html
最新文章
python 小知识
python 字典的操作
请求参数到表述层的类型转换——Struts2
SpringMVC基础——@ModelAttribute和@SessionAttribute
SpringMVC核心——视图渲染(包含视图解析)问题
SpringMVC核心——返回值问题
SpringMVC核心——映射问题
专题——web.xml 中 url-pattern
SpringMVC基础——一个简单的例子
《大话设计模式》学习笔记22:享元模式
热门文章
为SQL Server表中的列添加/修改/删除注释属性(sp_addextendedproperty、sp_updateextendedproperty、sp_dropextendedproperty)
《大话设计模式》学习笔记21:中介者模式
《大话设计模式》学习笔记20:职责链模式
《大话设计模式》学习笔记19:命令模式
《大话设计模式》学习笔记18:桥接模式
《大话设计模式》学习笔记17:单例模式
《大话设计模式》学习笔记16:迭代器模式
《大话设计模式》学习笔记15:组合模式
《大话设计模式》学习笔记14:备忘录模式
软件推荐
Copyright © 2011-2022 走看看