上下循环滚动,均匀,有初始内容,高手帮忙100分求 上下循环滚动滚动速度均匀滚动前有内容显示在线等,求 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 搜索googlejavascript 连续滚动 搬一搬 我们一般都用Marquee标签控制元素的滚动。但是单向的Marquee滚动是不连续的,每滚完一幕,就会出现一次空白。而下面介绍中的滚动则是连续的,毫不间断。 下面小阳为你介绍这是如何实现的。 为了滚动能够“连续”,我们需要将字幕的内容复制多遍,直到内容的高度不小于滚<广告> <广告> 动区高度的两倍。然后我们将溢出的滚动条隐藏掉,用代码控制滚动条向下移动(这时内容将向上移动)。当滚动条滚动到最下方时,理论上不能再往下滚动了,于是我们立刻调整滚动条,将它向上滚动到一个和当前画面一样的位置。结果我们看到的就是连续的滚动了。呵呵,说的就是这么简单,那做起来如何呢?我们看看是如何逐步实现的。<div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --> <a href="#">链接一</a><br> <a href="#">链接二</a><br> <a href="#">链接三</a><br> <a href="#">链接四</a><br> <!-- 字幕内容结束 --></div> <!-- 以下是java-script代码 --><script language="java-script"><!--marqueesHeight=200; //内容区高度stopscroll=false; //这个变量控制是否停止滚动with(marquees){noWrap=true; //这句表内容区不自动换行style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大style.height=marqueesHeight;style.overflowY="hidden"; //滚动条不可见onmouseover=new Function("stopscroll=true"); //鼠标经过,停止滚动onmouseout=new Function("stopscroll=false"); //鼠标离开,开始滚动}//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:document.write('<div id="templayer"style="position:absolute;z-index:1;visibility:hidden"></div>');function init(){ //初始化滚动内容//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:while(templayer.offsetHeight<marqueesHeight){templayer.innerHTML+=marquees.innerHTML;} //把"templayer"的内容的“两倍”复制回原内容区:marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;//设置连续超时,调用"scrollUp()"函数驱动滚动条:setInterval("scrollUp()",10);}document.body.onload=init;preTop=0; //这个变量用于判断滚动条是否已经到了尽头function scrollUp(){ //滚动条的驱动函数if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动 preTop=marquees.scrollTop; //记录滚动前的滚动条位置marquees.scrollTop+=1; //滚动条向下移动一个像素//如果滚动条不动了,则向上滚动到和当前画面一样的位置//当然不仅如此,同样还要向下滚动一个像素(+1):if(preTop==marquees.scrollTop){marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;}}--></script>这样就完成了,感觉做起来也不难吧。 <marquee id="marquee_dkzxgdl" direction="left" bgcolor="#FFFFFF" width="654px" scrollamount="3" scrolldelay="1" loop="-1" style="height: 31px; line-height:31px; ">当中是你需要滚动的内容</marquee> 参考一下看是否合适.....<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>TEST</title></head> <style type="text/css">*{font-family:verdana; font-size:12px; margin:2px; padding:0}td{border:1px solid #DDDDDD;}</style><body><base href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/"> <div id="demo" style="overflow:hidden; width:128px; height:300px;"> <div id="demo1"></div> <div id="demo2"></div> </div> <script language="javascript" type="text/javascript"> function $(id){return "string" == typeof(id) ? document.getElementById(id) : id;}//---------------------------------------------var myPlayerID;var speed=30;//$("demo2").innerHTML=$("demo1").innerHTML function Marquee(){ if($("demo2").offsetTop-$("demo").scrollTop<=0) $("demo").scrollTop-=$("demo1").offsetHeight ; else{ $("demo").scrollTop++ ; } } //---------------------------------------------function loadPic() { var d=document; if(d.images) { if(!d.PicList) d.PicList=new Array(); var i,j=d.PicList.length,a=loadPic.arguments; var strImg=""; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ strImg+="<img src=\""+a[i]+"\" width=\"130\" height=\"100\"><br>"; d.PicList[j]=new Image; d.PicList[j++].src=a[i]; } $("demo1").innerHTML=strImg; $("demo2").innerHTML=strImg; $("demo").onmouseover=function(){clearInterval(myPlayerID);} $("demo").onmouseout=function(){myPlayerID=setInterval(Marquee,speed);} myPlayerID=setInterval(Marquee,speed); }}loadPic('http://avatar.profile.csdn.net/2/F/C/2_xty001.jpg','http://avatar.profile.csdn.net/C/9/4/2_net_lover.jpg','http://avatar.profile.csdn.net/A/9/7/2_theforever.jpg','http://avatar.profile.csdn.net/5/F/6/2_jhll.jpg','http://avatar.profile.csdn.net/5/1/9/2_shenzhennba.jpg');</script></body></html>分分...... :) JavaScript 将鼠标指针替换成图片 jquery 怎么实现类似E都市的Tab效果 高分急求高手来解决Js难题!!! Firefox如何触发上传控件file的click()事件? /<[^>]*>/ 请问这个正则怎么解释 ▲▲▲高手帮忙IE转火狐 这个是页面里所有的ID.我如何能知道,<table id=momoca>里的td呢? 急:这个XML文件的节点参数怎么读? 一个简单得问题,如何让文本框在打开页面是不可见? 100分求购日期输入弹出框 javascript 在IE 好用 FF上就不好用。 [悬赏求助]asp.net的js生成控件的事件问题
javascript 连续滚动
动区高度的两倍。然后我们将溢出的滚动条隐藏掉,用代码控制滚动条向下移动(这时内容将向上移动)。当滚动条滚动到最下方时,理论上不能再往下滚动了,于是我们立刻调整滚动条,将它向上滚动到一个和当前画面一样的位置。结果我们看到的就是连续的滚动了。呵呵,说的就是这么简单,那做起来如何呢?我们看看是如何逐步实现的。<div id="marquees"> <!-- 这些是字幕的内容,你可以任意定义 --> <a href="#">链接一</a>
<br> <a href="#">链接二</a>
<br> <a href="#">链接三</a>
<br> <a href="#">链接四</a>
<br> <!-- 字幕内容结束 -->
</div>
<!-- 以下是java-script代码 -->
<script language="java-script">
<!--
marqueesHeight=200; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
style.height=marqueesHeight;
style.overflowY="hidden"; //滚动条不可见
onmouseover=new Function("stopscroll=true"); //鼠标经过,停止滚动
onmouseout=new Function("stopscroll=false"); //鼠标离开,开始滚动
}
//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:
document.write('<div id="templayer"
style="position:absolute;z-index:1;visibility:hidden"></div>');
function init(){ //初始化滚动内容
//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的内容的“两倍”复制回原内容区:
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//设置连续超时,调用"scrollUp()"函数驱动滚动条:
setInterval("scrollUp()",10);
}
document.body.onload=init;
preTop=0; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1; //滚动条向下移动一个像素
//如果滚动条不动了,则向上滚动到和当前画面一样的位置
//当然不仅如此,同样还要向下滚动一个像素(+1):
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
-->
</script>这样就完成了,感觉做起来也不难吧。
当中是你需要滚动的内容
</marquee>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>TEST</title>
</head>
<style type="text/css">
*{font-family:verdana; font-size:12px; margin:2px; padding:0}
td{border:1px solid #DDDDDD;}
</style>
<body>
<base href="http://image2.sina.com.cn/gm/lineage2/whz/newwh/images/fy/images/images/ifimage/"> <div id="demo" style="overflow:hidden; width:128px; height:300px;">
<div id="demo1"></div>
<div id="demo2"></div>
</div>
<script language="javascript" type="text/javascript">
function $(id){
return "string" == typeof(id) ? document.getElementById(id) : id;
}
//---------------------------------------------var myPlayerID;
var speed=30;
//$("demo2").innerHTML=$("demo1").innerHTML
function Marquee(){
if($("demo2").offsetTop-$("demo").scrollTop<=0)
$("demo").scrollTop-=$("demo1").offsetHeight ;
else{
$("demo").scrollTop++ ;
}
}
//---------------------------------------------function loadPic() {
var d=document;
if(d.images)
{
if(!d.PicList)
d.PicList=new Array();
var i,j=d.PicList.length,a=loadPic.arguments;
var strImg="";
for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){
strImg+="<img src=\""+a[i]+"\" width=\"130\" height=\"100\"><br>";
d.PicList[j]=new Image;
d.PicList[j++].src=a[i];
}
$("demo1").innerHTML=strImg;
$("demo2").innerHTML=strImg;
$("demo").onmouseover=function(){clearInterval(myPlayerID);}
$("demo").onmouseout=function(){myPlayerID=setInterval(Marquee,speed);}
myPlayerID=setInterval(Marquee,speed);
}
}
loadPic('http://avatar.profile.csdn.net/2/F/C/2_xty001.jpg','http://avatar.profile.csdn.net/C/9/4/2_net_lover.jpg','http://avatar.profile.csdn.net/A/9/7/2_theforever.jpg','http://avatar.profile.csdn.net/5/F/6/2_jhll.jpg','http://avatar.profile.csdn.net/5/1/9/2_shenzhennba.jpg');
</script>
</body>
</html>
分分...... :)