文字垂直滚动之javascript代码


Posted in Javascript onJuly 29, 2015

在大型的网站新闻公告和友情链接等领域经常有这种文字或图片垂直滚动的效果,下面就介绍一下文字垂直滚动的javascript代码。

javascript代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://3water.com/" />
<title>三水点靠木</title>
<style> 
a { 
 display:block; 
 font-size:15px; 
 line-height:18px; 
 text-decoration:none; 
 color:#333; 
 font-family:Arial; 
 font-size:12px; 
} 
.main{ 
 background:no-repeat 4px 5px; 
 border:1px solid #aaa; 
 width:400px; 
 padding:3px 2px 2px 20px; 
} 
#thediv{ 
 height:36px; 
 overflow:hidden; 
} 
</style>
<script type="text/javascript">
var c, _ = Function;
window.onload=function(){ 
 with (o = document.getElementById("thediv")){ 
 innerHTML += innerHTML; onmouseover = _("c=1"); onmouseout = _("c=0");
 } 
 (F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18?10:3000);".replace(/#/g,"o.scrollTop")))(); 
}
</script> 
</head> 
<body> 
<div class="main"> 
<div id="thediv"> 
 <a>蚂蚁部落欢迎您</a> 
 <a>只有奋斗才会有好的结果</a> 
 <a>高手都是从菜鸟成长而来</a> 
 <a>太阳马上就要出来了</a> 
 </div> 
</div> 
</body> 
</html>

以上代码就实现了文字垂直滚动的效果,文字可有上下间歇性的滚动,有需要的朋友可以来参考下,希望大家喜欢。

Javascript 相关文章推荐
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
浅谈ES6新增的数组方法和对象
Aug 08 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
js+html+css实现手动轮播和自动轮播
Dec 30 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 #Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 #Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 #Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
Jul 29 #Javascript
浅谈JavaScript的Polymer框架中的事件绑定
Jul 29 #Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 #Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 #Javascript
You might like
谈谈PHP语法(2)
2006/10/09 PHP
Thinkphp调用Image类生成缩略图的方法
2015/03/07 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
详解微信小程序 相对定位和绝对定位
2017/05/11 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
深入理解Python分布式爬虫原理
2017/11/23 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
Python 切分数组实例解析
2019/11/07 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
python实现翻译word表格小程序
2020/02/27 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
威尔逊皮革:Wilsons Leather
2018/12/07 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
文言文形式的学生求职信
2013/12/03 职场文书
教师绩效工资方案
2014/02/01 职场文书
求职自荐信怎么写
2014/03/06 职场文书
政协调研汇报材料
2014/08/15 职场文书
财务人员入职担保书
2015/09/22 职场文书
2019个人工作自我评价范文(3篇)
2019/09/19 职场文书
《游戏王:大师决斗》将推出新卡牌包4月4日上线
2022/03/31 其他游戏
字节飞书面试promise.all实现示例
2022/06/16 Javascript
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript