开发者社区> 夏春涛> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

[转]不间断连续图片滚动效果的制作方法(JS)

简介: From: http://x8.maicoo.com/tech/9/225.html以前我们站点也介绍过连续滚动的图片,但缺陷是有间断。如何制作连续不间断的播放滚动呢?请参看制作方法:  先制作向上滚动的效果:(演示:http://x8.
+关注继续查看
From: http://x8.maicoo.com/tech/9/225.html

以前我们站点也介绍过连续滚动的图片,但缺陷是有间断。如何制作连续不间断的播放滚动呢?请参看制作方法:
  先制作向上滚动的效果:(演示:http://x8.maicoo.com/tech/9/225.html)
img_a6339ee3e57d1d52bc7d02b338e15a60.gif<!-- 指向链接图片url -->
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<base href="http://www.it365cn.com">
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<div id=demo style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<div id=demo1>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<!-- 定义图片 -->
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<img src="images/logo_1.gif">
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<img src="images/logo/flashempire.gif">
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<img src="images/logo.gif">
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<img src="images/logo/5dmedia.gif">
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<img src="images/logo/macromedia.gif">
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<img src="images/logo/sucaiw.gif">
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<img src="images/logo/blueieda.gif">
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<img src="images/logo/htmlcn.gif">
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<img src="images/logo/fwcn.gif">
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</div>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<div id=demo2></div>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</div>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
<script>img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif
img_33d02437d135341f0800e3d415312ae8.gif
var speed=30
img_33d02437d135341f0800e3d415312ae8.gifdemo2.innerHTML
=demo1.innerHTML
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
function Marquee()img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif
if(demo2.offsetTop-demo.scrollTop<=0)
img_33d02437d135341f0800e3d415312ae8.gifdemo.scrollTop
-=demo1.offsetHeight
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
elseimg_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gifdemo.scrollTop
++
img_105a1e124122b2abcee4ea8e9f5108f3.gif}

img_105a1e124122b2abcee4ea8e9f5108f3.gif}

img_33d02437d135341f0800e3d415312ae8.gif
var MyMar=setInterval(Marquee,speed)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gifdemo.onmouseover
=function() img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{clearInterval(MyMar)}
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gifdemo.onmouseout
=function() img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{MyMar=setInterval(Marquee,speed)}
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</script>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif

制作向下滚动的效果:
  将上面“制作向上滚动的效果”中的红色字体Js部分替换成:
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif<script>img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif
img_33d02437d135341f0800e3d415312ae8.gif
var speed=30
img_33d02437d135341f0800e3d415312ae8.gifdemo2.innerHTML
=demo1.innerHTML
img_33d02437d135341f0800e3d415312ae8.gifdemo.scrollTop
=demo.scrollHeight
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
function Marquee()img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif
if(demo1.offsetTop-demo.scrollTop>=0)
img_33d02437d135341f0800e3d415312ae8.gifdemo.scrollTop
+=demo2.offsetHeight
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
elseimg_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gifdemo.scrollTop
--
img_105a1e124122b2abcee4ea8e9f5108f3.gif}

img_105a1e124122b2abcee4ea8e9f5108f3.gif}

img_33d02437d135341f0800e3d415312ae8.gif
var MyMar=setInterval(Marquee,speed)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gifdemo.onmouseover
=function() img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{clearInterval(MyMar)}
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gifdemo.onmouseout
=function() img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{MyMar=setInterval(Marquee,speed)}
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</script>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif

制作向左滚动的效果:
img_a6339ee3e57d1d52bc7d02b338e15a60.gif<base href="http://www.it365cn.com">
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<table align=left cellpadding=0 cellspace=0 border=0>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<tr>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<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">
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</td>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<td id=demo2 valign=top></td>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</tr>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</table>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</div>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
<script>img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif
img_33d02437d135341f0800e3d415312ae8.gif
var speed=30
img_33d02437d135341f0800e3d415312ae8.gifdemo2.innerHTML
=demo1.innerHTML
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
function Marquee()img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif
if(demo2.offsetWidth-demo.scrollLeft<=0)
img_33d02437d135341f0800e3d415312ae8.gifdemo.scrollLeft
-=demo1.offsetWidth
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
elseimg_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gifdemo.scrollLeft
++
img_105a1e124122b2abcee4ea8e9f5108f3.gif}

