简单实现js间歇或无缝滚动效果
间歇、无缝滚动效果（用gif录制的效果不是很好，有兴趣的可以down代码），具体内容如下
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style>
*{margin:0;padding:0;}
.box{width: 500px;height: 400px;margin:40px auto;background: #ccc;overflow: hidden;}
.block{position: relative;width: 500px;height: 400px;overflow: hidden;}
.item{height: 40px;background: red;color: #fff;line-height: 40px;text-align: center;}
.item:nth-child(2n){background: #000}
</style>
<script>
var scrollUp=(function(){
return function(json){
var objScroll = document.getElementById(json.id);
objScroll.scrollTop = 0;
objScroll.innerHTML += objScroll.innerHTML;
if(json.on){
function scrollIng(){
if(objScroll.scrollTop >= objScroll.scrollHeight) {
objScroll.scrollTop = 0;
}else{
objScroll.scrollTop ++;
}
}
var myScroll = setInterval(function(){scrollIng()},30);
objScroll.onmouseover = function(){
clearInterval(myScroll);
}
objScroll.onmouseout = function(){
myScroll = setInterval(function(){scrollIng()},30);
}
}else{
var timer;
function startScroll(){
timer=setInterval(function(){scrollUp()},30);
objScroll.scrollTop++;
}
function scrollUp(){
if(objScroll.scrollTop % json.height==0){
clearInterval(timer);
setTimeout(startScroll,2000);
}else{
objScroll.scrollTop++;
if(objScroll.scrollTop >= objScroll.scrollHeight/2){
objScroll.scrollTop =0;
}
}
}
setTimeout(startScroll,1000);
}
}
})()
window.onload=function(){
//on:间歇滚动/无缝滚动 height:间歇滚动的高度
scrollUp({on:true,id:'block'});
scrollUp({id:'block2',height:120});
}
</script>
</head>
<body>
<div class="box">
<div class="block" id="block">
<div class="item">1无缝滚动</div>
<div class="item">2无缝滚动</div>
<div class="item">3无缝滚动</div>
<div class="item">4无缝滚动</div>
<div class="item">5无缝滚动</div>
<div class="item">6无缝滚动</div>
<div class="item">7无缝滚动</div>
<div class="item">8无缝滚动</div>
<div class="item">9无缝滚动</div>
<div class="item">10无缝滚动</div>
<div class="item">11无缝滚动</div>
<div class="item">12无缝滚动</div>
<div class="item">13无缝滚动</div>
<div class="item">14无缝滚动</div>
<div class="item">15无缝滚动</div>
</div>
</div>
<div class="box">
<div class="block" id="block2">
<div class="item">1间歇滚动</div>
<div class="item">2间歇滚动</div>
<div class="item">3间歇滚动</div>
<div class="item">4间歇滚动</div>
<div class="item">5间歇滚动</div>
<div class="item">6间歇滚动</div>
<div class="item">7间歇滚动</div>
<div class="item">8间歇滚动</div>
<div class="item">9间歇滚动</div>
<div class="item">10间歇滚动</div>
<div class="item">11间歇滚动</div>
<div class="item">12间歇滚动</div>
<div class="item">13间歇滚动</div>
<div class="item">14间歇滚动</div>
<div class="item">15间歇滚动</div>
</div>
</div>
</body>
</html>
注意点：
1.盒子块要css 溢出隐藏：overflow:hidden
2.有两个功能：间歇滚动/无缝滚动
3.先复制一块一模一样的代码，无缝滚动：执行定时器一直增加scrollTop值，当scrollTop值大于盒子高度，在设置scrollTop为0，重新来过。间歇滚动在此基础上加了setTimeout，间歇执行，在scrollTop到达指定的height停止
4.疑问：代码中setInterval(function(){scrollIng()},30);这样写才可以执行，setInterval('scrollIng()',30);这样就不行，有没有大神指导下，两者有啥区别？是啥机制？
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js 实现无缝滚动 兼容IE和FF
原理解析: 1.首先给容器设定高度或宽度,比如ul,设置ul高40px;overflow:hidden: 2.容器高度设定后,内容的高度超出40px,超过部分溢出,被隐藏,scrollTop属性可用,这一点可以用overflow:scroll来看效果: 3.改变容器的scrollTop(上下滚动)属性的值,让内容上下移动一个节点的位置(滚动的原理): 4.到滚动的高度scrollTop大于或等于要滚动节点的高度时,设置scrollTop=0,并把把子节点树中的第一个移动到最后,重新开始滚动,无间
-
javascript实现的左右无缝滚动效果
本文实例讲述了javascript实现的左右无缝滚动效果.分享给大家供大家参考,具体如下: 前面介绍过图片左右滚动,不过图片是间歇性的一张一张滚动,今天介绍的是几张图片一起进行无缝滚动,这是一个常用的 js 效果. <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>无缝滚动--左右</title> &
-
原生js实现水平方向无缝滚动
水平方向无缝滚动 滚动支持图片,文字 原理 :一个大的盒子中放置两个盒子,通过设置offsetWidth,scrollLeft的关系来实现,而且还用到定时器函数setInterval,当手指移动上去定义滚动,离开继续滚动.兼容各大浏览器. HTML代码 <div id="demo"> <div id="demoin"> <div id="demo1"> <a href="">测试
-
javascript实现多张图片左右无缝滚动效果
结构:box包含ul,ul包含4个li:ul绝对定位. 复制li-1.li-2到第li-4后面,为了区分于li-1.li-2,内容改为li-5.li-6,颜色不变.此时ul包含6个li. 需要注意的是,移动的是ul这个大盒子而不是li. 原理:当ul 绝对定位的left 值等于(li-1+li-2+li-3+li-4)的宽度时,利用JavaScript快速复原left 值为0 . 此时请注意盒子里面数字和颜色的变化! 效果图: 示例代码: <!DOCTYPE html> <html la
-
关于网页中的无缝滚动的js代码
随便打开一个网页,基本上都会看到无缝滚动或者轮播图,比如淘宝还有360官网的首页 观察这些轮播图可以发现图片可以来回循环地切换,那么是怎样做到的呢? 做到轮播图或者说无缝滚动主要有两种方式,一种是通过对图片的明暗即透明图的改变来显示或隐藏图片,另一种是通过运动框架,将图片显示在可视区域.这两种方式都会用到同一个东西,那就是定时器. JavaScript中的定时器有两种,1.setInterval();2.setTimeout();相对应的关闭定时器也有两种方法,clearInterval()和c
-
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
div+css+javascript 实现无缝滚动,marquee无缝滚动,无缝滚动,兼容firefox 用marquee实现首尾相连循环滚动效果(仅IE): 复制代码 代码如下: <marquee behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount=&quo
-
javascript实现文字无缝滚动
效果如图: html:( 一个div 包裹两个ul ) <div style="position: absolute; left: 500px; top: 200px; background-color: white; height: 140px; width: 400px; border: solid; 1px; overflow: hidden;" id="box"> <ul id="ul1"> <li>&
-
彻底搞懂JS无缝滚动代码
在做个东西要滚动代码 而且是无缝的 搞了半天还是不行 决心一定要把这个问题搞定 经过研究 也不难 代码如下: 程序代码 复制代码 代码如下: <div id=demo style=overflow:auto;height:180;width:200;background:#009900;color:#006600> <table align=top> <tr> <td id=demo1 valign=top> <p>aaaaaaaaaa
-
angularjs实现文字上下无缝滚动特效代码
最近没有项目做,于是闲暇之余学习了下angularjs知识,然后写了一个文字上下无缝滚动的例子,主要写的是一个小小的指令. css代码: 主要控制样式 <style type="text/css"> *{margin: 0px;padding: 0px;} .slide {width: 200px;height:200px;border:1px solid #dcdcdc;margin: 0 auto;margin-top: 50px;overflow: hidden;}
-
简单实现js间歇或无缝滚动效果
间歇.无缝滚动效果(用gif录制的效果不是很好,有兴趣的可以down代码),具体内容如下 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style> *{margin:0;padding:0;} .box{width: 500px;height: 400p
-
JavaScript实现简单精致的图片左右无缝滚动效果
本文实例讲述了JavaScript实现简单精致的图片左右无缝滚动效果.分享给大家供大家参考,具体如下: <!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"
-
JS简单实现无缝滚动效果实例
本文实例讲述了JS简单实现无缝滚动效果.分享给大家供大家参考,具体如下: <!doctype html> <title>javascript无缝滚动</title> <meta charset="utf-8" /> <meta name="keywords" content="javascript无缝滚动" /> <meta name="description"
-
JS简单封装的图片无缝滚动效果示例【测试可用】
本文实例讲述了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" lang="
-
简单实现js无缝滚动效果
本文实例为大家分享了js无缝滚动效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } img{ vert
-
基于vue.js无缝滚动效果
一个简单的基于vue.js的无缝滚动 :feet:在线文档demo :ear_of_rice:小demo :blue_book:English Document 安装 NPM npm install vue-seamless-scroll --save 使用 ES6 详情的demo页面 example-src/App.vue // **main.js** import Vue from 'vue' import scroll from 'vue-seamless-scroll' Vue.use(
-
JS与HTML结合使用marquee标签实现无缝滚动效果代码
最近在做一个前端开发的项目,需要实现无缝滚动效果,上下左右无缝滚动.下面小编把实现代码分享到我们平台,需要的朋友可以参考下,有bug欢迎提出,共同学习进步. 具体代码如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns=&
-
JS无缝滚动效果实现方法分析
本文实例讲述了JS无缝滚动效果实现方法.分享给大家供大家参考,具体如下: 效果: 1.默认缓慢往左滚动 2.放到左箭头上还是向左滚动,放到右箭头上向右滚动 3.放到图片上停止滚动,移出继续滚动 思路: 1.计算图片列表ul的宽度 2.开启定时器,使其向左边距不断增大,造成向左运动的效果 3.图片列表复制一份,向左移动时,当左边距大于一份的宽度时,把它的左边距拉回到0.向右移动时,当左边距大于0时,把它的左边距拉到整个两份图片列表一半的宽度(即一份的宽度).(拉的瞬间很快,用户察觉不到,造成一种无
-
标准的js无缝滚动效果
本文实例为大家分享了js无缝滚动效果实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style> #warp{ width: 1200px; height: 300px; overflow: hidden; margin:100p
-
JS平滑无缝滚动效果的实现代码
本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 1280px; height:200px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 {