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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
jquery异步循环获取功能实现代码
Sep 19 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
jQuery实现鼠标选文字发新浪微博的方法
Apr 02 Javascript
jQuery绑定自定义事件的魔法升级版
Jun 30 Javascript
js获取ip和地区
Mar 10 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
使用webpack搭建vue项目及注意事项
Jun 10 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
vue 防止页面加载时看到花括号的解决操作
Nov 09 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
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
任意位置显示html菜单
2007/02/01 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
在python中的socket模块使用代理实例
2014/05/29 Python
python中reload(module)的用法示例详解
2017/09/15 Python
Python-ElasticSearch搜索查询的讲解
2019/02/25 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
Python机器学习工具scikit-learn的使用笔记
2021/01/28 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
小区门卫管理制度
2014/01/29 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
八一演出活动方案
2014/02/03 职场文书
西式结婚主持词
2014/03/14 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
新闻简讯格式及范文
2015/07/22 职场文书