img_105a1e124122b2abcee4ea8e9f5108f3.gif}

img_33d02437d135341f0800e3d415312ae8.gif
var MyMar=setInterval(Marquee,speed)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gifdemo.onmouseover
=function() img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{clearInterval(MyMar)}
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gifdemo.onmouseout
=function() img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{MyMar=setInterval(Marquee,speed)}
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</script>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif


制作向右滚动的效果:
  将上面“制作向左滚动的效果”中的红色字体Js部分替换成:
img_a6339ee3e57d1d52bc7d02b338e15a60.gif<base href="http://www.it365cn.com">
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<table align=left cellpadding=0 cellspace=0 border=0>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<tr>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<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">
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</td>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
<td id=demo2 valign=top></td>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</tr>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</table>
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</div>
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
<script>img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif
img_33d02437d135341f0800e3d415312ae8.gif
var speed=30
img_33d02437d135341f0800e3d415312ae8.gifdemo2.innerHTML
=demo1.innerHTML
img_33d02437d135341f0800e3d415312ae8.gifdemo.scrollLeft
=demo.scrollWidth
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
function Marquee()img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gif
if(demo.scrollLeft<=0)
img_33d02437d135341f0800e3d415312ae8.gifdemo.scrollLeft
+=demo2.offsetWidth
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif
elseimg_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{
img_33d02437d135341f0800e3d415312ae8.gifdemo.scrollLeft
--
img_105a1e124122b2abcee4ea8e9f5108f3.gif}

img_105a1e124122b2abcee4ea8e9f5108f3.gif}

img_33d02437d135341f0800e3d415312ae8.gif
var MyMar=setInterval(Marquee,speed)
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gifdemo.onmouseover
=function() img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{clearInterval(MyMar)}
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gifdemo.onmouseout
=function() img_a76e9bb6ed00cf1c9c9f4ee2f04b558b.gif{MyMar=setInterval(Marquee,speed)}
img_a6339ee3e57d1d52bc7d02b338e15a60.gif
</script>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JS实现图片跟随鼠标进行浮动
JS实现图片跟随鼠标进行浮动
15 0
制作了一个马赛克图片转换器
制作了一个马赛克图片转换器,可以将图片转换成马赛克风格,并可转换为 css box-shadow 进行输出。
15 0
【聚能聊有奖话题】js、css和图片文件合并是真优化还是伪优化?
前端优化中,文件合并及压缩总是会被作为很重要的一条提及。最主要的依据是减少了大量的http请求。那么文件真的能大幅降低服务器压力吗?
1182 0
iOS 开发之字符串转图片
UIFont *font = [UIFont fontWithName:@"Menlo" size:12 * 2]; UIImage *wenbenImage = [self imageWithString:Str font:font width:57...
883 0
鼠标移到图片放大效果
鼠标移到图片放大效果 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; * { margin:0; padding:0
1167 0
20个漂亮 CSS3 按钮效果及优秀的制作教程
  在这篇文章中,我们编译了一组有用的 CSS3 动画按钮教程和引人注目的实验。正如我们都知道的,CSS3 在网页设计方面是最重要和最关键的,可以使您的网站对访客更具吸引力和互动性。你可以学习这些教程和试验中的优秀技术并使用它们为您的网站作品创造更多的乐趣。
1013 0
+关注
夏春涛
曾任教于信息工程大学16年,长期从事计算机软件与信息安全教学科研工作,目前任职于某软件公司从事技术管理工作,擅长架构设计、开发管理,对大数据、分布式颇感兴趣。
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载