之前的工作有接触到一些css3的新特性。div块的移动和回到初始位置，可以利用在开发中的很多地方。这里记录下来，下次就不用辛苦的灾区百度了。

<html>

     <head>

     <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

     <style type="text/css">

     </style>

     </head>

     <body>

        <div style="width:100px;height:30px;" id="trDiv">

            <div style="width:50%;height:100%;background-color:black;float:left" id="div1"></div>

            <div style="width:50%;height:100%;background-color:green;float:left" id="div2" onclick="movePlane()"></div>

        </div>

     </body>

     <script type="text/javascript">

        /**

         * 控制检索的面板移动

         * 使用css3特效

         */

         var goLeft = true;

        function movePlane(){

            var style = '';

            if(goLeft)style = 'translateX(300px)';

            else style = 'translateX(0px)';

            $('#div1').css({

                'Webkit-transform':style

            });

            $('#div2').css({

                'Webkit-transform':style

            });

            $('#div1').css({'Webkit-transition' : 'transform 0.5s linear'});

            $('#div2').css({'Webkit-transition' : 'transform 0.5s linear'});

            goLeft = !goLeft;

        }

    </script>

</html>

使用CSS3的translate和transition功能，控制一个两个div块的联动的更多相关文章

  1. css3的transform，translate和transition之间的区别与作用

    transform 和 translate transform的中文翻译是变换.变形,是css3的一个属性,和其他width,height属性一样 translate 是transform的属性值,是 ...

  2. css3中的translate,transform,transition的区别

    translate:移动,transform的一个方法               通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) ...

  3. css笔记——区分css3中的transform transition animation

    出处:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和动画有关的属性有三个  transform. transition  ...

  4. CSS3中translate、transform和translation的区别和联系

    translate:移动,transform的一个方法               通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) ...

  5. css3通过scale()实现放大功能、通过rotate()实现旋转功能

    css3通过scale()实现放大功能.通过rotate()实现旋转功能,下面有个示例,大家可以参考下 通过scale()实现放大功能 通过rotate()实现旋转功能 而transition则可设置 ...

  6. [BlueZ] 3、使用 meshctl 连接控制一个 sig mesh 灯

    目录 前言 1.准备工作 2.meshctl 连接.配置.控制 sig mesh 灯 3.最终效果: LINKS 前言 本文介绍如何使用 meshctl 配对.连接.控制一个 sig mesh 球泡灯 ...

  7. PHP控制div块大小和颜色的例子

    网站为了设计的更好看,会有很多的样式,而用php来控制样式很常见,无聊写了一个可以用于列表展示的样式,不喜忽喷. 1.先添加一个style样式控制div默认不换行 <style>div{f ...

  8. 采用CSS3的动态元素（动画）设计div块的层级式展现

    此练习作品是为学习HTML5+CSS3而设计的(如有不好请大家批评指教~~~). 操作:当页面加载时,点击网页中的绿色块(一层),则有其他几块(二层)从其中央出现并向外延伸并旋转,点击这几块中任意一个 ...

  9. 用css控制一个DIV画图标。

    在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样 ...

随机推荐

  1. laravel基础课程---7、文件处理、闪存、cookie（cookie原理和使用场景）

    laravel基础课程---7.文件处理.闪存.cookie(cookie原理和使用场景) 一.总结 一句话总结: 页面请求服务器的时候是把这个页面中所有的cookie都带上了的,cookie里面也存 ...

  2. Linux_学习_01_ 压缩文件夹

    二.参考资料 1.Linux下压缩某个文件夹命令

  3. (转)linux 打开文件数 too many open files 解决方法

    too many open files 出现这句提示的原因是程序打开的文件/socket连接数量超过系统设定值. 查看每个用户最大允许打开文件数量 ulimit -a fdipzone@ubuntu: ...

  4. Spring笔记04（DI（给属性赋值），自动装配（autowire））

    给不同数据类型注入值: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="h ...

  5. bzoj 2865 字符串识别 —— 后缀数组

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2865 唯一出现的子串就是每个后缀除去和别的后缀最长的 LCP 之外的前缀: 所以用这个更新一 ...

  6. Jmeter提取响应数据的结果保存到本地的一个文件

    原文地址: https://www.cnblogs.com/whitewasher/p/9504728.html 当做性能压测时,可能会需要把响应数据的一些字段统计出来.这里简单介绍一下. 1.首先把 ...

  7. saltstack其他运行模式

    除了常规的运行模式外,salt还有几种运行模式 salt-call --local可以直接在minion上自执行,多用于本机自测试,此方式几乎不用,知道即可 [root@linux-node2 ~]# ...

  8. celery和supervisor配合使用,实现supervisor管理celery进程

    在这里我选择redis作为celery异步任务的中间人,系统选择CentOS6.5 64位.redis.celery和supervisor的安装参见官方文档. 安装完毕后: 1, 创建celery的实 ...

  9. 【机器学习】支持向量机SVM

    关于支持向量机SVM,这里也只是简单地作个要点梳理,尤其是要注意的是SVM的SMO优化算法.核函数的选择以及参数调整.在此不作过多阐述,单从应用层面来讲,重点在于如何使用libsvm,但对其原理算法要 ...

  10. web前端之Html和Css应用中的细节问题

    1.居中的n种方法:①.margin: 0 20%; ——设置margin上下外边距的值设置为0,左右外边距设置成相同的百分比,既可将盒子居中. ②.margin: 0 auto;width: 100 ...