Js+CSS实现的间断和不间断文本滚动代码

Js+CSS间断和不间断文本滚动代码

.box{width:150px;height:25px;line-height:25px;border:#bbb 1px solid;overflow:hidden;}
.box ul{margin:0;padding:0}
.box li{height:25px;line-height:25px;font-size:12px;text-align:center;list-style-type:none;}

  • 第一行
  • 第二行
  • 第三行
  • 第一行
  • 第二行
  • 第三行

function startmarquee(lh,speed,delay,index){
var t;
var p=false;
var o=document.getElementById("marqueebox"+index);
o.innerHTML+=o.innerHTML;
o.onmouseover=function(){p=true}
o.onmouseout=function(){p=false}
o.scrollTop = 0;
function start(){
t=setInterval(scrolling,speed);
if(!p){ o.scrollTop += 1;}
}
function scrolling(){
if(o.scrollTop%lh!=0){
o.scrollTop += 1;
if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;
}else{
clearInterval(t);
setTimeout(start,delay);
}
}
setTimeout(start,delay);
}
startmarquee(25,30,3000,0);
startmarquee(25,40,0,1);

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • JS实用的带停顿的逐行文本循环滚动效果实例

    如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS实用的带停顿的逐行文本循环

  • 纯javascript实现四方向文本无缝滚动效果

    实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class="ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="zh-CN" class="ie7"> <![endif]--> <!--[if IE 8 ]

  • js实现文本上下来回滚动

    话不多说,请看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • js 文本滚动效果的实例代码

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> New Document </title> <style type="text/css">  *{marg

  • Js 实现文字爬楼滚动效果 结合文本框

    文字爬楼 msg="我们网页特效" align="left"; speed=250; up=true; spas=" "; for (a=0;a "); for (i=1;i "); document.write(" "); } document.write(" "); function scrollIt() { j++; with (document.form) { if ((j+12

  • js实现单行文本向上滚动效果实例代码

    复制代码 代码如下: /***************滚动场次开始*****************/ function ScrollText(content, btnPrevious, btnNext, autoStart) {    this.Delay = 10;    this.LineHeight = 20;    this.Amount = 1;     this.Direction = "up";    this.Timeout = 1500;    this.Scrol

  • Js+CSS实现的间断和不间断文本滚动代码

    Js+CSS间断和不间断文本滚动代码 .box{width:150px;height:25px;line-height:25px;border:#bbb 1px solid;overflow:hidden;} .box ul{margin:0;padding:0} .box li{height:25px;line-height:25px;font-size:12px;text-align:center;list-style-type:none;} 第一行 第二行 第三行 第一行 第二行 第三行

  • js+css实现超简洁的二级下拉菜单效果代码

    js+css实现超简洁的二级下拉菜单效果代码

    本文实例讲述了js+css实现超简洁的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个很简洁的CSS+JavaScript二级菜单,没有使用过多的修饰素材,尽量不调用外部图片,简洁大方,而且便于二级开发完善,最初是一个政府网站上的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-2jxl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

  • js+css实现的圆角边框TAB选项卡滑动门代码分享（2款）

    js+css实现的圆角边框TAB选项卡滑动门代码分享（2款）

    本文实例讲述了js+css实现的圆角边框TAB选项卡滑动门效果.实例包含两款CSS圆角代码,可鼠标点击,也可鼠标移动上去显示效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js+css实现的圆角边框TAB选项卡滑动门代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio

  • JS+CSS实现分类动态选择及移动功能效果代码

    JS+CSS实现分类动态选择及移动功能效果代码

    本文实例讲述了JS+CSS实现分类动态选择及移动功能效果代码.分享给大家供大家参考,具体如下: 这是一个类似选项卡功能的选择插件,与普通的TAb区别是加入了动画效果,多用于商品类网站,用作商品分类功能,不过其它网站也可以用,点击运行一下你会知道它的奥妙,它用JavaScript模拟出了Flash动画的效果,很贴切. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-cha-type-move-style-demo/ 具体代码如下: <

  • JS+CSS实现大气的黑色首页导航菜单效果代码

    JS+CSS实现大气的黑色首页导航菜单效果代码

    本文实例讲述了JS+CSS实现大气的黑色首页导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的大气的重色+红色高强对比的菜单,可用作首页导航菜单,从设计的角度来讲,挺专业,从实用角度来讲,应用广泛,是款人见人爱的经典风格菜单,超不错的一个作品. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-black-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC

  • JS+CSS实现的经典圆角下拉菜单效果代码

    JS+CSS实现的经典圆角下拉菜单效果代码

    本文实例讲述了JS+CSS实现的圆角下拉菜单效果代码.分享给大家供大家参考,具体如下: 相信不少朋友会喜欢这一款菜单,CSS+JS实现的圆角下拉菜单,没有使用任何修饰性的图片哦,圆角完全是用JS完成的,因此代码多了些,想使用的朋友把JS文件提取出来另存,这样更合理些. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-jd-cicle-style-button-demo/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • JS+CSS实现3D切割轮播图

    本文实例为大家分享了JS+CSS实现3D切割轮播图的具体代码,供大家参考,具体内容如下 第一步:我们首先要通过CSS来完成一个基本布局,利用 transform-style: preserve-3d设置成3D. 下面是CSS部分的代码 * { margin: 0; padding: 0; box-sizing: border-box; } li { list-style: none; } /* 轮播图 */ .homePage { width: 800px; height: 200px; mar

  • js+css实现卡片轮播图效果

    js+css实现卡片轮播图效果

    本文实例为大家分享了js+css实现卡片轮播图效果的具体代码,供大家参考,具体内容如下 实现点击的时候切换卡片,自动轮播,鼠标移入暂停,移出继续轮播,有动画事件效果就是这样 下面是代码 <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge

  • 不间断滚动JS打包类，基本可以实现所有的滚动效果，太强了

    /*MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类) Ver 1.6*\ 制作时间:2006-08-29 (Ver 0.5)  发布时间:2006-08-31 (Ver 0.8)  更新时间:2007-01-31 (Ver 1.6)  更新说明: + 加入功能 * 修正.完善      1.6.070131          + 禁止鼠标控制暂停或继续 (将第9个参数设置为-1或者动态赋值将ScrollSetp设置为-1)          + 判断是否

  • JS实现图片无间断滚动代码汇总

    本文整理汇总了JavaScript实现图片滚动的常见代码,可以实现向上下左右四个方向的无缝滚动的效果,这是前端设计开发时常用的一个图片特效,你可只用其中的一种滚动效果. 具体的实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="ht

随机推荐