为了账号安全,请及时绑定邮箱和手机立即绑定

想要使用jquery实现每点击一次旋转90度?该怎么做?

想要使用jquery实现每点击一次旋转90度?该怎么做?

交互式爱情 2022-05-19 15:15:45
$(document).ready(function(){$("input").click(function(){$("#parent").animate({-webkit-transform:"rotateY(+=90deg)" //就是这行代码,应该怎么写?});});});
查看完整描述

2 回答

?
胡子哥哥

TA贡献1825条经验 获得超6个赞


<!DOCTYPE HTML><html><head><meta charset=UTF-8><title>YuGiOh</title><style type="text/css">#div {    position: absolute;    top: 50px;    left: 300px;    width: 300px;    height: 300px;    line-height: 300px;    text-align: center;    border: 1px solid black;}</style><script type="text/javascript" src="jquery-1.8.0.min.js"></script><script type="text/javascript">    var rotateHTML5 = function (limit)    {        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) + limit + RegExp.$4);    }         var rotateIE = function (obj)    {        var d = !!obj.d ? obj.d : 1;        var r = d * Math.PI / 180;        costheta = Math.cos (r);        sintheta = Math.sin (r);        obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix()";        var item = obj.filters.item (0);        var width = obj.clientWidth;        var height = obj.clientHeight;        item.DX = -width / 2 * costheta + height / 2 * sintheta + width / 2;        item.DY = -width / 2 * sintheta - height / 2 * costheta + height / 2;        item.M11 = costheta;        item.M12 = -sintheta;        item.M21 = sintheta;        item.M22 = costheta;        obj.timer = setTimeout (function ()        {            var dx = d + 1;            dx = dx > 360 1 : dx;            obj.d = dx;            rotate (obj, dx);        }, 30);    };         var start = function ()    {        if (!!div.interval)        {            clearInterval (div.interval);            delete div.interval;        }        else        {            div.interval = setInterval (function ()            {                /.*webkit.*/i.test (navigator.userAgent) ? rotateHTML5 (1) : rotateIE (div);            }, 30);        }    }</script></head><body>    <button onclick="start();">rotate</button>    <div id="div" style="border-radius: 90px; -webkit-transform: rotate(10deg);">ROTATE</div></body></html>



查看完整回答
反对 回复 2022-05-23
?
呼如林

TA贡献1798条经验 获得超3个赞

直接改css 不需要animate

查看完整回答
反对 回复 2022-05-23
  • 2 回答
  • 0 关注
  • 306 浏览

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号