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
>
查看全文
相关阅读:
Java反射中Class.forName与classLoader的区别
Java各种成员初始化顺序
crontab python脚本不执行
Java mybatis缓存(转)
Java Synchronized及实现原理
JVM类加载器
SSH掉线问题
SSH登陆远程卡、慢的解决的办法
shell脚本执行python脚本时,python如何将返回值传给shell脚本
使用scrapy进行数据爬取
原文地址:https://www.cnblogs.com/SummerRain/p/799441.html
最新文章
DXP中插入LOGO图片方法(1)
简谈电容
稳压二极管型号大全(转载)
增益与衰减计算公式
量程扩展的模电采集电路
组合逻辑电路中的竞争_冒险现象
Quartz.NET 作业调度(一):Test
Quartz入门
C# WebApi 获取客户端ip地址
Postman安装与使用
热门文章
使用ASP.Net WebAPI构建REST服务(一)——简单的示例
net core 安装
dotnet core webapi +vue 搭建前后端完全分离web架构(一)
C#读取和写入XML文件
【C#】记录程序耗时方法
C#中TransactionScope的使用方法和原理
Java volatile关键字
Java GC问题
Java GC机制
python 读取大文件
Copyright © 2011-2022 走看看