使用CSS3的translate和transition功能,控制一个两个div块的联动
2024-08-27 17:03:57
之前的工作有接触到一些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>
最新文章
- C#操作XML之读取数据
- Linux系统初始流程
- javaScirpt学习之事件
- ##常用效果css##
- hope is a good thing!
- 关于php框架
- Drawable(2)State list Drawable Resource介绍
- is_numeric漏洞分析
- hdu-1890-Robotic Sort splay区间翻转
- 模拟springmvc 内部登陆,跳过spring filter
- 【转】修改Android工程的名称、安装路径
- java_基础_异常
- Scrapy基础02
- HTML5 学习06——Geolocation(地理定位)
- 彻底弄懂“PKIX path building failed”问题
- shidebing——QandA:解决一个需求20171214
- linux下的字符界面和图形界面转换
- js:实现自定义事件对象接口
- GDAL线面互转换(2)
- Jmeter之八大可执行元件及执行顺序
热门文章
- mac下配置java运行环境
- ACM学习历程—HDU5265 pog loves szh II(策略 &;&; 贪心 &;&; 排序)
- loj 6089 小 Y 的背包计数问题——分类进行的背包
- bzoj1853幸运数字——容斥原理
- 逻辑回归(LogisticRegression)(未完)
- docker 学习(七) docker 容器挂载
- JSON 生成 C# Model
- C# 生成word 文档 代码 外加 IIS报错解决方案
- “MVC+Nhibernate+Jquery-EasyUI”信息发布系统 第二篇(数据库结构、登录窗口、以及主界面)
- FZU - 2214 Knapsack problem 01背包逆思维