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

效果类似：(抱歉，图片是静态的)

写一段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){}

转载于:https://www.cnblogs.com/Mainz/archive/2009/09/21/1570872.html

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

html轮播抽奖,js实现走马灯效果-----大屏幕滚动抽奖
js实现走马灯效果-----大屏幕滚动抽奖发布时间:2020-06-30 07:32:16 来源:51CTO 阅读:940 作者:quyunde var intervalOne = null; wi ...
超简单JS实现把鼠标选中文字发送到新浪微博
最近注意到新浪博客有个小功能,就是当鼠标选中一段文字时会浮现一个小图片,点击这个图片可以把选中内容发送到新浪微博,一时兴起昨晚就写了一个Demo玩了一下,代码超简单,没优化,有兴趣的朋友可以自己改进. ...
一键复制 html,最简单js代码实现一键复制文字
目前网页最常见的一键复制方式:ZeroClipboard,Clipboard.js,execCommand,setData,和只支持老旧IE的其它鸡肋方法.前两种是JS插件,不在此文讨论之列,今天我们 ...
一个用在手机上的简单js拖拽效果
http://blog.163.com/xiaoyou_000/blog/static/65067392201521664214534/ http://www.17sucai.com/pins/876 ...
js在html中加文字走马灯特效,JS实现文字的走马灯效果
北京欢迎你 // //var x = 20; // //alert(isNaN(x)); //判断其是不是数字 // function scroll() { ...
js实现简单的循环打字效果(思路分享)
1.初始化"打字创建"属性代码类似于这样: <div id="demo"></div> <script>var typin ...
原生js进阶版轮播图实现(走马灯效果，无缝衔接)
原生js进阶版轮播图实现(走马灯效果,无缝衔接) 利用原生js手写一个轮播图,是上一篇文章的简易版的一个进阶,本次轮播图主要是利用定位和定时器实现了走马灯效果,并且是左右轮播.实现过程与代码也是很简单 ...
JS配合css实现slide文字框缩放伸展效果
<!DOCTYPE html> <html> <head> <meta http-equiv="content" content=&quo ...
利用JS实现简单的瀑布流效果
转载:https://www.cnblogs.com/dyx-wx/p/4642637.html 一.瀑布流之准备工作首先声明下, 为了方便演示和联系, 我使用的是本地图片, 如果大家有需要的话 ...

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

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

最新文章

热门文章