使用CSS3的translate和transition功能,控制一个两个div块的联动
之前的工作有接触到一些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块的联动的更多相关文章
- css3的transform,translate和transition之间的区别与作用
transform 和 translate transform的中文翻译是变换.变形,是css3的一个属性,和其他width,height属性一样 translate 是transform的属性值,是 ...
- css3中的translate,transform,transition的区别
translate:移动,transform的一个方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) ...
- css笔记——区分css3中的transform transition animation
出处:http://blog.csdn.net/dyllove98/article/details/8957232 CSS3中和动画有关的属性有三个 transform. transition ...
- CSS3中translate、transform和translation的区别和联系
translate:移动,transform的一个方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) ...
- css3通过scale()实现放大功能、通过rotate()实现旋转功能
css3通过scale()实现放大功能.通过rotate()实现旋转功能,下面有个示例,大家可以参考下 通过scale()实现放大功能 通过rotate()实现旋转功能 而transition则可设置 ...
- [BlueZ] 3、使用 meshctl 连接控制一个 sig mesh 灯
目录 前言 1.准备工作 2.meshctl 连接.配置.控制 sig mesh 灯 3.最终效果: LINKS 前言 本文介绍如何使用 meshctl 配对.连接.控制一个 sig mesh 球泡灯 ...
- PHP控制div块大小和颜色的例子
网站为了设计的更好看,会有很多的样式,而用php来控制样式很常见,无聊写了一个可以用于列表展示的样式,不喜忽喷. 1.先添加一个style样式控制div默认不换行 <style>div{f ...
- 采用CSS3的动态元素(动画)设计div块的层级式展现
此练习作品是为学习HTML5+CSS3而设计的(如有不好请大家批评指教~~~). 操作:当页面加载时,点击网页中的绿色块(一层),则有其他几块(二层)从其中央出现并向外延伸并旋转,点击这几块中任意一个 ...
- 用css控制一个DIV画图标。
在实际开发中,我们会用到一些小图形,图标.大多数情况下都是用图片来实现的,同时对图片进行处理使图片大小尽可能的缩小.但是图片在怎么处理也是按KB来算的.但是要是用CSS画,只要用很少的空间就能完成同样 ...
随机推荐
- javascript(9)
js中访问函数 p1.abc() p1["abc"]; js中基于对象 == js面向对象
- tensorflow knn 预测房价 注意有 Min-Max Scaling
示例数据: 0.00632 18.00 2.310 0 0.5380 6.5750 65.20 4.0900 1 296.0 15.30 396.90 4.98 24.00 0.02731 0.00 ...
- 使用OGNL表达式
OGNL表达式(#号的用法) 用法1:访问OGNL上下文和Action上下文,#相当于ActionContext.getContext() 1.如果访问其他Context中的对象,由于他们不是根对象, ...
- Visual Studio 2012 与此版本的 Windows 不兼容 解决
警告: [Window Title] 程序兼容性助手[Main Instruction] 此程序存在已知的兼容性问题[Expanded Information] Visual Studio 2012 ...
- darknet YOLO 编译使用GPU
Darknet在GPU上运行可以得到500倍的提速,编译使用GPU要求显卡是Nvidia卡并且正确安装了CUDA. GPU环境下的编译配置都是在 /darknet/Makefile 文件中定义的,GP ...
- CDH5.12.1 安装部署
###通过http://192.168.50.200:7180/cmf/login 访问CM控制台 4.CDH安装 4.1CDH集群安装向导 1.admin/admin登陆到CM 2.同意licens ...
- 「HNOI2008」「LuoguP3197」越狱(数论
题目描述 原题来自:HNOI 2008 监狱有连续编号为 111 到 nnn 的 nnn 个房间,每个房间关押一个犯人.有 mmm 种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人信仰的宗教相同, ...
- 【Lintcode】038.Search a 2D Matrix II
题目: Write an efficient algorithm that searches for a value in an m x n matrix, return the occurrence ...
- poj1734Sightseeing trip——无向图求最小环
题目:http://poj.org/problem?id=1734 无向图求最小环,用floyd: 在每个k点更新f[i][j]之前,以k点作为直接连到i,j组成一个环的点,这样找一下最小环: 注意必 ...
- 微信小程序再次升级:卖货小店小程序不用开发也能进行交易
卖货小店小程序,不用开发一行代码也能帮商家实现交易功能,这个真是几家欢喜几家愁啊,对于开发小程序商城的公司来说,这个无疑是一个雷霆之际,第一反应就是,这下完了,小程序自身就支持交易,那还要我们这些第三 ...