| 网站首页 | | 网站简介 | | 公司新闻 | | 公司业务 | | 技术相关 | | 安全相关 | | 网络文章 | | 网站论坛 | | 典型案例 | | 客户留言 |  
 首页 >> 技术相关 >> JAVA技术

JavaScript不间断连续图片滚动效果


[日期:2006-3-18 21:29:06] [作者: 管理员] [字体大小:

 先制作向上滚动的效果:
插入代码:
<!-- 指向链接图片url -->
<base href="">
<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="">
<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>

    [阅读次数:164]
 [新闻出处:]
 上一条新闻: JavaScript:多图片变化且每次的效果不同
 下一条新闻: 经常用到的JavaScript技术
相关新闻:
站 内 搜 索
请输入查询的字符串:

 
点 击 排 行
页 面 广 告
 
关于我们 | 联系方式 | 支付方式 | 站点统计
版权所有 DoILike.Com Ltd.,地址:山东省济南市舜耕路22号综合楼101室
电 话:13065088567 联系人:许老师 设计制作:DoILike.COM