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 相关文章推荐
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
js取模(求余数)隔行变色
May 15 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
js中apply与call简单用法详解
Nov 06 Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 Javascript
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 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
解析htaccess伪静态的规则
2013/06/18 PHP
PHP分页详细讲解(有实例)
2013/10/30 PHP
从零开始学YII2框架(六)高级应用程序模板
2014/08/20 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
python实现决策树
2017/12/21 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
matplotlib基础绘图命令之errorbar的使用
2020/08/13 Python
户籍证明的格式
2014/01/13 职场文书
竞选副班长演讲稿
2014/04/24 职场文书
停电通知范文
2015/04/16 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
2016大一新生军训感言
2015/12/08 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers
CSS Transition通过改变Height实现展开收起元素
2021/08/07 HTML / CSS
Elasticsearch 批量操作
2022/04/19 Python