javascript图片和文字不间断滚动显示
2012-03-26 15:23
651 查看
不做解释，自己分析。
纵向滚动（代码有待完善）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div style="overflow:hidden; width:171px; position:relative; height:265px; background-color:#CCC" onmouseover="tzgd()" onmouseout="jxgd()">
<div id="ss" style="position:absolute; width:140px; background-color:#CF3">
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td height="4" colspan="12" align="center"></td>
</tr>
<tr>
<td align="center">1111</td>
<td align="center">2222</td>
</tr>
<tr>
<td align="center">3333</td>
<td align="center">4444</td>
</tr>
<tr>
<td align="center">5555</td>
<td align="center">6666</td>
</tr>
</table></div>
<div id="ss2" style="position:absolute; width:140px; background-color:#009999">
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td height="4" colspan="12" align="center"></td>
</tr>
<tr>
<td align="center">1111</td>
<td align="center">2222</td>
</tr>
<tr>
<td align="center">3333</td>
<td align="center">4444</td>
</tr>
<tr>
<td align="center">5555</td>
<td align="center">6666</td>
</tr>
</table></div>
</div>
<script type="text/javascript">
var i,i2;
var tt;
var sj;
if (document.getElementById("ss").offsetHeight < 265)
{
document.getElementById("ss").style.height=265+"px";
}
if (document.getElementById("ss2").offsetHeight < 265)
{
document.getElementById("ss2").style.height=265+"px";
}
i=-(document.getElementById("ss").offsetHeight-265);
document.getElementById("ss").style.left=13+"px";
document.getElementById("ss2").style.left=13+"px";
document.getElementById("ss2").style.bottom=-document.getElementById("ss").offsetHeight+"px";
function gd()
{
document.getElementById("ss").style.bottom=i+"px";
i=i+1;
if ((document.getElementById("ss").style.bottom).replace(/px/,"") == 0)
{
i2=-document.getElementById("ss").offsetHeight;
sj=1;
}
if (sj==1)
{
document.getElementById("ss2").style.bottom=i2+"px";
i2=i2+1;
}
if ((document.getElementById("ss2").style.bottom).replace(/px/,"") == 0)
{
i=-document.getElementById("ss").offsetHeight;
}
}
tt=setInterval("gd()",1)
function tzgd()
{
clearInterval(tt);
}
function jxgd()
{
tt=setInterval("gd()",1);
}
</script>
</body>
</html>
横向滚动：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="demo5" style="OVERFLOW:hidden; width:100px;">
<table width="100%" border="0" align="left" cellPadding="0" cellspacing="0" cellspace="0">
<tr>
<td id="demo6" valign="top"><table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td align="center"><div style="width:102px; height:102px; border:1px solid #e0e0e0; padding:5px 5px 5px 5px;"><img src="#" style="width:102px; height:102px;" /></div></td>
<td rowspan="2"><div style="width:23px; height:100%;"></div></td>
</tr>
<tr>
<td align="center">dd</td>
</tr>
</table></td>
<td id="demo7"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var dir2=1//每步移动像素，大＝快
var speed2=30//循环周期（毫秒）大＝慢
demo7.innerHTML=demo6.innerHTML
function Marquee2(){//正常移动
//alert(demo2.offsetWidth+"\n"+demo.scrollLeft)
if (dir2>0 && (demo7.offsetWidth-demo5.scrollLeft)<=0) demo5.scrollLeft=0
if (dir2<0 &&(demo5.scrollLeft<=0)) demo5.scrollLeft=demo7.offsetWidth
demo5.scrollLeft+=dir2
demo5.onmouseover=function() {clearInterval(MyMar)}//暂停移动
demo5.onmouseout=function() {MyMar=setInterval(Marquee2,speed2)}//继续移动
}
function r_left2(){if (dir2=-1)dir2=1}//换向左移
function r_right2(){if (dir2=1)dir2=-1}//换向右移
var MyMar=setInterval(Marquee2,speed2)
</script>
</body>
</html>
纵向滚动（代码有待完善）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div style="overflow:hidden; width:171px; position:relative; height:265px; background-color:#CCC" onmouseover="tzgd()" onmouseout="jxgd()">
<div id="ss" style="position:absolute; width:140px; background-color:#CF3">
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td height="4" colspan="12" align="center"></td>
</tr>
<tr>
<td align="center">1111</td>
<td align="center">2222</td>
</tr>
<tr>
<td align="center">3333</td>
<td align="center">4444</td>
</tr>
<tr>
<td align="center">5555</td>
<td align="center">6666</td>
</tr>
</table></div>
<div id="ss2" style="position:absolute; width:140px; background-color:#009999">
<table width="100%" border="0" cellspacing="0" cellpadding="1">
<tr>
<td height="4" colspan="12" align="center"></td>
</tr>
<tr>
<td align="center">1111</td>
<td align="center">2222</td>
</tr>
<tr>
<td align="center">3333</td>
<td align="center">4444</td>
</tr>
<tr>
<td align="center">5555</td>
<td align="center">6666</td>
</tr>
</table></div>
</div>
<script type="text/javascript">
var i,i2;
var tt;
var sj;
if (document.getElementById("ss").offsetHeight < 265)
{
document.getElementById("ss").style.height=265+"px";
}
if (document.getElementById("ss2").offsetHeight < 265)
{
document.getElementById("ss2").style.height=265+"px";
}
i=-(document.getElementById("ss").offsetHeight-265);
document.getElementById("ss").style.left=13+"px";
document.getElementById("ss2").style.left=13+"px";
document.getElementById("ss2").style.bottom=-document.getElementById("ss").offsetHeight+"px";
function gd()
{
document.getElementById("ss").style.bottom=i+"px";
i=i+1;
if ((document.getElementById("ss").style.bottom).replace(/px/,"") == 0)
{
i2=-document.getElementById("ss").offsetHeight;
sj=1;
}
if (sj==1)
{
document.getElementById("ss2").style.bottom=i2+"px";
i2=i2+1;
}
if ((document.getElementById("ss2").style.bottom).replace(/px/,"") == 0)
{
i=-document.getElementById("ss").offsetHeight;
}
}
tt=setInterval("gd()",1)
function tzgd()
{
clearInterval(tt);
}
function jxgd()
{
tt=setInterval("gd()",1);
}
</script>
</body>
</html>
横向滚动：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div id="demo5" style="OVERFLOW:hidden; width:100px;">
<table width="100%" border="0" align="left" cellPadding="0" cellspacing="0" cellspace="0">
<tr>
<td id="demo6" valign="top"><table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td align="center"><div style="width:102px; height:102px; border:1px solid #e0e0e0; padding:5px 5px 5px 5px;"><img src="#" style="width:102px; height:102px;" /></div></td>
<td rowspan="2"><div style="width:23px; height:100%;"></div></td>
</tr>
<tr>
<td align="center">dd</td>
</tr>
</table></td>
<td id="demo7"></td>
</tr>
</table>
</div>
<script type="text/javascript">
var dir2=1//每步移动像素，大＝快
var speed2=30//循环周期（毫秒）大＝慢
demo7.innerHTML=demo6.innerHTML
function Marquee2(){//正常移动
//alert(demo2.offsetWidth+"\n"+demo.scrollLeft)
if (dir2>0 && (demo7.offsetWidth-demo5.scrollLeft)<=0) demo5.scrollLeft=0
if (dir2<0 &&(demo5.scrollLeft<=0)) demo5.scrollLeft=demo7.offsetWidth
demo5.scrollLeft+=dir2
demo5.onmouseover=function() {clearInterval(MyMar)}//暂停移动
demo5.onmouseout=function() {MyMar=setInterval(Marquee2,speed2)}//继续移动
}
function r_left2(){if (dir2=-1)dir2=1}//换向左移
function r_right2(){if (dir2=1)dir2=-1}//换向右移
var MyMar=setInterval(Marquee2,speed2)
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 网页中实现文字或图片向上不间断滚动的javascript代码
- C#跑马灯，图片滚动，后台获取图片地址。动态绑定图片，imag显示文字
- javascript图片文字上下滚动效果
- 让文字在图片上滚动显示
- 怎么让绑定的图片不间断滚动显示，且显示区域只显示部分图片？
- JS实现title标题栏文字不间断滚动显示效果
- jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
- JS实现title标题栏文字不间断滚动显示效果
- 不间断连续滚动，文字图片都可以
- [javascript]鼠标滑过列表文字显示图片及详细信息
- JQuery 文字图片循环不间断滚动（向左）
- javascript 单行文字向上跑马灯滚动显示
- 文字不间断向上滚动--javascript+div+ul+li
- 用javascript实现的图片马赛克后显示并切换加文字功能
- jQuery模拟百度新闻不间断滚动效果，支持文字、图片水平垂直滚动
- 纯javascript实现文字、图片无限滚动效果
- javascript for 不间断的图片滚动 - 可点击
- MSClass 图片/文字不间断滚动\间歇滚动\翻屏滚动类
- 不间断滚动图片Javascript特效讲解_Javascript教程
- javascript实现文字图片上下滚动的具体实例