文字垂直滚动之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_ibm
May 16 Javascript
JQuery困惑—包装集 DOM节点
Oct 16 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
js控制div弹出层实现方法
May 11 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
Jun 05 Javascript
javascript验证香港身份证的格式或真实性
Feb 07 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
TypeScript基础入门教程之三重斜线指令详解
Oct 22 Javascript
js实现div色块拖动录制
Jan 16 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
layui使用及简单的三级联动实现教程
Dec 01 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制作静态网站的模板框架(四)
2006/10/09 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
超清晰的document对象详解
2007/02/27 Javascript
jquery遍历input取得input的name
2009/04/27 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
jQuery实现网站添加高亮突出显示效果的方法
2015/06/26 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
js实现微信分享代码
2020/10/11 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
基于bootstrap实现广告轮播带图片和文字效果
2016/07/22 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
vue开发心得和技巧分享
2016/10/27 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
Vuex简单入门
2017/04/19 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
vue实现购物车选择功能
2020/01/10 Javascript
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
python模拟enum枚举类型的方法小结
2015/04/30 Python
Python 文件处理注意事项总结
2017/04/10 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
pyqt5中动画的使用详解
2020/04/01 Python
python和go语言的区别是什么
2020/07/20 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
计算机毕业大学生推荐信
2013/12/01 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
企业领导对照检查材料
2014/08/20 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
初中政治教师教学反思
2016/02/23 职场文书