文字垂直滚动之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 相关文章推荐
window.open被浏览器拦截后的自定义提示效果代码
Nov 19 Javascript
JavaScript 继承详解(一)
Jul 13 Javascript
jQuery load方法用法集锦
Dec 06 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
JavaScript中的console.trace()函数介绍
Dec 29 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
详解Vue.js使用Swiper.js在iOS
Sep 10 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数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
2021/02/07 Vue.js
[01:12](回顾)DOTA2国际邀请赛,全世界DOTAer的盛宴
2014/07/01 DOTA
举例介绍Python中的25个隐藏特性
2015/03/30 Python
python字典快速保存于读取的方法
2018/03/23 Python
python 日期操作类代码
2018/05/05 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
Python os.access()用法实例
2019/02/18 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
Python自动化之数据驱动让你的脚本简洁10倍【推荐】
2019/06/04 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
HTML5不支持标签和新增标签详解
2016/06/27 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
读后感作文评语
2014/12/25 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
Python基本数据类型之字符串str
2021/07/21 Python