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> ...
随机推荐
- gpg 的使用
GPG入门教程 GpG使用指南 1. 安装 源码编译安装:源码下载地址 ./configure make make install 直接安装编译好的二进制文件 # Debian / Ubuntu 环境 ...
- ORA-01950: 表空间'USERS'中无权限的2种解决办法
在创建了一个新的表空间和一个新的用户,当用这个新用户创建表时, 却出现:ORA-01950: 表空 间'USERS'中无权限. 我已经把创建表的权限赋给了此用户,怎么还会缺少权限呢?解决办法 ...
- 用canvas画一个的小画板(PC端移动端都能用)
前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...
- AOP为Aspect Oriented Programming的缩写,意为:面向切面编程
在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的 ...
- asp.net HTTP请求过程
http://blog.csdn.net/zxxSsdsd/article/details/51909860
- 转载:跟我一起写 Makefile
陈皓(http://my.csdn.net/haoel) 概述 —— 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得 ...
- 企业微信H5支付返回不到自己指定的结果页面
项目:vue做的H5项目,嵌入到企业微信里 发现的问题:支付完成后的跳转页面 跳转不到自己指定的页面 问题在于:调支付接口时,redirectUrl: document.location.protoc ...
- nginx访问日志access_log
在 nginx.conf 配置文件 http{} 方法体的括号内,增加或者打开以下代码注释: log_format main '$remote_addr - $remote_user [$time_l ...
- php nusoap类的使用、用法、出错 及说明
NuSOAP 是 PHP 环境下的 WEB 服务编程工具,用于创建或调用 WEB 服务它是一个开源软件,当前版本是 0.7.2 ,支 持 SOAP1.1 WSDL1.1 ,可以与其他支持 SOAP1. ...
- [洛谷P1352][codevs1380]没有上司的舞会
题目大意:某大学有N个职员,编号为1~N.他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.现在有个周年庆宴会,宴会每邀请来一个职员都会增加一定的快乐指数Ri,但如果某个职员的上司来参加舞 ...