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需刷新才能执行]
相关推荐
-
纯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 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实用的带停顿的逐行文本循环滚动效果实例
如下所示: <!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实用的带停顿的逐行文本循环
-
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实现文本上下来回滚动
话不多说,请看代码: <!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实现单行文本向上滚动效果实例代码
复制代码 代码如下: /***************滚动场次开始*****************/ 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实现超简洁的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个很简洁的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选项卡滑动门效果.实例包含两款CSS圆角代码,可鼠标点击,也可鼠标移动上去显示效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js+css实现的圆角边框TAB选项卡滑动门代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitio
-
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实现的大气的重色+红色高强对比的菜单,可用作首页导航菜单,从设计的角度来讲,挺专业,从实用角度来讲,应用广泛,是款人见人爱的经典风格菜单,超不错的一个作品. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-black-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC
-
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实现卡片轮播图效果的具体代码,供大家参考,具体内容如下 实现点击的时候切换卡片,自动轮播,鼠标移入暂停,移出继续轮播,有动画事件效果就是这样 下面是代码 <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
随机推荐
- PHP7+Nginx的配置与安装教程详解
- Delphi实现检测并枚举系统安装的打印机的方法
- Go语言排序与接口实例分析
- javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
- 完整的HTTP通信步骤(7步)
- 不用kavo.exe专杀手工即可清除方法
- java实现八皇后问题示例分享
- 动态的9*9乘法表效果的实现代码
- 详解Bootstrap按钮
- C#中static静态变量的用法实例
- PHP如何将log信息写入服务器中的log文件
- 讲解Python中运算符使用时的优先级
- mysql 常见命令和学习心得
- 基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
- 框架页面高度自动刷新的Javascript脚本
- c++中#include <>与#include""的区别详细解析
- 如何在nginx中配置缓存静态文件
- linux配置java环境变量详细过程
- Android 监听屏幕是否锁屏的实例代码
- 技巧“七招鲜”