JS运动 - 无缝滚动和缓动动画

  • 无缝滚动原理:首先先复制两张图片(第一张和第二张)放到最后面;ul绝对定位,如果ul的left值大于等于4张图片的宽度,就应该快速复原为0.

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>无缝滚动</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .box {

            width: 600px;

            height: 200px;

            background: red;

            margin: 100px auto;

            overflow: hidden;

            position: relative;

        }

        ul {

            list-style: none;

            /*font-size: 0;*/ /* 清除图片之间的间距之方法一 */

            width: 1000%;

            position: absolute;

            left: 0;

            top: 0;

        }

        li {

            float: left;

        }

        li img {

            vertical-align: bottom; /* 清除图片之间的间距之方法二 */

        }

    </style>

</head>

<body>

    <div class="box">

        <ul>

            <li><img src="images/scroll01.jpg" alt=""></li>

            <li><img src="images/scroll02.jpg" alt=""></li>

            <li><img src="images/scroll03.jpg" alt=""></li>

            <li><img src="images/scroll04.jpg" alt=""></li>

            <li><img src="images/scroll01.jpg" alt=""></li>

            <li><img src="images/scroll02.jpg" alt=""></li>

            <li><img src="images/scroll03.jpg" alt=""></li>

            <li><img src="images/scroll04.jpg" alt=""></li>

        </ul>

    </div>

</body>

</html>

JS

<script>

    window.onload = function () {

        var ul = document.getElementsByTagName("ul")[0];

        var offsetX = 0;

        var timer = null;

        timer = setInterval(scrollDidScroll,10);

        function scrollDidScroll() {

            offsetX--;

            offsetX = offsetX < -1200 ? 0 : offsetX;

            ul.style.left = offsetX + "px";

            console.log(offsetX);

        }

        ul.onmouseover = function () {

            clearInterval(timer);

        }

        ul.onmouseout = function () {

            timer = setInterval(scrollDidScroll,10);

        }

    }

</script>

效果图

  • 缓动动画(减速运动)原理 : 记住公式

假如:初始值 leader = 0; 目标值 target = 400; speed = 10;公式如下

leader = leader + (target - leader) / speed;

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>滚动图</title>

    <style>

        * {

            padding: 0;

            margin: 0;

            font-size: 10px;

        }

        ul, ol {

            list-style: none;

        }

        .box {

            width: 490px;

            height: 170px;

            margin: 100px auto;

            position: relative;

            overflow: hidden;

        }

        .box ul {

            position: absolute;

            top: 0;

            left: 0;

            width: 800%;

            height: 100%;

        }

        .box ul li {

            width: 490px;

            float: left;

        }

        .box ol {

            position: absolute;

            bottom: 10px;

            left: 50%;

            margin-left: -40px;

            text-align: center;

        }

        .box ol li {

            width: 15px;

            height: 15px;

            line-height: 15px;

            float: left;

            background-color: #cccccc;

            color: #ffffff;

            margin-left: 10px;

            cursor: pointer;

        }

        .box .current {

            background-color: orange;

        }

    </style>

</head>

<body>

    <div class="box">

        <ul id="scrollJS">

            <li><img src="0329images/01.jpg" alt=""></li>

            <li><img src="0329images/02.jpg" alt=""></li>

            <li><img src="0329images/03.jpg" alt=""></li>

            <li><img src="0329images/04.jpg" alt=""></li>

        </ul>

        <ol id="olJS">

            <li class="current">1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

        </ol>

    </div>

</body>

</html>

JS

<script>

    window.onload = function () {

        var width = 490;

        var timer = null;

        var leader = 0;

        var scroll = document.getElementById("scrollJS");

        var lis = document.getElementById("olJS").children;

        for (var i=0;i<lis.length;i++) {

            lis[i].index = i;

            lis[i].onmouseover = function () {

                clearInterval(timer);

                for (var j=0;j<lis.length;j++) {

                    lis[j].className = "";

                }

                this.className = "current";

                var target = -this.index * width;

                timer = setInterval(function () {

                    leader = leader + (target - leader) / 10;

                    scroll.style.left = leader + "px";

                },30);

            }

        }

    }

