引用
文字无间隙向上滚动,下面为页面代码:
<!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 id="marquees"><a href="#">欢迎使用我的个人文字滚动</a><br>
<a href="#">欢迎使用我。。。。。</a><br>
<a href="#">我的个人文字滚动</a><br>
<!-- 字幕内容结束 -->
</div>
<!-- 以下是javascript代码 -->
<script language="javascript">
<!--
marqueesHeight=50; //内容区高度
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()",120);
}
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>
</body>
</html>
分享到:
相关推荐
文字无间隙一直滚动,文字向上滚动,文字向右滚动
无间隙循环滚动鼠标浮动停止滚动
HTML 向上和向左滚动的无间隙滚动js.
向左无间隙的滚动图片,鼠标经过暂停,鼠标移开运动
JS 控制GRIDVIEW 上下无间隙滚动!
消息列表向上滚动,不使用js操作,纯css3实现向上无缝滚动。
使用js来控制的单行文字不断向上滚动,无间隙,当鼠标点击时,就自动停止滚动,适合公告以及信息公示使用
是用javascript脚本做的一个实例,一个滚动没有间隙的实例
可以实现图片或文字平滑连续向上或向左滚动 鼠标移动到图片(文字)上停止滚动,移去后继续滚动。 当前图片(文字)数量少于指定数量且图片(文字)总长(宽)度小于指定长(宽)时不进行滚动。 参与滚动的图片...
该源码界面展示文章地址:https://www.cnblogs.com/lifexy/p/13867016.html,主要实现了无间隙滚动条字幕,支持自适应主界面大小,根据主界面窗口变换,自动更正文本大小,速度,下载下来就可以编译
NULL 博文链接:https://gaojunwei.iteye.com/blog/1910608
很久以前就有这个问题,总是找不到通用的,或比较简单的“图片连续无间隙向左滚动,无间隙向右滚动,符合W3C Web标准”
学习中…本段JS制作参考 MSClass.js 代码如下:boxmove(d1,d2,d3,e,obj) d1 = 外围容器 d2 = 内容 d3 = 复制d2的内容接替循环滚动 e = 方向与方法 1,2,3,4 = 自动滚动,分别对应:上,右,下,左 ...
js 无缝滚动,鼠标放上去暂停代码,供大家学习和程序中使用
JS不间断向左滚动javascript无缝隙
本文主要分享了原生js实现中奖信息无间隙滚动效果的示例代码。具有一定的参考价值,下面跟着小编一起来看下吧
自定义的ViewGroup实现的无缝连接可循环滚动布局,使用较为简单,虽然命名有点随便
Discuz 公告效果效果代码,可以自动换行和无间隙滚动