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


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 相关文章推荐
jQuery阻止同类型事件小结
Apr 19 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
Jun 04 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
node.js中的fs.writeFileSync方法使用说明
Dec 14 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
php基于redis处理session的方法
Mar 14 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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 split汉字
2009/06/05 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
ThinkPHP3.1新特性之对分组支持的改进与完善概述
2014/06/19 PHP
PHP二维数组去重算法
2016/12/17 PHP
javascript之ESC(第二类混淆)
2007/05/06 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
2017/05/07 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
在python中logger setlevel没有生效的解决
2020/02/21 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
市场部管理制度
2014/02/02 职场文书
2014年公司植树节活动方案
2014/03/04 职场文书
电气工程自动化求职信
2014/03/14 职场文书
群众路线领导对照材料
2014/08/23 职场文书
工伤事故证明
2014/10/20 职场文书
中学生逃课检讨书
2015/02/17 职场文书
义诊活动通知
2015/04/24 职场文书
商务宴会祝酒词
2015/08/11 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android