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. Knockout: 使用knockout validation插件进行校验, 给未通过校验的输入框添加红色边框突出显示.

    之前整理了三篇帖子: Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示. http://www.cnblogs.com/liuzhend ...

  2. 常用代码之七：静态htm如何包含header.htm和footer.htm。

    要实现这个有多种解决方案,比如asp, php, 服务器端技术,IFrame等,但本文所记录的仅限于用jQuery和纯htm的解决方案. <head> <title></ ...

  3. category使用 objc_setAssociatedObject/objc_getAssociatedObject 实现添加属性

    属性 其实就是get/set 方法.我们可以使用  objc_setAssociatedObject/objc_getAssociatedObject  实现 动态向类中添加 方法 @interfac ...

  4. 微服务，ApiGateway 与 Kong

    一. 微服务 二. Api Gateway 三. Kong 的使用 一. 微服务 对于一些传统的 大型项目,传统的方式会有一些缺陷,比如说 新人熟悉系统成本高(因为整个系统作为一个整体,彼此会有一定的 ...

  5. 修改PS1变量

    PS1='\[\e[7;46m\]\u\[\e[0m\]@\[\e[0;32m\]\h\[\e[0m\]:\[\e[0;34m\]\w\[\e[0m\]\$ ' from: http://profes ...

  6. OpenStack大规模部署详解

    https://blog.csdn.net/karamos/article/details/80130443 0.前言今年的2月22日,OpenStack发布了15个版本Ocata. 走过了7年的发展 ...

  7. [Windows Azure] Create and use a reporting service in Windows Azure SQL Reporting

    Create and use a reporting service in Windows Azure SQL Reporting In this tutorial you will learn ab ...

  8. python 发送邮件 带附件

    # coding:utf-8 # __author__ = 'Mark sinoberg' # __date__ = '2016/5/26' # __Desc__ = 实现发送带有各种附件类型的邮件 ...

  9. spring 过滤器

    Spring的web包中中有很多过滤器,这些过滤器位于org.springframework.web.filter并且理所当然地实现了javax.servlet.Filter,不过实现的方式有以下几类 ...

  10. pandas简单应用

    机器学习离不开数据,数据分析离不开pandas.昨天感受了一下,真的方便.按照一般的使用过程,将pandas的常用方法说明一下. 首先,我们拿到一个excel表,我们将之另存为csv文件.因为文件是实 ...