文字垂直滚动之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面试题
Dec 29 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
Javascript中 toFixed四舍六入方法
Aug 21 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 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
现磨咖啡骗局!现磨咖啡=新鲜咖啡?现磨咖啡背后的猫腻你不懂!
2019/03/28 冲泡冲煮
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
JavaScript高级程序设计 XML、Ajax 学习笔记
2011/09/10 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
2016/05/10 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
微信小程序实现图片滚动效果示例
2018/12/05 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
VUE前端从后台请求过来的数据进行转换数据结构操作
2020/11/11 Javascript
手把手教你如何编译打包video.js
2020/12/09 Javascript
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
python xml.etree.ElementTree遍历xml所有节点实例详解
2016/12/04 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
几个人围成一圈的问题
2013/09/26 面试题
创建无烟单位实施方案
2014/03/29 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
捐资助学感谢信
2015/01/21 职场文书
2015年小学二年级班主任工作总结
2015/05/21 职场文书
导游词之千岛湖
2019/09/23 职场文书
Python中rapidjson参数校验实现
2021/07/25 Python
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android