JS无缝滚动效果实现方法分析

本文实例讲述了JS无缝滚动效果实现方法。分享给大家供大家参考，具体如下：

效果：

1.默认缓慢往左滚动

2.放到左箭头上还是向左滚动，放到右箭头上向右滚动

3.放到图片上停止滚动，移出继续滚动

思路：

1.计算图片列表ul的宽度

2.开启定时器，使其向左边距不断增大，造成向左运动的效果

3.图片列表复制一份，向左移动时，当左边距大于一份的宽度时，把它的左边距拉回到0。向右移动时，当左边距大于0时，把它的左边距拉到整个两份图片列表一半的宽度（即一份的宽度）。（拉的瞬间很快，用户察觉不到，造成一种无缝滚动的假象）

4.offsetLeft值的正负决定往哪边移动

5.放到图片上停止这个定时器，移开再开启

window.onload=function(){
 var odiv=document.getElementById('div');
 var oul=odiv.getElementsByTagName('ul')[0];
 var oli=oul.getElementsByTagName('oul');
 var btn=document.getElementsByTagName('btn');
 var ispeed=-1;
 var timer=null;
 oul.innerHTML+=oul.innerHTML; //图片列表复制一份
 oul.style.width=oli[0].offsetWidth*oli.length+'px'; //不算出ul的宽度的话，运动过程中后面的会先出现再加载图片，有一种不流畅感，切图片过多会分行，由外面的div决定宽度
 timer=setInterval(function(){
  oul.style.left=oul.offsetLeft+ispeed+'px';  //offsetLeft输出的是数字不带单位,右边也用oul.style.left输出的是字符串，而不是数值，而且它取得是行间样式，无用
  if(oul.offsetLeft<-oul.offsetWidth/2){ //判断时也可以用.style.left或.style.width？（不确定）
   oul.style.left=0;
  }
  else if(oul.offsetLeft>0){
   oul.style.left=-oul.offsetWidth/2;
  }
 ),30};
 btn[0].onmouseover=function(){
  ispeed=-1;
 };
 btn[1].onmouseover=function(){
  ispeed=1;
 };
 oul.onmouseover=function(){
  clearInterval(timer);
 };
 oul.onmouseout=function(){
  timer=setInterval(function(){
   oul.style.left=oul.offsetLeft+ispeed+'px';
   if(oul.offsetLeft<-oul.offsetWidth/2){
    oul.style.left=0;
   }
   else if(oul.offsetLeft>0){
    oul.style.left=-oul.offsetWidth/2;
   }
  ),30}; //如果把速度变大，而定时器的时间也变大是否可以达到相同效果呢？答案是不能。会变成一卡一卡
 };
};

注：这样子取得的宽度是不包含margin的，所以图片间边距的写法可以是li的宽度大于img的宽度，li的宽度-img的宽度，就是两边的边距和

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • JS实现间歇滚动的运动效果实例

    本文实例讲述了JS实现间歇滚动的运动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title&g

  • js实现页面刷新滚动条位置不变

    今天因为这个问题困扰了很久网上的例子都尝试没效果,后来发现一点原来是内容最外层没有div的原因 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SpotChkDetail.aspx.cs" Inherits="Topevery.DUM.Web.Observer.SpotChkDetail" %> <script runat="ser

  • 简单实现js间歇或无缝滚动效果

    简单实现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

  • JS实现判断滚动条滚到页面底部并执行事件的方法

    需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight:是指元素内容的高度.依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分. scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度. 举例,如果一个

  • JS实现单行文字不间断向上滚动的方法

    本文实例讲述了JS实现单行文字不间断向上滚动的方法.分享给大家供大家参考.具体分析如下: 前几天帮一个朋友写了一个单行文字不间断向上滚动的JS效果,现在分享给需要的weber.先看HTML和CSS代码: CSS: 复制代码 代码如下: .wrap{padding:10px;border:1px #ccc solid; width:500px;margin:20px auto;} .roll-wrap{height:130px;overflow:hidden;} HTML: 复制代码 代码如下:

  • javascript学习笔记(十五) js间歇调用和超时调用

    1.超时调用setTimeout() setTimeout() 方法接受两个参数,第一个参数是函数,第二个参数是时间(单位微秒),返回数值ID 复制代码 代码如下: setTimeout( function () { alert("你好!"); },1000); 调用前取消clearTimeout(),接受一个参数超时调用ID 复制代码 代码如下: var timeOutId = setTimeout( function () { alert("你好!"); },1

  • js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示"返回面部" js网页滚动条滚动事件 <style type="text/css"> #top_div{ position:fixed; bottom:80px; rig

  • javascript动画系列之模拟滚动条

    前面的话 当元素内容溢出元素尺寸范围时,会出现滚动条.但由于滚动条在各浏览器下表现不同,兼容性不好.所以,模拟滚动条也是很常见的应用.本文将详细介绍滚动条模拟 原理介绍 滚动条模拟实际上和元素模拟拖拽类似.仅仅通过范围限定,使元素只可以在单一方向上拖拽 <div id="box" style="height: 200px;width: 16px;background-color:#F5F5F5;border-radius:10px;box-shadow:inset 0

  • js超时调用setTimeout和间歇调用setInterval实例分析

    本文实例分析了js超时调用setTimeout和间歇调用setInterval的用法.分享给大家供大家参考.具体如下: 今天看了javascript高级程序设计(第三版)一书,发现说setTimeout比setInterval更好,觉得的确如此.平时都是用setInterval多点,现在还是转一下思路了.又学习到了.分析如下: setTimeout包含两个参数,第一个参数是要执行的代码,第二个参数是时间. 第一个参数可以是字符串也可以是函数,但是推荐使用函数而不是字符串. 使用字符串相当于eva

  • js判断滚动条是否已到页面最底部或顶部实例

    本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐藏了,下面就来给大家介绍这种效果实现原理与方法. 当可视区域小于页面的实际高度时,判定为出现滚动条,即: 复制代码 代码如下: if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll

  • JS实现的相册图片左右滚动完整实例

    本文实例讲述了JS实现的相册图片左右滚动效果.分享给大家供大家参考,具体如下: 执行左移右移函数: var $get = function(id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Extend = function(destination, source) { for (var property in source) { destination[property] = s

  • js操作滚动条事件实例

    本文实例讲述了js操作滚动条事件的方法.分享给大家供大家参考.具体分析如下: 之前一直很纳闷,如何监视滚动条的事件,今天终于有点明白了. 下边代码,是监听滚动条只要移动,下方的返回顶部的div显示与隐藏的代码 window.onscroll = function () { var t = document.documentElement.scrollTop || document.body.scrollTop; if (t > 0) { $(".cbbfixed").css(&q

随机推荐