文字垂直滚动之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 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
Angular 容器部署的方法
Apr 17 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
使用Vant完成Dialog弹框案例
Nov 11 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
PHP获取当前页面URL函数实例
2014/10/22 PHP
PHP实现事件机制的方法
2015/07/10 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
jQuery实现鼠标经过弹出提示信息的地图热点效果
2015/08/07 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
2016/12/14 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
2020/07/27 Javascript
python使用rabbitmq实现网络爬虫示例
2014/02/20 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
Pycharm 2020最新永久激活码(附最新激活码和插件)
2020/09/17 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
python 对xml解析的示例
2021/02/27 Python
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
安全生产先进个人材料
2014/02/06 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
教师先进工作者事迹材料
2014/05/01 职场文书
技术负责人任命书
2014/06/05 职场文书
我的中国梦演讲稿400字
2014/08/19 职场文书
物价局领导班子四风问题整改措施
2014/10/26 职场文书
素质教育学习心得体会
2016/01/19 职场文书
《我是什么》教学反思
2016/02/16 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL