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. python appium 封装获取toast方法

    获取toast text封装,传入toast 部分文本,返回全部文本 def get_toast_text(self,text): try: toast_loc = (By.XPATH, " ...

  2. Markdown语法与入门

    Markdown语法与入门   Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」.「语言」所迷惑,Markdown 的 ...

  3. 关于iReport-5.6.0之前版本 “无法启动”或者“一开就关闭”的 某些原因

    在经过Google搜索后.外国的大神说: We don't support Java 8 right now. Support will be added in next versions. 大概意思 ...

  4. php正则表达式入门-常用语法格式

    php正则表达式入门-常用语法格式 原文地址:http://www.jbxue.com/article/24467.html 分享下php正则表达式中的一些常用语法格式,用于匹配字母.数字等,个人感觉 ...

  5. oracle trim函数用法详解

    在oracle数据库中,trim一般都是用在删除字符串两边的空格.实际上,trim也可以用来删除字符串两边的指定字符.并且trim指定删除的字符串只能是单个字符Oracle TRIM函数是很常见的函数 ...

  6. python进程间通信 实例

    python实现进程间通信简单实例 实例讲解了python实现两个程序之间通信的方法,具体方法:该实例采用socket实现,与socket网络编程不一样的是socket.socket(socket.A ...

  7. 【Unity】6.6 Random类

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

  8. password学4——Java 加密解密之消息摘要算法（MD5 SHA MAC）

    Java 加密解密之消息摘要算法(MD5 SHA MAC) 消息摘要 消息摘要(Message Digest)又称为数字摘要(Digital Digest). 它是一个唯一相应一个消息或文本的固定长度 ...

  9. HTML杂记

    1.URL  uniform resource locator 遵循格式: scheme://host.domain:port/path/filename scheme - 定义因特网服务的类型.最常 ...

  10. [Windows Azure] Create a Virtual Network for Site-to-Site Cross-Premises Connectivity

    Create a Virtual Network for Site-to-Site Cross-Premises Connectivity This tutorial walks you throug ...