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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
Javascript优化技巧(文件瘦身篇)
Jan 28 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
jQuery 处理页面的事件详解
Jan 20 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
详解Vue 事件修饰符capture 的使用
Dec 29 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 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
做一个有下拉功能的留言版
2006/10/09 PHP
基于mysql的论坛(7)
2006/10/09 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
PHP使用内置函数生成图片的方法详解
2016/05/09 PHP
PHP创建XML接口示例
2019/07/04 PHP
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
浅谈vue-lazyload实现的详细过程
2017/08/22 Javascript
js实现简单数字变动效果
2017/11/06 Javascript
微信小程序实现折叠展开效果
2018/07/19 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
使用EduBlock轻松学习Python编程
2018/10/08 Python
对python Tkinter Text的用法详解
2018/10/11 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
介绍一下SQL Server的全文索引
2013/08/15 面试题
销售部主管岗位职责
2013/12/18 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
中秋联欢会主持词
2015/07/04 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