设为首页
加入收藏
联系站长
 | 网站首页 | 站长学院 | 资源中心 | 图片中心 | 在线留言 | 动易商城 | 
您现在的位置: e商学堂 >> 站长学院 >> 网站建设 >> 网页制作 >> 正文 用户登录 新用户注册
不间断连续图片滚动效果的制作方法         
不间断连续图片滚动效果的制作方法
作者:佚名 文章来源:网络 点击数: 更新时间:2005-2-10 0:36:16
以前我们站点也介绍过连续滚动的图片,但缺陷是有间断。如何制作连续不间断的播放滚动呢?请参看制作方法:
  先制作向上滚动的效果:
  插入代码:
<!-- 指向链接图片url -->
<base href="http://www.it365cn.com">
<div id=demo style=overflow:hidden;height:150;width: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;width: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部分替换成:
<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>

  制作的方法就简单的介绍完成了。
文章录入:admin    责任编辑:admin 
  • 上一篇文章:

  • 下一篇文章:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    关于版权声明的写法
    用HTML编制应用程序
    用js封装的时间设置器1
    DWMX+ACCESS打造企业新
    DWMX+ACCESS打造企业新
    固顶文章免费网络电话tom skype
    固顶文章网络相册快乐分享 玩转
    固顶文章免费虚拟主机申请 免费
    固顶文章站长赚钱-支持弹窗赚钱
    固顶文章最好的企业网页空间 送
    固顶文章免费虚拟主机申请 免费
    推荐文章火狐与百度合作 浏览器
    推荐文章不一样的2007 戴尔直销
    推荐文章用Skype网上免费打电话
    推荐文章Picasa新机遇,Google宣

    网络相册快乐分享

    免费虚拟主机申请

    便宜的网络空间 A
    (只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 |