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 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
Javascript 继承机制的实现
Aug 12 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
jQuery对象与DOM对象之间的相互转换
Mar 03 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
js编写简单的计时器功能
Jul 15 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
js图片查看器插件用法示例
Jun 22 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下PHP APACHE MYSQ完整配置
2007/01/02 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
jQuery+json实现的简易Ajax调用实例
2015/12/14 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
聊一聊JS中this的指向问题
2016/06/17 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
element ui里dialog关闭后清除验证条件方法
2018/02/26 Javascript
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
[11:27]《一刀刀一天》之DOTA全时刻20:TI4总奖金突破920W TS赛事分析
2014/06/18 DOTA
python发送邮件实例分享
2017/07/28 Python
Python实现求解括号匹配问题的方法
2018/04/17 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
CSS3实现千变万化的文字阴影text-shadow效果设计
2016/04/26 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
英国最大的美妆产品在线零售商之一:Beauty Bay
2017/09/29 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
新闻专业应届生求职信
2013/10/31 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
离婚被告答辩状
2015/05/22 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python