文字垂直滚动之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 相关文章推荐
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
jquery删除数据记录时的弹出提示效果
May 06 Javascript
php实例分享之实现显示网站运行时间
May 20 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
浅谈Express异步进化史
Sep 09 Javascript
Element Input组件分析小结
Oct 11 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
微信小程序实现弹框效果
May 26 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
mysql 字段类型说明
2007/04/27 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
javascript instanceof 与typeof使用说明
2010/01/11 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
写JQuery插件的基本知识
2013/11/25 Javascript
使用jQuery操作HTML的table表格的实例解析
2016/03/13 Javascript
详解Javascript数据类型的转换规则
2016/12/12 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
深究AngularJS之ui-router详解
2017/06/13 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
python处理json数据中的中文
2014/03/06 Python
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Python装饰器使用示例及实际应用例子
2015/03/06 Python
python实现bucket排序算法实例分析
2015/05/04 Python
详细解析Python中的变量的数据类型
2015/05/13 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
python 密码学示例——凯撒密码的实现
2020/09/21 Python
HTML5本地存储之Web Storage应用介绍
2013/01/06 HTML / CSS
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
企业军训感言
2014/02/08 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
购房协议书范本
2014/10/02 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
违纪检讨书范文
2015/01/27 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
四年级语文教学反思
2016/03/03 职场文书