rotate.js插件做旋转,超过360°会直接反向回到0,怎么解决?

JavaScript011

rotate.js插件做旋转,超过360°会直接反向回到0,怎么解决?,第1张

不一定非要用 jquery.rotate.js 插件做呀,可以考虑使用css3的transform属性,改变rotate()中的角度参数。

参考博客:

https://www.xuejiayuan.net/blog/573802ccd7c34c3f82a3ed96a5ccbaa3

代码应该是:

imgcss[i].style.transform="rotate(" + j + ")"

首先 j是变量 双引号里面套单引号 还是字符串, 不是变量

其次 字符串拼接要写加号

<!DOCTYPE HTML>

<html>

<head>

<meta charset=UTF-8>

<title>recursion</title>

<style type="text/css">

</style>

<script type="text/javascript">

var test = function ()

    {

    var reg = /(rotate\([\-\+]?((\d+)(deg))\))/i

    var wt = div.style['-webkit-transform'], wts = wt.match (reg)

    var $2 = RegExp.$2

    console.log ($2)

    div.style['-webkit-transform'] = wt.replace ($2, parseFloat (RegExp.$3) + 10 + RegExp.$4)

    }

</script>

</head>

<body>

<button onclick="test()">rotate</button>

<div id="div" style="width: 300px height: 300px border: 1px solid black -webkit-transform: translate(300px, 0px) rotate(10deg) scale(1, 1)">ddd</div>

</body>

</html>