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 相关文章推荐
jquery对表单操作2
Apr 06 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
Jun 29 Javascript
老生常谈js数据类型
Aug 03 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
js HTML5 canvas绘制图片的方法
Sep 08 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 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
ThinkPHP跳转页success及error模板实例教程
2014/07/17 PHP
php实现将Session写入数据库
2015/07/26 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
javascript 动态添加表格行
2006/06/22 Javascript
javascript生成/解析dom的CDATA类型的字段的代码
2007/04/22 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
jquery隐藏标签和显示标签的实例
2013/11/11 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
解决ztree搜索中多级菜单展示不全问题
2017/07/05 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
2020/01/21 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
python通过加号运算符操作列表的方法
2015/07/28 Python
剖析Python的Twisted框架的核心特性
2016/05/25 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
对numpy Array [: ,] 的取值方法详解
2018/07/02 Python
Python使用统计函数绘制简单图形实例代码
2019/05/15 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
小学教师的个人自我鉴定
2013/10/24 职场文书
四好少年事迹材料
2014/01/12 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS