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. [转载]Cortana 设计指导方针

    来源:@微软中国MSDN,源地址:http://weibo.com/p/1001603898586285925224 使用语音命令,延伸 Cortana 与您的应用程序所提供的功能.启动应用程序,启动 ...

  2. eclipse CDT写c++使用文件作为输入源（输入重定向）

    在main函数第一句添加下面. freopen("inputfile","r",stdin); 创建一个inputfile,放project根文件夹下. 注意添 ...

  3. IOS UIView自动调整尺寸

    自动尺寸调整行为 当您改变视图的边框矩形时,其内嵌子视图的位置和尺寸往往也需要改变,以适应原始视图的新尺寸.如果视图的autoresizesSubviews属性声明被设置为YES,则其子视图会根据au ...

  4. 深入理解Linux内核－信号

    信号:1.最初被引入作为用户态进程间通信2.内核也使用信号通知进程系统所发生的事件3.信号很短,发送给进程的唯一信息通常是一个数.4.名称通常以SIG为前缀5.信号时可消费资源,每个信号只能被传递一次 ...

  5. 把虚拟教练带回家，「EuMotus」想用AI实现高精度运动反馈系统

    https://36kr.com/p/5089139.html 无需穿戴设备,只需一个红外摄像头和+已安装好EuMotus专利软件的手提电脑 由政府主导的高达2200亿美金的健身与运动支出,15%的健 ...

  6. [SQL Server 2014] SQL Server 2014新特性探秘

    SQL Server 2014新特性探秘(1)-内存数据库   简介 SQL Server 2014提供了众多激动人心的新功能,但其中我想最让人期待的特性之一就要算内存数据库了.去年我再西雅图参加SQ ...

  7. Android 编程下 Canvas and Drawables

    Canvas and Drawables 安卓提供了一组绘制二维图形的 API(参考官方文档:Canvas and Drawables | Android Developers),这组 API 允许开 ...

  8. APT典型应用示例

    Ubuntu下的APT(Advanced Packaging Tools,高级软件包管理工具)是用于在Ubuntu下用于软件安装.升级.维护的工具.注意运行apt指令需要root权限. 下面是一个简单 ...

  9. 在IIS7上部署aspx网站

    在IIS7上部署aspx网站 2016-12-06 1 示例代码 WebForm.aspx内容: <html> <head> <script language=" ...

  10. Hadoop守护进程【简】

    [转自]http://xzx4959.blog.163.com/blog/static/47868170201311901848348/ 一般如果正常启动hadoop,我们可以在master上通过jp ...