文字垂直滚动之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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
使弱类型的语言JavaScript变强势
Jun 22 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
Sep 04 Javascript
纯JS实现只能输入数字的简单代码
Jun 21 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 Javascript
Vue动态组件实例解析
Aug 20 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
vue的for循环使用方法
Feb 12 Javascript
微信小程序 WXML节点信息查询详解
Jul 29 Javascript
vue 封装面包屑组件教程
Nov 16 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
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
php 图片上传类代码
2009/07/17 PHP
PHP大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
解析php中call_user_func_array的作用
2013/06/07 PHP
利用json获取字符出现次数的代码
2012/03/22 Javascript
javascript将数组插入到另一个数组中的代码
2013/01/10 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
JavaScript使用replace函数替换字符串的方法
2015/04/06 Javascript
JavaScript模拟实现键盘打字效果
2015/06/29 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
2016/08/17 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
bootstrap可编辑下拉框jquery.editable-select
2017/10/12 jQuery
[01:25]DOTA2自定义游戏灵园鬼域等你踏足
2015/10/30 DOTA
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
Python编写生成验证码的脚本的教程
2015/05/04 Python
在Apache服务器上同时运行多个Django程序的方法
2015/07/22 Python
Python3使用requests登录人人影视网站的方法
2016/05/11 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
mac下如何将python2.7改为python3
2018/07/13 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
python实现图书借阅系统
2019/02/20 Python
python3的UnicodeDecodeError解决方法
2019/12/20 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
python爬取抖音视频的实例分析
2021/01/19 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
英语专业推荐信
2013/11/16 职场文书
师范生见习总结范文
2015/06/23 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python