<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>动画</title>

        <style>

            * {

                margin: 0;

                padding: 0;

            }

            .aa {

                position: absolute;

                top: 0;

                width: 200px;

                height: 200px;

                border: 1px solid red;

                z-index: 2;

                background: transparent;

            }

            .aa:nth-child(1) {

                left: 0;

            }

            .aa:nth-child(2) {

                left: 210px;

            }

            .aa:nth-child(3) {

                left: 420px;

            }

            .aa:nth-child(4) {

                left: 630px;

            }

            .aa:nth-child(5) {

                left: 840px;

            }

            .bj {

                position: absolute;

                top: 0;

                left: 0;

                width: 200px;

                height: 200px;

                background-color: #008000;

                transition: all 1s;

            }

            .p {

                position: relative;

            }

        </style>

    </head>

    <body>

        <div class="p">

            <div class="aa">

                1

            </div>

            <div class="aa">

                2

            </div>

            <div class="aa">

                3

            </div>

            <div class="aa">

                4

            </div>

            <div class="aa">

                5

            </div>

            <div class="bj">

            </div>

        </div>

        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

        <script type="text/javascript">

            $('.aa').click(function() {

                let index = $(this).index();

                $('.bj').css('transform', 'translateX(' + $('.aa').eq(index).css('left') + ')');

            })

        </script>

    </body>

</html>

css 背景 平移 动画的更多相关文章

  1. Android动画：模拟开关按钮点击打开动画（属性动画之平移动画）

    在Android里面,一些炫酷的动画确实是很吸引人的地方,让然看了就赏心悦目,一个好看的动画可能会提高用户对软件的使用率.另外说到动画,在Android里面支持3种动画: 逐帧动画(Frame Ani ...

  2. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  3. 问题杂烩(scrollTop/背景透明度动画)

    今天给同学找我帮忙写js,是公司里的活..我是不是应该跟他要钱哈哈,不过一顿饭肯定是免不了的了. 言归正传,今天写了三个小东西,因为兼容性的问题,用jq写的(很是别扭的说,但是没办法啊,一边看api一 ...

  4. ArcGIS api for javascript——地图配置-定制平移动画

    描述 本例展示了当用户点击平移按钮时如何定制地图的动画.panDuration和panRate是Dojo动画属性,可以分别确定动画的duration和帧刷新的rate.这些属性的单位都是毫秒,panD ...

  5. 简单CSS实现闪烁动画（+1白话讲解）

    原文:简单CSS实现闪烁动画(+1白话讲解) 本文转载于:猿2048网站⇒https://www.mk2048.com/blog/blog.php?id=icj2chj2ab 背景 本文承接自上文&l ...

  6. 10 个独特的 CSS 背景视觉效果

    这几年的web设计中,大背景的设计变得越来越流行.特别是在现在大屏大行其道的情况下,设计师在设计中越来越多的使用大分辨率的背景图来填充屏幕,这样更能制造独特的视觉效果,能更好的传达他们想要向用户传达的 ...

  7. Android 手机卫士--平移动画实现

    本文实现如下几个界面之间的平移动画实现 本文地址:http://www.cnblogs.com/wuyudong/p/5954847.html,转载请注明出处. 分析: 导航界面移动过程中,平移动画 ...

  8. CSS背景background、background-position使用详解

    背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一.这篇文章将会涉及css背景(background)的基本用法,包括诸如 background-attachm ...

  9. 你不知道的CSS背景—css背景属性全解

    CSS背景在网页设计中使用频率非常高,然而对于这个开发人员很熟悉的CSS属性,却隐藏着许多不为初级开发人员熟知的细节,这篇文章尝试扒开这层不为人知的面纱. 首先列举一下CSS中关于元素背景的所有属性并 ...

随机推荐

  1. Relation（NOIP模拟赛）（二分图染色）

    原题: Description 有n个人,编号为1àn,告诉你那些人之间是不友好的.现在,让你将这n个人分成两组,使得每一组之内的人是互相友好的,如果可以分成两组,则输出如何分组的,如果不可以分成两组 ...

  2. 调试钩取技术 - 记事本WriteFile() API钩取

    @author: dlive 0x01 简介 本章将讲解前面介绍过的调试钩取技术,钩取记事本的kernel32!WriteFile() API 调试钩取技术能进行与用户更具有交互性(interacti ...

  3. Linux下Redis使用

    1. 简介 REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统. 2. 安装 安装方法如下: # yum i ...

  4. SQL 数据库函数

    字符串函数 lower(字符串表达式) | select lower('ABCDEF')返回 abcdef | 返回大写字符数据转换为小写的字符表达式. upper(字符串表达式) | select ...

  5. centos7 svn服务器搭建

    系统环境:centos 7.5 yum安装svn yum install subversion -y 创建svn 版本库目录 mkdir -p /var/svn/svnrepos 在版本库目录下创建版 ...

  6. 第一章：1-11、在上题的分组交换网中，设报文长度和分组长度分别为x和（p+h）（bit），其中p为分组的数据部分的长度，而h为每个分组所带的控制信息固定长度，与p的大小无关。通信的两端共经过k段链路。链路的数据率为b（bit/s），但传播时延和结点的排队时间均可忽略不计。若打算使总的时延为最小，问分组的数据部分长度p应取为多大？

    <计算机网络>谢希仁著第四版课后习题答案答: 分组个x/p, 传输的总比特数:(p+h)x/p 源发送时延:(p+h)x/pb 最后一个分组经过k-1个分组交换机的转发,中间发送时延:(k ...

  7. 用原生javascript实现最简单的发布者-订阅者模式

    http://www.cnblogs.com/surahe/p/6065778.html 发布—订阅模式可以广泛应用于异步编程中,这是一种替代传递回调函数的方案.比如,我们可以订阅 ajax 请求的 ...

  8. AC日记——玻璃切割 51nod 1562

    玻璃切割 思路: 并查集: 离线操作: 先把每次切割都存下来: 然后从后面不断合并切割: 然后每次更新最大长和宽: 记录答案: 要开longlong: 来,上代码 #include <cstdi ...

  9. quailty's Contest #1 道路修建 EXT（启发式合并）

    题目链接  道路修建 EXT 考虑并查集的启发式合并,合并的时候小的子树的根成为大的子树的根的儿子. 可以证明这样整棵树的深度不会超过$logn$. 两个根合并的时候,产生的新的边的边权为当前的时间. ...

  10. Python的程序结构[5] -> 模块/Module[0] -> 内建模块 builtins

    builtins 内建模块 / builtins Module 在Python的模块中,有一种特殊模块,无需导入便可以使用,其中包含了许多内建函数与类. builtins 模块内容 / builtin ...