之前的工作有接触到一些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. 文件操作：os模块与os.path模块

    一.os与os.path 原创:http://www.cnblogs.com/lovemo1314/archive/2010/11/08/1871781.html os模块用于处理文件及文件夹,包括文 ...

  2. 机器学习：决策树--python

    今天,我们介绍机器学习里比较常用的一种分类算法,决策树.决策树是对人类认知识别的一种模拟,给你一堆看似杂乱无章的数据,如何用尽可能少的特征,对这些数据进行有效的分类. 决策树借助了一种层级分类的概念, ...

  3. bzoj3312

    K个硬币,要买N个物品. 给定买的顺序,即按顺序必须是一路买过去,当选定买的东西物品序列后,付出钱后,货主是不会找零钱的.现希望买完所需要的东西后,留下的钱越多越好,如果不能完成购买任务,输出-1 $ ...

  4. jupyter-notebook重设项目工作路径

    一. . Anaconda Prompt 命令(方法没生效) 1 选择一个用于存放config文件的文件夹(先创建) 2 在cmd中进入该文件夹的路径 3在cmd中 输入​命令 jupyter not ...

  5. poj1966Cable TV Network——无向图最小割(最大流)

    题目:http://poj.org/problem?id=1966 把一个点拆成入点和出点,之间连一条边权为1的边,跑最大流即最小割: 原始的边权赋成inf防割: 枚举源点和汇点,直接相邻的两个点不必 ...

  6. 利用正则表达式类解析SQL语句，达到Worklist兼容各个RIS数据库的目的

    在做RIS的项目中遇到一个问题, 因为Worklist要兼容各个RIS数据库, 因此设计了目前这个架构. 1.xml文件来配置RIS数据库的数据源, 2.xml文件来存储关于查询/更新数据库的SQL语 ...

  7. bzoj4453

    单调栈+set+后缀数组 一道奇妙的题 这道题如果对于每个询问$r$是固定的,那么就很简单了,可惜并不是 由于r会变化,那么对于两个子串$[i...r],[j...r]$,他们的大小关系随着r的变化也 ...

  8. 同时安装Python2与Python3，安装第三方包，老是报错

    同时安装Python2与Python3,安装第三方包,老是报错提示Fatal error in launcher: Unable to create process using '"',那可 ...

  9. web.xml中的<jsp-config>的用法详解

    <jsp-config> 包括<taglib> 和<jsp-property-group> 两个子元素. 其中<taglib>元素在JSP 1.2时就已 ...

  10. RequestsLibrary库入门介绍

    Robot framework也可以进行接口测试,只需要导入相应的RequestsLibrary库即可. 一.准备工作: 首先需要安装好Robot framework基础环境,前面已做说明,本文就不做 ...