脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js文字在按钮上滚动

js实现文字在按钮上滚动的方法

 更新时间：2015年08月20日 11:50:09   作者：佚名  
这篇文章主要介绍了js实现文字在按钮上滚动的方法,涉及javascript动态定时操作页面元素样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了js实现文字在按钮上滚动的方法。分享给大家供大家参考。具体如下：

文字在按钮上滚动，以吸引人的注意，点击按钮后跳转到指定的网址，运行本演示代码后，在效果演示区可看到文字在按钮内的滚动效果。按钮的颜色和文字大小都可以重新定义。

运行效果如下图所示：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-txt-scroll-button-style-codes/

具体代码如下：

<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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 基于webpack.config.js 参数详解

    基于webpack.config.js 参数详解

    下面小编就为大家分享一篇基于webpack.config.js 参数详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 超链接的禁用属性Disabled使用示例

    超链接的禁用属性Disabled使用示例

    可以设置超链接的Disabled属性的true 和 false来确定超链接是不是能点击，下面有个示例，大家不妨参考下
    2014-07-07
  • js实现仿qq消息的弹出窗效果

    js实现仿qq消息的弹出窗效果

    这篇文章主要介绍了js实现仿qq消息的弹出窗效果，文章代码实现模拟qq弹出框消息提醒，感兴趣的小伙伴们可以参考一下
    2016-01-01
  • webpack 打包后图片加载报错的解决办法

    webpack 打包后图片加载报错的解决办法

    使用webpack打包后,图片没有加载出来,页面空白,报错图片引用的路径不对,本文给大家介绍webpack 打包后图片加载报错的解决办法,感兴趣的朋友一起看看吧
    2024-03-03
  • Web开发必知Javascript技巧大全

    Web开发必知Javascript技巧大全

    　JavaScript是一个绝冠全球的编程语言，可用于Web开发、移动应用开发（PhoneGap、Appcelerator）、服务器端开发（Node.js和Wakanda）等等，通过本文给大家介绍Web开发必知Javascript技巧大全，需要的朋友参考下吧
    2016-02-02
  • layui监听select变化,以及设置radio选中的方法

    layui监听select变化,以及设置radio选中的方法

    今天小编就为大家分享一篇layui监听select变化,以及设置radio选中的方法，具有好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 微信小程序实现水平垂直滚动

    微信小程序实现水平垂直滚动

    这篇文章主要为大家详细介绍了微信小程序实现水平垂直滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-03-03
  • 微信小程序自定义组件和通信的方法

    微信小程序自定义组件和通信的方法

    开发中常见的组件主要分为公共组件和页面组件两种,因此注册组件的方式也分为两种全局注册和局部注册,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-06-06
  • JavaScript继承方式实例

    JavaScript继承方式实例

    JavaScript继承方式实例，需要的朋友可以参考下。
    2010-10-10
  • javascript延时加载之defer测试

    javascript延时加载之defer测试

    偶尔发现 js 中有个延时加载的标签 defer,还在疑惑这么好用的东西为什么没有流行起来,本人今天把它拾起来用了一下，发现只在ie7，8，9和360安全济览器下可以，知道为什么不用它了吧
    2012-12-12

最新评论