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. Mac下安装mysql8.0.11

    1.下载MySQL Community 版本:8.0.11,本次例子是以dmg安装的方式,下载的文件名为:mysql-8.0.11-macos10.13-x86_64.dmg 下载地址:https:/ ...

  2. vs 2017打包安装包（印象深刻）

    Visual Studio Install 打包安装项目2017 以下是具体步骤 一.安装环境 1.下载:链接地址 2.安装vs2017的时候需要安装依赖 .NET framework 4.6 .下载 ...

  3. 用Entityframework 调用Mysql时，datetime格式插入不进去数据库的解决办法。

    1. 打开Model.edmx, 2. 选择userinfo中的createtime字段的属性 3. storegeneratedpattern设置值为None

  4. 如何在Linux平台下安装JDK

    原文链接:http://android.eoe.cn/topic/android_sdk 1.下载Java的开发包JDK: JDK有好几个类型版本,我们只需要选择Java SE类型的版本就行了. 进入 ...

  5. Atitit codeblock c++开发环境建立attilax总结

    Atitit codeblock c++开发环境建立attilax总结 1.1. C++的重要意义 1 1.2. 项目ide的选项 1 1.3. 安装MinGW  (基于GCC的C++编译器)  50 ...

  6. xilinx IP核配置,一步一步验证Xilinx Serdes GTX最高8.0Gbps

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u010161493/article/details/77658599   目录(?)[+]   之前 ...

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

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

  8. 《Android源代码设计模式解析》读书笔记——Android中你应该知道的设计模式

    断断续续的,<Android源代码设计模式解析>也看了一遍.书中提到了非常多的设计模式.可是有部分在开发中见到的几率非常小,所以掌握不了也没有太大影响. 我认为这本书的最大价值有两点,一个 ...

  9. 通过show variables like ‘general_log%’可以看查询日志

    mysql> show variables like 'general_log%'; +------------------+-----------------------------+ | V ...

  10. [Windows Azure] Developing Multi-Tenant Web Applications with Windows Azure AD

    Developing Multi-Tenant Web Applications with Windows Azure AD 2 out of 3 rated this helpful - Rate ...