js实现文字在按钮上滚动的方法


Posted in Javascript onAugust 20, 2015

本文实例讲述了js实现文字在按钮上滚动的方法。分享给大家供大家参考。具体如下:

文字在按钮上滚动,以吸引人的注意,点击按钮后跳转到指定的网址,运行本演示代码后,在效果演示区可看到文字在按钮内的滚动效果。按钮的颜色和文字大小都可以重新定义。

运行效果如下图所示:

js实现文字在按钮上滚动的方法

在线演示地址如下:

具体代码如下:

<HTML>
<HEAD>
<TITLE>文字在按钮上滚动</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
</HEAD>
<BODY bgColor=#fef4d9>
<CENTER>
 <span class="STYLE1"><FONT face=隶书>文字在按钮上滚动</FONT></span>
</CENTER><BR>
<CENTER>
<TABLE borderColor=#FFCC00 border=5 borderlight="green">
 <TBODY>
 <TR>
  <TD align=middle><span class="STYLE2"><FONT face="Arial, Helvetica, sans-serif">效果显示</FONT></span></TD>
 </TR>
 <TR>
  <TD class=p9 align=middle>
   <SCRIPT language=JavaScript>
var message=" 欢迎进入百度";//Put Your Message Here
function ButtonURL(){
window.location="http://www.baidu.com"
}
function scroll()
{
 message = message.substring(1,message.length) + message.substring(0,1);
 document.bs.bs.value = message;
 setTimeout("scroll()",140);
}
window.onload=scroll
document.write('<style type="text/css">')
document.write('.select{background: blue;border-color:"yellow";color:"white";font-family:Arial,Verdana;font-size:12pt;font-weight: bold;}')
document.write('</STYLE>')
document.write('<form name=bs><INPUT class="select" TYPE="button" NAME="bs" value="" onclick="ButtonURL()"></FORM>')
</SCRIPT>
 </TD></TR></TBODY></TABLE></CENTER>
</BODY>
</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
newxtree.js代码
Mar 13 Javascript
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
JQuery中使用Ajax赋值给全局变量失败异常的解决方法
Aug 18 Javascript
javascript实时显示当天日期的方法
May 20 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
vue.js学习笔记之v-bind和v-on解析
May 03 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
详解Vue This$Store总结
Dec 17 Javascript
React服务端渲染原理解析与实践
Mar 04 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
Aug 20 #Javascript
js实现网页多级级联菜单代码
Aug 20 #Javascript
javascript常用的方法整理
Aug 20 #Javascript
JS实现的Select三级下拉菜单代码
Aug 20 #Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
Aug 20 #Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 #Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
Aug 20 #Javascript
You might like
sony ICF-2010 拆解与改装
2021/03/02 无线电
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
如何让CI框架支持service层
2014/10/29 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
在javascript将NodeList作为Array数组处理的方法
2010/07/09 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
js实现随机8位验证码
2020/07/24 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[04:37]DOTA2英雄梦之声Vol20发条
2014/06/20 DOTA
python入门之语句(if语句、while语句、for语句)
2015/01/19 Python
利用Python学习RabbitMQ消息队列
2015/11/30 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
基于Python log 的正确打开方式
2018/04/28 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
linux面试题参考答案(8)
2015/08/11 面试题
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
办公室打字员岗位职责
2014/04/16 职场文书
企业文化宣传标语
2014/06/09 职场文书
村创先争优活动总结
2014/08/28 职场文书
党员对照检查材料
2014/09/22 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书