文字不间断滚动(上下左右)实例代码


Posted in Javascript onApril 21, 2013

向上

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>连续向上滚动</title>
<style type="text/css">
<!--
body {
 font-size: 9pt;
 color: #000000;
}
a {
    color: #0000FF;
 text-decoration: none;
}
a:hover {
 color: #FF0000;
 text-decoration: underline;
}
-->
</style>
</head>
<body>
<div id="marquees"> <a href="#">链接一</a><br>
  <br>
  <a href="#">链接二</a><br>
  <br>
  <a href="#">链接三</a><br>
  <br>
  <a href="#">链接四</a><br>
  <br>
</div>
<script language="JavaScript">
marqueesHeight=200;
stopscroll=false;
with(marquees){
  style.width=0;
  style.height=marqueesHeight;
  style.overflowX="visible";
  style.overflowY="hidden";
  noWrap=true;
  onmouseover=new Function("stopscroll=true");
  onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
preTop=0; currentTop=0;
function init(){
  templayer.innerHTML="";
  while(templayer.offsetHeight<marqueesHeight){
    templayer.innerHTML+=marquees.innerHTML;
  }
  marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
  setInterval("scrollUp()",100);
}
document.body.onload=init;
function scrollUp(){
  if(stopscroll==true) return;
  preTop=marquees.scrollTop;
  marquees.scrollTop+=1;
  if(preTop==marquees.scrollTop){
    marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
    marquees.scrollTop+=1;
  }
}
</script>
</body>
</html>

向下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>连续向下滚动</title>
<style type="text/css">
<!--
body {
 font-size: 9pt;
 color: #000000;
}
a {
    color: #0000FF;
 text-decoration: none;
}
a:hover {
 color: #FF0000;
 text-decoration: underline;
}
-->
</style>
</head>
<body>
<div id="marquees"> <a href="#">链接一</a><br>
  <br>
  <a href="#">链接二</a><br>
  <br>
  <a href="#">链接三</a><br>
  <br>
  <a href="#">链接四</a><br>
  <br>
</div>
<script language="JavaScript">
marqueesHeight=200;
with(marquees){
style.width=0;
style.height=marqueesHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');
preTop=0; currentTop=0;getlimit=0;stopscroll=false;
function init(){
templayer.innerHTML="";
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollDown()",10);
}init();
function scrollDown(){
if(stopscroll==true) return;
preTop=marquees.scrollTop;
marquees.scrollTop-=1;
if(preTop==marquees.scrollTop){
  if(!getlimit){
    marquees.scrollTop=templayer.offsetHeight*2;
    getlimit=marquees.scrollTop;
  }
marquees.scrollTop=getlimit-templayer.offsetHeight+marqueesHeight;
marquees.scrollTop-=1;
}
}
</script>
</body>
</html>

向左
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>连续向左滚动</title>
<style type="text/css">
<!--
body {
 font-size: 9pt;
 color: #000000;
}
a {
    color: #0000FF;
 text-decoration: none;
}
a:hover {
 color: #FF0000;
 text-decoration: underline;
}
-->
</style>
</head>
<body>
<div id="marquees"> <a href="#">链接一</a> <a href="#">链接二</a> <a href="#">链接三</a> <a href="#">链接四</a> </div>
<div id="templayer" style="position:absolute;left:0;top:0;visibility:hidden"></div>
<script language="JavaScript">
marqueesWidth=200;
with(marquees){
style.height=0;
style.width=marqueesWidth;
style.overflowX="hidden";
style.overflowY="visible";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
preLeft=0; currentLeft=0; stopscroll=false;
function init(){
templayer.innerHTML="";
while(templayer.offsetWidth<marqueesWidth){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollLeft()",100);
}init();
function scrollLeft(){
if(stopscroll==true) return;
preLeft=marquees.scrollLeft;
marquees.scrollLeft+=1;
if(preLeft==marquees.scrollLeft){
  marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1;
}
}

</script>
</body>
</html>

向右
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>连续向右滚动</title>
<style type="text/css">
<!--
body {
 font-size: 9pt;
 color: #000000;
}
a {
    color: #0000FF;
 text-decoration: none;
}
a:hover {
 color: #FF0000;
 text-decoration: underline;
}
-->
</style>
</head>
<body>
<div id="marquees"> <a href="#">链接一</a> <a href="#">链接二</a> <a href="#">链接三</a> <a href="#">链接四</a> </div>
<div id="templayer" style="position:absolute;left:0;top:0;visibility:hidden"></div>
<script language="JavaScript">
marqueesWidth=200;
with(marquees){
style.height=0;
style.width=marqueesWidth;
style.overflowX="hidden";
style.overflowY="visible";
noWrap=true;
onmouseover=new Function("stopscroll=true");
onmouseout=new Function("stopscroll=false");
}
preTop=0; currentTop=0; getlimit=0; stopscroll=false;
function init(){
templayer.innerHTML="";
while(templayer.offsetWidth<marqueesWidth){
templayer.innerHTML+=marquees.innerHTML;
}
marquees.innerHTML+=templayer.innerHTML;
setInterval("scrollRight()",10);
}init();
function scrollRight(){
if(stopscroll==true) return;
preLeft=marquees.scrollLeft;
marquees.scrollLeft-=1;
if(preLeft==marquees.scrollLeft){
  if(!getlimit){
    marquees.scrollLeft=templayer.offsetWidth*2;
    getlimit=marquees.scrollLeft;
  }
  marquees.scrollLeft=getlimit-templayer.offsetWidth+marqueesWidth;
  marquees.scrollLeft-=1;
}
}
</script>
</body>
</html>
Javascript 相关文章推荐
Gird组件 Part-3:范例RSSFeed Viewer
Mar 10 Javascript
Javascript 面试题随笔
Mar 31 Javascript
js用正则表达式来验证表单(比较齐全的资源)
Nov 17 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
May 12 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
javascript函数式编程基础
Sep 15 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 #Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 #Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 #Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 #Javascript
jQuery获取注册信息并提示实现代码
Apr 21 #Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 #Javascript
jQuery模拟超链接点击效果代码
Apr 21 #Javascript
You might like
PHP类的使用 实例代码讲解
2009/12/28 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
SESSION存放在数据库用法实例
2015/08/08 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
js判断浏览器类型为ie6时不执行
2014/06/15 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
jQuery图片轮播实现并封装(一)
2016/12/03 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
2019/11/10 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python使用递归解决全排列数字示例
2014/02/11 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
python采集百度百科的方法
2015/06/05 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python3数据库操作包pymysql的操作方法
2018/07/16 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
Python程序慢的重要原因
2020/09/04 Python
力学专业求职信
2014/07/23 职场文书
处级干部反四风个人对照检查材料思想汇报
2014/09/27 职场文书
综合测评自我评价
2015/03/06 职场文书
2016入党心得体会范文
2016/01/06 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python