简单JS实现走马灯效果的文字(无需jQuery)

效果类似:(抱歉,图片是静态的)

9-21-2009 11-34-09

写一段html,需要走马灯上下跳动的内容,但每次只显示一行:

<hr size="0" align="center" style="border-top: 1px solid #F5F5F5;"/>
<div id="marqueebox0" style="overflow: hidden; height: 26px; line-height: 26px; font-size: 14px;"><a href="/"  target="_blank">测试第一行</a><br/><a href="/"  target="_blank">测试第二行</a><br/><a href="/"  target="_blank">测试第三行</a><br/><a href="/"  target="_blank">测试第四行</a><br/><a href="/" target="_blank">测试第五行</a><br/>
</div>

 

实现走马灯效果的简单JS:

/*开始走马灯*/
function startmarquee(lh/*line-height*/,speed/*50*/,delay/*3000*/,id/*element id*/){var t;var p=false;var o=document.getElementById(id);o.innerHTML+=o.innerHTML;o.οnmοuseοver=function(){p=true}o.οnmοuseοut=function(){p=false}o.scrollTop = 0;function start(){t=setInterval(scrolling,speed);if(!p) o.scrollTop += 2;}function scrolling(){if(o.scrollTop%lh!=0){o.scrollTop += 2;if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;}else{clearInterval(t);setTimeout(start,delay);}}setTimeout(start,delay);
}/*启动效果*/
try{
startmarquee(26,50,3000,"marqueebox0");
}catch(e){}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/406667.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android Service 生命周期

Android Service的生命周期 Managing the Lifecycle of a Service service的生命周期&#xff0c;从它被创建开始&#xff0c;到它被销毁为止&#xff0c;可以有两条不同的路径&#xff1a; A started service 被开启的service通过其他组件调用 startService()被创建。 这种ser…

Python正则表达式如何进行字符串替换

先来段网上的知识&#xff1a;http://developer.51cto.com/art/201003/188824.htm Python正则表达式在使用中会经常应用到字符串替换的代码。有很多人都不知道如何解决这个问题&#xff0c;下面的代码就告诉你其实这个问题无比的简单&#xff0c;希望你有所收获。 1.替换所有匹…

[Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel‘ event.

在基于 Element-ui 写项目的时候&#xff0c;Chrome 提醒&#xff1a; [Violation] Added non-passive event listener to a scroll-blocking ‘mousewheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive. 翻译过来如下&#xf…

ubuntu下集群设置静态ip

hadoop集群时&#xff0c;需要固定集群内计算机相互通信之间的ip地址&#xff0c;但是每次进行网络连接后&#xff0c;ip地址都是变换的&#xff0c;我们希望设置一个用于集群内通信的静态ip&#xff0c;即使重启电脑也不会变化&#xff0c;同样希望能够正常的访问互联网。 sud…

新书出版:《Android深度探索(卷1):HAL与驱动开发》

《Android深度探索&#xff08;卷1&#xff09;&#xff1a;HAL与驱动开发》【1】亚马逊【2】当当网【3】京东商城【4】互动网【5】淘宝网【6】豆瓣网 《 Android深度探索&#xff08;卷1&#xff09;&#xff1a;HAL与驱动开发》分为4篇&#xff0c;分别从搭建开发环境&#x…

python对时间日期做格式化

From: http://www.cnblogs.com/65702708/archive/2011/04/17/2018936.html Python格式化日期时间的函数为datetime.datetime.strftime()&#xff1b;由字符串转为日期型的函数为&#xff1a;datetime.datetime.strptime()&#xff0c;两个函数都涉及日期时间的格式化字符串&…

element-ui中表单验证rules

我们在项目中头疼的是什么&#xff1f;对&#xff0c;你没有听错&#xff0c;就是表单验证&#xff0c;各种非空校验&#xff0c;正则校验等等 而初次使用element-ui&#xff0c;在做表单验证的时候&#xff0c;由于项目急&#xff0c;自己呢&#xff0c;也没有时间去研究这个…

图像熵的意义以及计算

熵&#xff08;entropy&#xff09;指的是体系的混乱的程度&#xff0c;它在控制论、概率论、数论、天体物理、生命科学等领域都有重要应用&#xff0c;在不同的学科中也有引申出的更为具体的 定义&#xff0c;是各领域十分重要的参量。熵由鲁道夫克劳修斯&#xff08;Rudolf C…

python,时间加减,时间计算,时间格式化,时间提取汇总

From: http://bbs.chinaunix.net/thread-1371304-1-1.html 不知道这么写题目会不会让人误会&#xff0c;不过这个题目可以让从搜索引擎上搜索问题的菜鸟们一下找到这篇帖子 这篇是集合了N多大大的方法 上半部是时间加减 下半部是格式化 感谢 xiaoyu9805119 carrison 3227049 …

验证视图状态 MAC 失败

验证视图状态 MAC 失败。如果此应用程序由网络场或群集承载&#xff0c;请确保 <machineKey> 配置指定了相同的 validationKey 和验证算法。不能在群集中使用 AutoGenerate解决方法&#xff1a;这种错误一般是因为在网页代码中有浏览器不支持的标签或标签的位置放置不正确…

async-validator 表单验证两种数据的解决方案

上问题&#xff1a; 下面选项中后台给的value 有 number和 string 两种导致无法验证 解决方案 rules: [,{type: "string",required: true,message: 编码项目至少一项,trigger: change,transform(value) {var baseif(value){//在select中转换要加这个判断//因为sele…

米的建站日记(2014年12月15日)

今天试着定义了一个音乐实体如下图&#xff1a; 然后搜了下mongdb数据库层的框架&#xff0c;发现大部分都是用spring的&#xff0c;然后又去找相关的教程和demo&#xff0c;找到了 http://blog.csdn.net/cuiran/article/details/8287204 这篇博文&#xff0c;但是用在我自己的…

axios发送请求(baseURL有多个的情况)

首先baseURL只有一个的情况&#xff1a; 先安装一下axios: npm install axios --save request.js import axios from axios export function request(config){//1.创建axios的实例const instance axios.create({baseURL:http://152.136.185.210:8000/api/n3})//发送真正的网络…

sql语句按月份统计查询

select year(createdate) 年,month(createdate) 月,count(1) from public_cms_arcwhere (userid in (select id from cms_admin where userid392) or userid392)group by year(createdate),month(createdate)order by year(createdate) desc,month(createdate) desc 转载于:ht…

/etc/shadow 文件详解

/etc/shadow 文件详解用户帐户本身在 /etc/passwd 中定义。Linux 系统包含一个 /etc/passwd 的同伴文件&#xff0c;叫做 /etc/shadow。该文件不像 /etc/passwd&#xff0c;只有对于 root 用户来说是可读的&#xff0c;并且包含加密的密码信息。我们来看一看 /etc/shadow 的一个…

VIM 正则表达式搜索字符串

From: http://blog.csdn.net/fengxinze/article/details/6870106 在插入模式下&#xff0c;为了减少重复的击键输入&#xff0c;VIM 提供了若干快捷键&#xff0c;当你要输入某个上下文曾经输入过的字符串时&#xff0c;你只要输入开头若干字符&#xff0c;使用快捷键&#xff…