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
>
查看全文
相关阅读:
web api中允许跨域访问
HTTP Error 500.19
使用SQL语句时应该注意的一些问题
关于EsayUI中datagrid重复提交后台查询数据的问题
EF6中使用事务的方法
jquery中常用的方法和注意点
在EF中正确的使用事务
css解决移动端1px边框问题
判定 JS 数据类型的最佳解决方案
将伪数组转化为真数组
原文地址:https://www.cnblogs.com/SummerRain/p/799441.html
最新文章
GCC 命令
软件设计原则
指针
常用数据类型
C程序编译方法
C语言之return值定义
搭建开发环境
正交表达式
C#:按enter键自动执行button事件
【除非 Windows Activation Service (WAS)和万维网发布服务(W3SVC)均处于运行状态,否则无法启动网站】处理办法
热门文章
K3 WISE常用数据表
Windiows server 2012:开机密码忘记处理办法
Windows API 摘要
vs2017打包时,winfrom生成安装包提示缺少visualstudio2008 shell(Integrated)-CH处理办法
C# DataGridView显示行号的三种方法 (转载)
C# DataGridView添加右键菜单等技巧(转载)
金蝶K3系统19年度增值税率调整(16改13,10改9)操作步骤 (转载)
如何使用API_api接口有什么优点(转载)
在webapi中为Action使用dynamic参数实现Post方式调用
通过url方式传递中文参数时出现的中文乱码问题的处理
Copyright © 2011-2022 走看看