JavaScript / JQuery使用速度和度数旋转点击图像
[英]JavaScript/JQuery rotate an image on click using speed and degrees
问题描述
单击图像时，如何旋转图像；每次单击图像时，旋转速度都应该增加。
4 个解决方案
解决方案1
0 2018-03-25 13:56:55
试试这个：
$("body").on("click", "#buttonId", function () {
$(".north, canvas").rotate(90);
});
解决方案2
0 2018-03-25 14:01:13
您可以使用css transform属性转换html元素。要通过jquery旋转，您可以编写一种方法，将transofrm属性添加到具有相应角度的元素中。
$.fn.rotate = function(deg){ deg = deg+"deg"; $(this).css("transform","rotate(deg)"); }
解决方案3
0 2018-03-25 14:10:25
var theImage = document.getElementById("TheImage"); var degree = 0; var increment = 0; var firstClick = true; function rotateTheImage() { degree += increment; theImage.style.transform = "rotate(" + degree + "deg)"; } theImage.addEventListener("click", function() { if(firstClick) { setInterval(rotateTheImage, 100); firstClick = false; } increment++; }, false);
<!DOCTYPE html> <html> <head> <title>Rotate by Click</title> </head> <body> <svg id="TheImage" xmlns="http://www.w3.org/2000/svg" width="124" height="124"> <path fill="none" stroke="#000" stroke-width="5" d="m61,7a55,55 0 1,0 2,0zm1,0v110m39-16-78-78m78,0-78,78m-16-39h110"/> </svg> </body> </html>
添加：JAVASCRIPT代码的JQUERY版本：
<!DOCTYPE html> <html> <head> <title>Rotate by Click</title> </head> <body> <svg id="TheImage" xmlns="http://www.w3.org/2000/svg" width="124" height="124"> <path fill="none" stroke="#000" stroke-width="5" d="m61,7a55,55 0 1,0 2,0zm1,0v110m39-16-78-78m78,0-78,78m-16-39h110"/> </svg> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script> var degree = 0; var increment = 0; var firstClick = true; function rotateTheImage() { degree += increment; $("#TheImage").css("transform", "rotate(" + degree + "deg)"); } $("#TheImage").click(function() { if(firstClick) { setInterval(rotateTheImage, 100); firstClick = false; } increment++; }); </script> </body> </html>
只是一个快速的实现。 希望对您有所帮助。
解决方案4
0 2018-03-25 14:22:46
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<style>
#image{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
</style>
</head>
<body>
<img id="image" width="50" height="50" src="https://upload.wikimedia.org/wikipedia/commons/8/82/Facebook_icon.jpg">
<script>
$(function(){
var rotateByAngle = 90;
$("#image").click(function(){
rotateByAngle+= 90;
$(this).css({
"transform": "rotate(" + rotateByAngle + "deg)",
"-webkit-transform" : "rotate(" + rotateByAngle + "deg)"
})
});
});
</script>
</body>
</html>
使用带有动画的 jquery 在单击时将图像旋转 180 度
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.