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


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 相关文章推荐
在你的网页中嵌入外部网页的方法
Apr 02 Javascript
js GridView 实现自动计算操作代码
Mar 25 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
ECMAScript 5严格模式(Strict Mode)介绍
Mar 02 Javascript
jQuery实现高亮显示的方法
Mar 10 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
Angular 应用技巧总结
Sep 14 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
echarts大屏字体自适应的方法步骤
Jul 12 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
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调用数据库的存贮过程
2006/10/09 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
YII2框架中ActiveDataProvider与GridView的配合使用操作示例
2020/03/18 PHP
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
jQuery实现图片加载完成后改变图片大小的方法
2016/03/29 Javascript
JS获取及验证开始结束日期的方法
2016/08/20 Javascript
canvas简单快速的实现知乎登录页背景效果
2017/05/08 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
node.js文件操作系统实例详解
2019/11/05 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
elementui更改el-dialog关闭按钮的图标d的示例代码
2020/08/04 Javascript
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
python3调用R的示例代码
2018/02/23 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
python如何查看网页代码
2020/06/07 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
美国知名女性服饰品牌:New York & Company
2017/03/23 全球购物
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
美国批发供应商:Kole Imports
2019/04/10 全球购物
文秘专业个人求职信
2013/12/22 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
环保建议书400字
2014/05/14 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
圣诞晚会主持词
2015/07/01 职场文书
小学六年级毕业感言
2015/07/30 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang
52条SQL语句教你性能优化
2021/05/25 MySQL
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python