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

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • js网页侧边随页面滚动广告效果实现

    a.scrollTop的计算: b.滚动元素的定位值计算: c.滚动周期设定: 代码如下: css部分: 复制代码 代码如下: /*测试用的高度*/ body{ height:3000px;} div,ul,li,body{margin:0; padding:0;} /*position:absolute;用于元素的定位*/ #roll{width:50px; height:100px; background:#99CC00; position:absolute;} Html代码: 复制代码 代

  • JS实现双击屏幕滚动效果代码

    JS实现双击屏幕滚动效果代码

    本文实例讲述了JS实现双击屏幕滚动效果代码.分享给大家供大家参考,具体如下: 这里演示双击滚屏效果代码的实现方法,不知道有觉得有用处的没,现在网上还有很多还在用这个特效的呢,代码分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-db-click-src-scroll-style-codes/ 具体代码如下: <html> <SCRIPT language=JavaScript> var currentpos,ti

  • JS判断页面是否出现滚动条的方法

    本文实例讲述了JS判断页面是否出现滚动条的方法.分享给大家供大家参考.具体如下: var isScroll = function (el) { // test targets var elems = el ? [el] : [document.documentElement, document.body]; var scrollX = false, scrollY = false; for (var i = 0; i < elems.length; i++) { var o = elems[i]

  • js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示"返回面部" js网页滚动条滚动事件 <style type="text/css"> #top_div{ position:fixed; bottom:80px; rig

  • JS实现网页上随滚动条滚动的层效果代码

    JS实现网页上随滚动条滚动的层效果代码

    本文实例讲述了JS实现网页上随滚动条滚动的层效果代码.分享给大家供大家参考,具体如下: 这款网页上随滚动条滚动层代码,拖动滚动条即可看到效果,对联广告的代码也都是基于此的,右侧的浮动层同样是可以关闭的稍微加工,便可实现一个浮动广告的代码,运行一下,先看效果吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-fixed-scroll-adv-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

  • js判断iframe内的网页是否滚动到底部触发事件

    之前有个需求是要判断iframe内的网页是否滚动到底部触发事件, 网上找了许多资料都是说在当前页面下的, 索性就自己研究了一下, 找到了解决方法. clientHeight:这个元素的高度,占用整个空间的高度 offsetHeight:是指元素内容的高度 scrollTop:可以理解为滚动条可以滚动的长度 以下是源代码 复制代码 代码如下: <iframe src="~/Files/3.html" id="iframepage" width="825

  • JS实现的页面自定义滚动条效果

    JS实现的页面自定义滚动条效果

    本文实例讲述了JS实现的页面自定义滚动条效果.分享给大家供大家参考,具体如下: 这里演示网页上用的滚动条效果,是一个自定义的滚动条代码,除了上下两个箭头以外,滚动条和一般的浏览器基本差不多,鼠标滚轮滚动,滚动条滚动.html结构很简单,mainBox是外层div,content是内容,滚动条div是js动态生成的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-zdy-scroll-style-codes/ 具体代码如下: <!D

  • 原生js实现模拟滚动条

    原生js实现模拟滚动条

    当页面中有很多滚动条,它们相互嵌套,很不好看,这时就会模拟滚动条,并给这个滚动条好看的样式,使得页面美观. 模拟滚动条很多时候是去用jquery插件,然后写几行代码就搞定了.不过随着mvvm的快速发展,很多时候都懒得用jquery了,这就是本文的动机,本屌力求用简单的不依赖jquery只依赖mvvm(avalon) api的代码,完成一个简易的滚动条. 要求: 1.鼠标滚轮可以让滚动条工作,界面滚动 2.鼠标可以拖动滚动条并让界面滚动 3.页面resize时,滚动条根据页面尺寸变化,仍然可以工作

  • JS实现网页滚动条感应鼠标变色的方法

    本文实例讲述了JS实现网页滚动条感应鼠标变色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS实现网页滚动条感应鼠标变色</title> </head> <body> 把你的目光转向右侧的滚动条看一下吧?是不是很漂亮噢?鼠标放上还会变换色彩呢? <br><br><hr> 收集于互联网,只为兴趣与学习交流,不作商业用途.</p&

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

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

    本文实例讲述了js实现文字在按钮上滚动的方法.分享给大家供大家参考.具体如下: 文字在按钮上滚动,以吸引人的注意,点击按钮后跳转到指定的网址,运行本演示代码后,在效果演示区可看到文字在按钮内的滚动效果.按钮的颜色和文字大小都可以重新定义. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-txt-scroll-button-style-codes/ 具体代码如下: <HTML> <HEAD> <TITLE>文字在按

  • JS实现单行文字不间断向上滚动的方法

    本文实例讲述了JS实现单行文字不间断向上滚动的方法.分享给大家供大家参考.具体分析如下: 前几天帮一个朋友写了一个单行文字不间断向上滚动的JS效果,现在分享给需要的weber.先看HTML和CSS代码: CSS: 复制代码 代码如下: .wrap{padding:10px;border:1px #ccc solid; width:500px;margin:20px auto;} .roll-wrap{height:130px;overflow:hidden;} HTML: 复制代码 代码如下:

  • Struts2+jquery.form.js实现图片与文件上传的方法

    本文实例讲述了Struts2+jquery.form.js实现图片与文件上传的方法.分享给大家供大家参考,具体如下: jquery.form.js是jQuery的一个官方用语支持异步上传文件的插件.官方网站:http://plugins.jquery.com/form/ 结合Struts2三步轻松实现文件上传 一般是针对一个页面可能不止一个Form表单,所以在一个面提交表单会影响到另一个表单,为此,图片上传表单就可以使用无刷新提交方式上传,也就是异步上传,这时jquery.from.js就派上用

  • javascript实现状态栏文字首尾相接循环滚动的方法

    本文实例讲述了javascript实现状态栏文字首尾相接循环滚动的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>中国风</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="JavaScript">

  • ajaxFileUpload.js插件支持多文件上传的方法

    前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1.修改源码,(源码只支持单个文件的上传): 复制代码 代码如下: //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr('id', fileId); //jQuery(oldElement).before(ne

  • js实现鼠标悬停图片上时滚动文字说明的方法

    本文实例讲述了js实现鼠标悬停图片上时滚动文字说明的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现鼠标悬停图片上时的滚动文字说明</title> <body> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function showtip2(current,e,text){   if (document.all&&a

  • 10行原生JS实现文字无缝滚动(超简单)

    废话不多说,直接上代码 <section class="pro_quota_tip"> <div class="tip_box"> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external

  • js实现文字滚动的效果

    本文实例为大家分享了js实现文字滚动的效果的具体代码,供大家参考,具体内容如下 在之前小编已经和大家介绍了一些常用的js动画效果,在此,和大家介绍一种可能不太常用的动画效果.该动画效果与文字相关,且,虽然不常用,但几乎每个人都见过它.相信大家都使用酷狗音乐或是网易云音乐进行音乐的搜索,听鉴,那么久一定会看到歌词页面中,歌词滚动的效果.此动画效果与其相同,但相对于这些音乐歌词效果而言又有些不同,增加了文字竖直排列并且滚动的效果. 在介绍之前,先和大家一起了解一些文字垂直排列的方式:writing-

  • JS实现文字向下滚动完整实例

    本文实例讲述了JS实现文字向下滚动的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>京东.淘宝晒单</title> <style> @charset "

  • js焦点文字滚动效果代码分享

    js焦点文字滚动效果代码分享

    本文实例讲述了js焦点文字滚动效果.分享给大家供大家参考.具体如下: 效果描述: 今天推荐的这个又是一个原生的js焦点图效果 默认自动切换,也可以手动切换 javascript代码采用函数式对象编程,也就是javascript编程中的Module模式 基本用法很简单,主要特点有三: 1.模块化,可重用 2.封装了变量和function,和全局的命名空间不接触,不污染全局变量 3.只暴露可用public方法,其他私有方法全部隐藏,确保js相互之间不会冲突 运行效果图:---------------

随机推荐