CSS3 transform封装
2024-09-01 07:58:56
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 transform封装</title>
<style>
* {
margin: ;
padding:
}
#box{
width: 200px;
height: 200px;
background: purple;
}
</style>
</head>
<body>
<div id="box"></div> <script>
// 2个参数 是获取属性值
// 3个参数 是设置属性值
// 前提 想要获取 必须先用此函数设置值 cssTransform(box,'rotate',);
cssTransform(box,'translate',);
cssTransform(box,'translate',); // 初始化
console.log(cssTransform(box, 'translate')); function cssTransform( obj,attr,val ) {
if( !obj.transform ){
obj.transform = {};
}
if( arguments.length === ){ // 设置
obj.transform[attr] = val;
var str = '';
for( var key in obj.transform ){
switch ( key ){
case 'rotate':
case 'rotateX':
case 'rotateY':
str += key + '('+obj.transform[key]+'deg) ';
break;
case 'translate':
case 'translateX':
case 'translateY':
str += key + '('+obj.transform[key]+'px) ';
break;
case 'scale':
case 'scaleX':
case 'scaleY':
str += key + '('+obj.transform[key]+') ';
break;
}
obj.style.transform = str;
}
}else{ //获取值
val = obj.transform[attr];
if( typeof val === 'undefined'){
if( attr === 'scale' || attr === 'scaleX' || attr === 'scaleY' ){
val =
}else{
val=
}
}
return val;
} }
</script>
</body>
</html>
最新文章
- 网络IO模型：同步IO和异步IO，阻塞IO和非阻塞IO
- ACdream 1128 Maze（费用流）
- Hibernate Cascade & Inverse
- linux下如何安装rzsz
- web推送
- Python 基础 (单、双引号区别) 不断补充
- hack查询地址
- Linux显示一个二进制文件或可执行文件的完整路径
- 关于NOIP2018复赛若干巧合的声明
- P2365 任务安排 / [FJOI2019]batch（斜率优化dp）
- 搭建 Node.js 环境
- php实现session入库
- P4438 [HNOI/AHOI2018]道路
- 第一百四十七节，封装库--JavaScript，滑动导航
- 「HNOI2013」切糕
- vue-awesome-swiper 的 使用
- StampedLock原理
- [Bzoj1034][ZJOI2008]泡泡堂BNB（贪心）
- 让 webpack 加载 Source Map
- 自己动手开发IOC容器