</script>

效果图

JS运动 - 无缝滚动和缓动动画的更多相关文章

  1. JS 实现无缝滚动动画原理（初学者入）

    这段时间在教培训班的学生使用原生javascript实现无缝滚动的动画案例,做了这个原理演示的动画,分享给自学JS的朋友!博主希望对你们有帮助! 在讲解之前先看一下demo: demo:https:/ ...

  2. scrollLeft的相关问题（js横向无缝滚动）

    <div id="demo"> <div id="innerdemo"> <div id="demo1"> ...

  3. js图片无缝滚动代码

    想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...

  4. JS平滑无缝滚动实现———实现首页广告自动滚动效果（附实例）

    本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: 1. #demo { 2. background: #FFF; 3. overflow:hidden; 4. borde ...

  5. js 图片无缝滚动

    html部分 <div id="roll"> <a href="javascript:void(0)" class="prev&qu ...

  6. JS实现无缝滚动

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. js文字无缝滚动

    <div id=demo style="overflow:hidden; width:128px; height:300px;"> <div id=demo1&g ...

  8. CSS3动画之无缝滚动

    与js的无缝滚动类似,整个承载图片的盒子移动,克隆一组图片放置最后,当一组图片播放结束后将盒子定位在有一组图片宽度的左侧 HTML结构: <div class="box"&g ...

  9. JavaScript--缓动动画+轮播图

    上效果: 实现步骤: 最重要的是运动公式!!! <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

随机推荐

  1. ipod classic 检查硬盘方法

    长按(中间键+MENU)重启接着按(中键+左键)一直进入工程模式进入后顺序是:menu-IO-HARDDRIVE-HDSMARTDATA 就可以看到了. retracts--硬盘磁头非正常退回,比如硬 ...

  2. kafka 监控（eagle）

    topic:创建时topic名称 partition:分区编号 offset:表示该parition已经消费了多少条message logSize:表示该partition已经写了多少条message ...

  3. haproxy 非常完整的配置

    常用配置选项: OPTION 选项: option httpclose :HAProxy会针对客户端的第一条请求的返回添加cookie并返回给客户端,客户端发送后续请求时会发送 此cookie到HAP ...

  4. Mysql Server系统架构介绍

    总的来说,MySQL可以看成是二层架构. 第一层我们通常叫做SQL Layer,在MySQL数据库系统处理底层数据之前的所有工作都是在这一层完成的,包括权限判断,sql解析,执行计划优化,query ...

  5. 在c和c++中的求绝对值

    在c语言中,根据类型的不同,求绝对值函数也不同. int abs(int x) double fabs(double x) 求int类型用abs,求浮点类型用fabs. 而且这两个函数的所在头文件也不 ...

  6. [na]ping提示&各系统默认的TTL值

    1,Win7 ping 不存在的地址(请求超时) ip routing和no ip routing no ip routing----不查路由表 不配置网关---arp-catch中存在很多条目(相当 ...

  7. 【Unity】6.6 Random类

    分类:Unity.C#.VS2015 创建日期:2016-04-20 一.简介 Unity引擎提供的Random类可以用来生成随机数.随机点或旋转角度. 1.成员变量 seed:设置用于随机数生成器的 ...

  8. 从头认识java-15.7 Map（5）-介绍HashMap的工作原理-Key变了，能不能get出原来的value？（偶尔作为面试题）

    这一章节我们讨论一个比較特殊的情况Key变了,能不能get出原来的value? 答案是:有时能够,有时不能够 1.能够的情况: package com.ray.ch14; import java.ut ...

  9. Django使用manage.py备份与恢复数据

    Django dumpdata and loaddata django database model dumpdata dumpdata command It is a django manageme ...

  10. 什么是UML？分哪两类？

    统一建模语言(UML是 Unified Modeling Language的缩写)是用来对软件密集系统进行可视化建模的一种语言.UML为面向对象开发系统的产品进行说明.可视化.和编制文档的一种标准语言 ...