如何在每次点击时用CSS转换/转换JS将对象旋转120度
How to rotate an object 120deg on every click with CSS-transition/transform throu JS
每次按下按钮时,我都想将我的blueRect从原来的位置旋转120度,我无法让它正常工作,有人能知道我的代码出了什么问题吗?我知道我没有掌握所有的前缀。jsfiddle:http://jsfiddle.net/a0mycee7/
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<style>
#blueRect{
width: 50px;
height: 50px;
background-color: #aaaaff;
border: solid 3px #000000;
margin-left: 30px;
transition: all 2s ease-out;
-moz-transition: all 2s ease-out;
}
</style>
<script type="text/javascript">
var angle = 0;
$('#right').click(function() {
//$(this).toggleClass('active');
angle+=120;
$('#blueRect').css ({
'transform: rotate(' + angle + 'deg)',
'-webkit-transform: rotate(' + angle + 'deg)',
'-moz-transform: rotate(' + angle + 'deg)',
'-o-transform: rotate(' + angle + 'deg)',
'-ms-transform: rotate(' + angle + 'deg)'
});
});
</script>
</head>
<body>
<div id="background">
<div id="blueRect">
</div>
</div>
<button id="right">1</button>
</body>
</html>
.css()
函数需要散列而不是数组:Fiddle
基本上,改变
$('#blueRect').css ({
'transform: rotate(' + angle + 'deg)',
'-webkit-transform: rotate(' + angle + 'deg)',
'-moz-transform: rotate(' + angle + 'deg)',
'-o-transform: rotate(' + angle + 'deg)',
'-ms-transform: rotate(' + angle + 'deg)'
});
至
$('#blueRect').css ({
'transform': 'rotate(' + angle + 'deg)',
'-webkit-transform': 'rotate(' + angle + 'deg)',
'-moz-transform': 'rotate(' + angle + 'deg)',
'-o-transform': 'rotate(' + angle + 'deg)',
'-ms-transform': 'rotate(' + angle + 'deg)'
});
这引发了一个错误BTW,因为您的初始代码有花括号({}
),但实际上应该有方括号([]
),因为它不包含键值对。下次好好利用浏览器中的JS控制台(或者使用Firefox时使用FireBug)。
(jQuery没有加载到fiddle中,也是必需的:)
var angle = 0;
$('#right').click(function() {
//$(this).toggleClass('active');
angle+=120;
$('#blueRect').css ({
'transform': 'rotate(' + angle + 'deg)',
'-webkit-transform': 'rotate(' + angle + 'deg)',
'-moz-transform': 'rotate(' + angle + 'deg)',
'-o-transform': 'rotate(' + angle + 'deg)',
'-ms-transform': 'rotate(' + angle + 'deg)'
});
});
相关文章:
- 使用JS将数组转换为json对象
- 如何使用js将SNAPSHOT内部版本号转换为3位数的整数
- 如何使用下划线js转换这些数据
- js代码从jQuery转换为原生代码
- 如何将我的json结构转换为C3.js所需的列结构
- 将数组键转换为数字node.js
- 带Js的货币转换器
- node.js将字符串转换为要上传到Web服务器的文件
- 将字符串转换为JS对象
- 将HTML5模板转换为流星.js,关于js init的问题
- 建议将包含不同参数的内联JS转换为外部脚本
- 闭包js框架-将ArrayBuffer转换为字符串
- 在js中将字符串转换为十六进制
- d3.js条形图转换无法正常工作
- JS-如何将图像对象转换为灰度并显示
- 用于转换JS对象的任何标准JavaScript库
- 如何在每次点击时用CSS转换/转换JS将对象旋转120度
- 需要一些帮助转换Js到c#
- 转换JS日期+时间到不同的时区
- 转换Js数组到JSON对象的关键字