Home > Article > Web Front-end > js method to implement text scrolling on buttons_javascript skills

js method to implement text scrolling on buttons_javascript skills

WBOYOriginal: 2016-05-16 15:43:561199browse

The example in this article describes how to implement text scrolling on buttons using js. Share it with everyone for your reference. The details are as follows:

The text scrolls on the button to attract attention. After clicking the button, it jumps to the specified URL. After running this demo code, you can see the scrolling effect of the text in the button in the effect demonstration area. The color and text size of the button can be redefined.

The operation effect is as shown below:

The online demo address is as follows:

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

The specific code is as follows:

<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>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js code to achieve seamless scrolling (text and pictures)_javascript skillsNext article：js code to achieve seamless scrolling (text and pictures)_javascript skills

See more

js method to implement text scrolling on buttons_javascript skills

Related articles