利用JavaScript脚本实现滚屏效果的方法

许多制作网页的朋友常常制作公告板、信息窗，也经常为了实现整版页面和图像的滚屏显示而烦恼，不用着急，这里有一个简单的方法来实现滚屏显示。我们没有采用Java的.class程序来实现，也不是动态DHTML语言，只是充分地利用了JavaScript脚本语言的一些函数，写一些简短的JavaScript脚本语言就可实现这一功能。

　　原代码如下：
　　

<html>

　　<head>

　　<script language="Javascript">

　　<!--//防止错误显示

　　locate=0;

　　function my_scroller()

　　{

　　 if (locate !=400 )

　　{

　　 locate++;//值增加

　　 scroll(0,locate);

　　 clearTimeout(timer);

　　 var timer = setTimeout("my_scroller()",2);//控制滚动时间

　　 timer;

　　}

　　}

　　 -->

　　</script>

　　</head>

　　<body OnLoad="my_scroller()">

　　作者简介：<br><br>

　　崔同杰男<br><br>武警工程学院计算机中心<br><br>

　　张卫华男<br><br>武警工程学院研究生队<br><br><br><br><br>

　　<br><br><br><br><br><br>

　　联系地址：<br><br>

　　陕西西安武警工程学院计算机中心<br><br>崔同杰<br><br></body>

　　</html>

　　可以通过改动Locate的值来控制显示页面的长度(原代码为Locate!=400)；可修改“SetTimeout(“Scroller()”,2);”中的“2”来改变滚动速度。您可分别做一些调整试试。程序写完保存后需在PII+PWS4.0+IE5平台上调试通过。

　　简单吗？赶快去试试吧。

赞 (0)

相关推荐

  • javascript实现页面滚屏效果

    当我们浏览网页的时候,时常会碰到可以滚动屏幕的炫酷网页,今天笔者对这一技术进行简单实现,效果不及读者理想中那般炫酷,主要针对滚屏的技术原理和思想进行分享和分析.本示例在页面右侧有五个数字标签,代表五个页面,点击数字可以切换到对应的页面,滚动鼠标滑轮可以实现数字标签的切换,页面的切换.笔者未对页面的平稳滚动进行实现,读者可自行试验研究. 这是html代码: <!doctype html> <html> <head> <meta charset="UTF-8

  • 利用JavaScript脚本实现滚屏效果的方法

    许多制作网页的朋友常常制作公告板.信息窗,也经常为了实现整版页面和图像的滚屏显示而烦恼,不用着急,这里有一个简单的方法来实现滚屏显示.我们没有采用Java的.class程序来实现,也不是动态DHTML语言,只是充分地利用了JavaScript脚本语言的一些函数,写一些简短的JavaScript脚本语言就可实现这一功能. 原代码如下: <html> <head> <script language="Javascript"> <!--//防止错误显

  • jQuery实现公告新闻自动滚屏效果实例代码

    本文是小编参考网络上的一个小demo,自己做了下扩展,原来是向上滚动的,扩展了一个向下滚动的方法,具体实例代码如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>滚屏实验</ti

  • jQuery实现带有上下控制按钮的简单多行滚屏效果代码

    jQuery实现带有上下控制按钮的简单多行滚屏效果代码

    本文实例讲述了jQuery实现带有上下控制按钮的简单多行滚屏效果代码.分享给大家供大家参考.具体如下: 这里使用了jQuery插件来实现最简单的多行文字滚屏效果,还带有上下滚动控制按钮,卷动速度,数值越大,速度越慢(毫秒),滚动的时间间隔是(毫秒),每次滚动的行数,默认为一屏,即父容器高度-- 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-up-down-scroll-src-style-codes/ 具体代码如下: <!DOCT

  • 利用JavaScript实现仿京东放大镜效果

    利用JavaScript实现仿京东放大镜效果

    功能实现 1.鼠标经过小图片盒子,黄色的遮挡层和大图片显示,离开时就隐藏2个盒子功能 2.黄色遮挡层跟着鼠标走 把鼠标的坐标给盒子,不断地进行赋值操作 把鼠标地坐标给遮挡层不合适,因为遮挡层坐标以父盒子为准 首先是获得鼠标在盒子内地坐标 然后把数值给遮挡层地left和top值 此时用到鼠标移动事件,但是还是在小图片盒子内移动 发现,遮挡层位置不对,需要再减去盒子自身高度和宽度地一半 遮挡层不能超出小图片盒子范围 如果小于0,就把坐标设置为0 如果大于遮挡层最大地移动距离,就把坐标设置为最大地移动

  • Windows server利用批处理脚本判断端口启动tomcat的方法

    Windows server利用批处理脚本判断端口启动tomcat的方法

    win server服务器上面的tomcat老是不定时挂掉, 于是利用定时操作脚本判断tomcat80端口是否在运行, 如果运行则放过, 如果down掉就启动tomcat,解决tomcat不定时挂掉导致业务数据流通丢失问题.不扯淡, 上脚本. 1.给tomcat赋予环境变量 变量名:CATALINA_HOME 路径:C:\Program Files\Java\apache-tomcat-8.0.35 2.批处理脚本(startTomcat.bat) ::Final interpretation

  • javascript简单实现滑动菜单效果的方法

    本文实例讲述了javascript简单实现滑动菜单效果的方法.分享给大家供大家参考.具体如下: 整个javascript代码共42行,其中主要函数Slide代码26行,可以改进哦! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

  • Javascript实现div层渐隐效果的方法

    本文实例讲述了Javascript实现div层渐隐效果的方法.分享给大家供大家参考.具体实现方法如下: <!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"

  • javascript实现详细时间提醒信息效果的方法

    本文实例讲述了javascript实现详细时间提醒信息效果的方法.分享给大家供大家参考.具体如下: 我们经常在社交网络上面看到很人性化的时间提示比如,你的朋友几分钟前更新了什么,你的朋友几天前更新了什么信息. 这些小tips比直接显示某年某月人性化很多.我们可以用不同的程序实现这种效果.下面我是通过前台javascript来实现这种效果. 这样可以减少后台服务器的压力. javascript实现代码如下: 复制代码 代码如下: // 本函数实现了更人性化的时间提示 // @param date_

  • JavaScript实现隐藏省略文字效果的方法

    JavaScript实现隐藏省略文字效果的方法

    本文实例讲述了JavaScript实现隐藏省略文字效果的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>JS</title> </head> <body> <div id="content&qu

随机推荐