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> ...
随机推荐
- Android上方便地开发的C程序
假设你基于没有一个专门的开发板练手.那你的Android手机也能够开发大多数C应用程序.安装好后编译C的编译器. 本文仅仅写一个Hello World的执行过程. 长处是:不须要eclipse,不须要 ...
- sts安装出现could not find jar:file解决办法,could not find jar:file,sts安装
标题sts插件下载好但是安装出错 我的eclipse是4.5.2,在官方网站https://spring.io/tools3/sts/legacy下载,压缩包的名字为:spring-tool-suit ...
- POJ 1948 DP
题意:给你n个木棍(n<=40)每个木棍长度<=40,问用上所有的木棍拼成的三角形的面积的最大值,并输出面积*100的值(不四舍五入) 如果没有解,输出-1. 思路: 背包判断可达性. f ...
- 关于Java集合的小抄--转
原文地址:http://calvin1978.blogcn.com/articles/collection.html 在尽可能短的篇幅里,将所有集合与并发集合的特征.实现方式.性能捋一遍.适合所有&q ...
- Android PullToRefreshListView设置各个item之间的间距
要设置第三方的上拉下载listView的item之间的间距,可以在xml布局文件中的listView节点中设置xml的属性即可: android:divider="#00000000&quo ...
- XML学习(一)——xml内容简介
一.什么是XML xml全称为Extensible Markup Language,意思是可扩展的标记语言.XML语法上和HTML比较相似,但是HTML中的元素是固定的,而XML的标签是可以用户定义的 ...
- CorelDRAW X6低价再次冲破底线
平时我们看到的标志设计.杂志排版.产品商标.插图描画......这些都是设计师们使用CorelDRAW设计而来.如今CorelDRAW已经成为每个设计师必装的软件,从12年发布CorelDRAW X6 ...
- 路飞学城Python-Day9
[23.函数-高阶函数]变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称为高阶函数如果一个函数可以接收另一个函数,这个函数就称为高阶函数 def func ...
- DES 加密
package com.cloudunicomm.utils; import java.io.UnsupportedEncodingException; import java.security.Se ...
- 如何配置任意目录下Web应用程序
1,首先创建一个Web项目,tomcat 7, JDK 1.8 2,创建Web项目并部署到tomcat服务器下运行的步骤和方法: 在Eclipse下创建一个JAVA project 在JAVA项目下创 ...