js文字的无缝滚动(上下)
使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可
Dom内容
<div id="container">
<ul id="con1">
<li>javascript1</li>
<li>javascript2</li>
<li>javascript3</li>
<li>javascript4</li>
<li>javascript5</li>
<li>javascript6</li>
<li>javascript7</li>
</ul>
</div>
css内容
#container{width:400px;height:24px;margin:0 auto;border:1px solid red;overflow: hidden;}
ul{list-style: none;padding:0;margin:0}
ul li{height:24px;line-height: 24px;}
js相关内容
<script type="text/javascript">
var c=document.getElementById("container");
var con1=document.getElementById("con1");
con1.innerHTML+=con1.innerHTML; //把自身的内容变为原来的2倍
// timer,t;
var iHeight=24;
var d=1000;
var speed=50;
function sTop(){
if(c.scrollTop%iHeight==0){//如果卷去的距离能够除尽一行的高度
clearInterval(timer);//把定时器清除
t=setTimeout(startMove,d);//延迟1s后继续触发定时器
}
if(c.scrollTop>=con1.scrollHeight/2){ //如果卷去的高度>=整个ul高度的一半时
c.scrollTop=0;
c.scrollTop=c.scrollTop-con1.scrollHeight/2; //让ul回到原点 即c.scrollTop=0
}else{
c.scrollTop++; //如若不然,继续往上滚动
}
}
function startMove(){
c.scrollTop++;
timer=setInterval(sTop,speed);
}
startMove();
c.onmouseover=function(){
clearInterval(timer);
clearTimeout(t);
}
c.onmouseout=function(){
timer=setInterval(sTop,speed);
}
</script>
js文字的无缝滚动(上下)的更多相关文章
- angular实现的文字上下无缝滚动
最近在学习angularJs,业余时间随便写了一个文字上下无缝滚动的例子,主要写了一个小小的指令. css代码:主要控制样式 <style type="text/css"&g ...
- js文字展示各种滚动效果
js文字展示各种滚动效果:http://www.dowebok.com/demo/188/
- JS实现文字图片无缝滚动
今天做项目遇到一个滚动的效果,本来打算用marquee做的,因为它是html自带的标签,写起来简单,但是有一个问题就是marquee不能实现无缝滚动,上网找了一些方法,发现marquee可以实现无缝, ...
- js动画之无缝滚动
效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- js实现标准无缝滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS 在 HTML 无缝滚动
marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或 ...
- js原生实现 无缝滚动图片
<!-- 无缝滚动图片开始 --> <div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; H ...
- 图片滚动js 实现图片无缝滚动
在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...
- js实现表格无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- [bzoj 1398] Vijos1382寻找主人 Necklace 解题报告(最小表示法)
题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1398 题目: Description 给定两个项链的表示,判断他们是否可能是一条项链. ...
- Codeforces 677D Vanya and Treasure 暴力+BFS
链接 Codeforces 677D Vanya and Treasure 题意 n*m中有p个type,经过了任意一个 type=i 的各自才能打开 type=i+1 的钥匙,最初有type=1的钥 ...
- sql server 更新满足条件的某一条记录
上图数据:SNum为”18004XXXXX000001K2GW 4000 L1C“,OffLineStation为“OP1010”的有两条数据,当where条件中为上述两者时会同时更新这两条数据,并不 ...
- JavaScript 基础 if switch 弹窗 运算符
脚本语言最重要的几个部分: 数据类型 运算符 控制语句 数组 方法(函数) 一.基础知识 关键字:系统定义 有意义的名字如 background link 等 标识符:自己定 比如class的名字a ...
- Android自定义TabBar
转载请说明出处:http://www.sunhome.org.cn 我发现现在的移动开发界面都被iOS主导了,UI动不动设计出来的东西都是ios的风格,对于一个做Android的程序员来说甚是苦恼啊, ...
- 003.JMS概述
1. 基本概念 JMS:Java Message Service, Java消息服务,是Java EE中的一个技术. JMS规范:JMS定义了Java中访问消息中间件的接口,并没有给予实现,实现JMS ...
- 哪位大兄弟有用 cMake 开发Android ndk的
一直用 Android studio 开发ndk,但是gradle支持的不是很好,只有experimental 版本支持 配置各种蛋疼.主要每次新建一个module都要修改配置半天.之前也看到过goo ...
- Mateclass
Mateclass 一切皆对象: Eg: class Foo: pass f=Foo() In [60]: print(type(f)) <class '__main__.Foo'> In ...
- npm包的上传npm包的步骤,与更新和下载步骤
官网: ======================================================= 没有账号可以先注册一个,右上角点击“Sign Up",有账号直接点击“ ...
- 脚本2,从1到99 ,添加用户user1,user2,。。。 user99
脚本2,从1到99 ,添加用户user1,user2,... user99 如果用户user$存在,脚本显示用户存在,否则添加用户,并显示添加用户成功. 脚本如下 [root@localhost ho ...