文字在Button按钮滚动效果，根据文字多少而自适应

发布时间：2018-08-13 15:38 所属栏目：121 来源：站长网

导读：

导读：分享一个不经常看到的效果，JS实现文字在Button按钮中的滚动效果，与其说是滚动，不如说是滑动，您看看下边的效果就会明白了，按钮会根据文字多少而自适应大小，可以说这种效果不经常看到，但是貌似使用价值也不是很大哦。演示： !DOCTYPE html PUBLIC -/

　　分享一个不经常看到的效果，JS实现文字在Button按钮中的滚动效果，与其说是滚动，不如说是滑动，您看看下边的效果就会明白了，按钮会根据文字多少而自适应大小，可以说这种效果不经常看到，但是貌似使用价值也不是很大哦。

　　演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>文字在Button按钮中慢慢出现</title> <STYLE> .stHeadliner {font-family: lucida console, courier new, monospace; font-size: 11pt; font-weight: bold; font-style: italic; background: red; color: white} </STYLE> </head> <body bgcolor="#ffffff" onLoad="StartHeadliner()"> <SCRIPT LANGUAGE="<b>Java</b>Script">  </SCRIPT> <form name="formDisplay"> <input class="stHeadLiner" type="button" name="buttonFace" value="** The Headliner +++ Jan Pijnacker **" onClick="GotoUrl(lines[lineNo].url)"></INPUT> </form> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：ASP站长网）