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 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
推荐25个超炫的jQuery网格插件
Nov 28 Javascript
JavaScript获取网页、浏览器、屏幕高度和宽度汇总
Dec 18 Javascript
javascript验证身份证号
Mar 03 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
Vue键盘事件用法总结
Apr 18 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
vue+webpack中配置ESLint
Nov 07 Javascript
JavaScript 监听组合按键思路及代码实现
Jul 28 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
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
js操作二级联动实现代码
2010/07/27 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
Bootstrap table分页问题汇总
2016/05/30 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
vue组件实例解析
2017/01/10 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
2017/01/17 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
Python打印输出数组中全部元素
2018/03/13 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
Python实现简单的猜单词小游戏
2020/10/28 Python
CSS3中的opacity属性使用教程
2015/08/19 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
2017/05/23 HTML / CSS
Gap英国官网:Gap UK
2018/07/18 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
中国包裹转运寄送国际服务:Famiboat
2019/07/24 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
房地产开盘策划方案
2014/02/10 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
教师党员个人总结
2015/02/10 职场文书
MYSQL如何查看操作日志详解
2022/05/30 MySQL