我想在屏幕上显示一个按钮,在单个字符输入字段旁边。当用户点击按钮时 Angular 色会旋转 1 度,点击它 5 次它会旋转 5 度,按住它它会旋转。
我也希望向用户显示当前的旋转度数(这对于我最后想要构建的内容非常重要)。
目前我有 HTML:
<h2 class="rotate10"> P</h2>
CSS:
.rotate10{
/* Safari */
-webkit-transform: rotate(-10deg);
/* Firefox */
-moz-transform: rotate(-10deg);
/* IE */
-ms-transform: rotate(-10deg);
/* Opera */
-o-transform: rotate(-10deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
最佳答案
尝试这样的事情
var count = 0;
var target = $('h2');
$('button').mousedown(function(){
target = setInterval(function(){
count++;
$('h2').css('transform', 'rotate('+count+'deg)');
$('p').text('Rotated ' + count + 'deg');
}, 100);
return false;
});
$(document).mouseup(function(){
clearInterval(target);
return false;
});
button {
display: block;
}
p {
margin: 0;
}
h2 {
display: inline-block;
transform-origin: center;
font-size: 50px;
margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Rotate</button>
<p>Rotated 0deg</p>
<h2 class="rotate10">P</h2>
关于javascript - 旋转字符的 HTML 按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35652409/