[f]添加css3动画的方法
添加css3的一些动画的属性
使用方法:
css3(oDiv[0], 'scale', 300)('rotate', 300);
css3(oDiv[0], 'animation', '"dd" .50s ease-in-out 0s');
ps:可以完成一个变形继续下一个变形;
dd为具体动画的样式;
@-webkit-keyframes 'dd' {
0% { -webkit-transform:rotate(0deg);
}
50% {-webkit-transform:rotate(40deg);
}
100% {-webkit-transform:roate(70deg);
}
}
函数如下:
function css3(obj, attr, value) {
if (arguments.length == 2) {
if (attr == 'scale' || attr == 'rotate' || attr == 'rotateY' || attr == 'translateZ') {
var arr = ["Webkit", "Moz", "O", "ms", ""];
var sVal = '';
if (!obj.$Transform) {
obj.$Transform = {};
}
for (var i = 0; i < arr.length; i++) {
obj.style[arr[i] + "Transform"] = sVal;
switch (attr) {
case 'scale':
sVal = typeof(obj.$Transform[attr]) == 'number' ? obj.$Transform[attr] : 100;
break;
default:
sVal = obj.$Transform[attr] ? obj.$Transform[attr] : 0;
}
}
}
var sCur = obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, false)[attr];
if (attr == 'opacity') {
return parseInt(parseFloat(sCur) * 100);
} else {
return parseInt(sCur);
}
} else
if (arguments.length == 3) {
switch (attr) {
case 'scale':
case 'rotate':
case 'rotateY':
case 'translateZ':
case 'animation':
setCss3(obj, attr, value);
break;
case 'width':
case 'height':
case 'paddingLeft':
case 'paddingTop':
case 'paddingRight':
case 'paddingBottom':
value = Math.max(value, 0);
case 'left':
case 'top':
case 'marginLeft':
case 'marginTop':
case 'marginRight':
case 'marginBottom':
obj.style[attr] = value + 'px';
break;
case 'opacity':
obj.style.filter = "alpha(opacity:" + value + ")";
obj.style.opacity = value / 100;
break;
default:
obj.style[attr] = value;
}
}
return function(attr_in, value_in) {
css(obj, attr_in, value_in)
};
} function setCss3(obj, attr, value) {
var sTr = "";
var sVal = "";
var arr = ["Webkit", "Moz", "O", "ms", ""];
if (!obj["$Transform"]) {
obj["$Transform"] = {};
}
if (attr == 'animation') {
for (var i = 0; i < arr.length; i++) {
obj.style[arr[i] + 'Animation'] = value;
}
} else {
obj["$Transform"][attr] = parseInt(value);
for (sTr in obj["$Transform"]) {
switch (sTr) {
case 'scale':
sVal += sTr + "(" + (obj["$Transform"][sTr] / 100) + ") ";
break;
case 'rotate':
case 'rotateY':
sVal += sTr + "(" + (obj["$Transform"][sTr]) + "deg) ";
break;
case 'translateZ':
sVal += sTr + "(" + (obj["$Transform"][sTr]) + "px) ";
break;
}
}
for (var i = 0; i < arr.length; i++) {
obj.style[arr[i] + "Transform"] = sVal;
}
}
}
[f]添加css3动画的方法的更多相关文章
- CSS3 动画实现方法大全
常用效果总结(需要引用animate.css) <!doctype html> <html lang="en"> <head> <meta ...
- 如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画
但一个元素不设置height时,它的默认值是 auto,浏览器会计算出实际的高度. 但如果想给一个 height:auto 的块级元素的高度添加 CSS3 动画时,该怎么办呢? 从 MDN 的可以查到 ...
- css3动画由浅入深总结
阅读目录 一:过渡动画---Transitions 二:Animations功能 三:translate(tx,ty) 四:scale(x,y) 五:rotate(x): 5.1:skew(x,y): ...
- CSS3 动画基础
该文为译文转载,原文地址:http://tech.163.com/mobile/10/0106/09/5SB96QSM00112K88.html 译文:你需要知道的CSS3 动画技术 原文:Wha ...
- 用CSS3动画,让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- CSS3 动画效果带来的bug
css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...
- 【转】CSS3动画帧数科学计算法
本文来源于:财付通TID 原作者:bboy90 总结都浓缩在这个工具里了,想知道工具的地址或想窥探工具诞生的趣事请往下看 . —————————————————————– 华丽丽的开篇 ...
- 如何使用js捕获css3动画
如何使用js捕获css3动画 css3动画功能强大,但是不像js,没有逐帧控制,但是可以通过js事件来确定任何动画的状态. 下面是一段css3动画代码: #anim.enable{ -webkit-a ...
- css3动画和jquery动画使用中要注意的问题
前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论 先看代码: html: <div id ...
随机推荐
- 【Android 系统开发】Android JNI/NDK (三) 之 JNIEnv 解析
jni.h文件 : 了解 JNI 需要配合 jni.h 文件, jni.h 是 Google NDK 中的一个文件, 位置是 $/Android-ndk-r9d/platforms/android-1 ...
- VR全景智慧城市-720全景项目行业应用
VR虚拟现实.VR全景概念已成为科技发展热议的焦点.在这样的市场大环境下,全景智慧城市做为一家对大众创新万众创业和用户体验为理念的VR全景城市化信息搜素平台平地而生成为的VR行业领跑者,致力VR全景V ...
- 关于ILDASM.EXE的知识整理
因为现在用的VS2010,发现,这个工具自己就带着ILDASM.EXE这个反编译工具 具体的查找方式为: C:\Program Files\Microsoft SDKS\Windows\V7.0\bi ...
- virtualenv创建虚拟环境安装flask
virtualenv 有什么用?如果你象我一样热爱 Python ,那么除了基于 Flask 的项目外 还会有其他项目用到 Python .当项目越来越多时就会面对使用不同版本的 Python 的 问 ...
- python迭代器与生成器
1.迭代器 iterator 迭代器是一种对象类型!可以由生成器生成! 迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束.迭代器的一大优点是不要求事先准备好整个迭代过程中所有的元素.迭 ...
- 【转】WPF 窗体淡入淡出动画
第一种 <Window.Triggers> <EventTrigger RoutedEvent="Window.Loaded" > <BeginSto ...
- Shell脚本IF条件判断和判断条件总结
转自:http://m.jb51.net/article/56553.htm 这篇文章主要介绍了Shell脚本IF条件判断和判断条件总结,本文先是给出了IF条件判断的语法,然后给出了常用的判断条件总结 ...
- VS2008 Windows Form项目安装包生成详解
2008 Windows Form项目的发布对有经验的程序员来说,可能不值一提,但对很多新手来说却不知道如何操作,因为在很多关于Visual Studio的书籍中也没有相关介绍,权威如<C# 2 ...
- 灭顶之灾之网络电视精灵——S2 2.8
从前,有一个神奇的东西叫做搞搞精灵 关于他,有一段历史. 哎呀!我去!写不下去了. -.-以上玩笑 首先需求分析 TreeView显示两种频道 TypeA和TypeB 所以创建三个类 ChannelB ...
- 用jsch.jar实现SFTP上传下载删除
java类: 需要引用的jar: jsch-0.1.53.jar 关于jsch有篇文章关于目录的问题写得非常好:http://www.zzzyk.com/show/9f02969327434a6c.h ...