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公告滚动+AJAX后台得到数据
Apr 14 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
js自定义QQ菜单效果
Jan 10 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
Mar 26 Javascript
正则表达式基础与常用验证表达式
Jun 16 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
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
PHP filter_var() 函数, 验证判断EMAIL,URL等
2021/03/09 PHP
JavaScript修改css样式style
2008/04/15 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
2016/06/28 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
JavaScript对JSON数据进行排序和搜索
2017/07/24 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
python刷投票的脚本实现代码
2014/11/08 Python
Python列表计数及插入实例
2014/12/17 Python
Python用GET方法上传文件
2015/03/10 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
Python和Bash结合在一起的方法
2020/11/13 Python
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
Made in Design德国:设计师家具、灯具和装饰
2019/10/31 全球购物
学校欢迎标语
2014/06/18 职场文书
花坛标语大全
2014/06/30 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
2015年八一建军节慰问信
2015/03/23 职场文书
入党培养人考察意见
2015/06/08 职场文书
志愿者工作心得体会
2016/01/15 职场文书
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS
Mysql中常用的join连接方式
2022/05/11 MySQL