js如何实现一个div左右旋转

如题所述

推荐答案推荐于2016-03-20

js控制div旋转的例子：
<DIV id=aDiv style="WIDTH: 70px; POSITION: absolute; HEIGHT: 70px">
< IMG width=70 height=70 src="http://www.smallrain.net/jsimg/images/pic.gif" />//假如这个图
<DIV>

//使角度转起来
var angle = 0;
function doRotate() {
//检查并确保角度值在0到360之间
if(angle>360) angle-=360;
//使角度增加
angle+=15;
//do rotation
rotate("aDiv",angle);
//定位旋转中心
var el = document.getElementByIdx_x_x("aDiv")//C#中要马上设位置.
el.style.top = 25 - (el.offsetHeight/2);//父元素的高度/2-旋转元素高度/2,还需注意旋转是同父元素的LOP,和left上关的,请上机测试
el.style.left = 25 - (el.offsetWidth/2);//父元素的宽度/2-旋转元素度/2

//循环
setTimeout("doRotate();",20);
}

温馨提示：答案为网友推荐，仅供参考

当前网址：http://77.wendadaohang.com/zd/pvqIIINIv8IGWNvWIY.html

其他回答

第1个回答推荐于2018-02-28

<!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">
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>

本回答被网友采纳

第2个回答推荐于2017-11-27

<div>标签本身没有动态属性的，要实现动态可以通过dom修改<div>内部引用的标签属性本回答被网友采纳

相似回答

js/jq控制一个DIV从左往右打开要怎么做?答：animate()方法是有回调函数的，你可以把你要出现的绝对定位div放到回调函数里面，就会等待动作执行完成之后才出现。

js,控制一个div向左右匀速移动循环答：这个不需要js，直接使用css就行，给你一个简单的demo，有不懂的可以问我：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{height: 100%; position: relative;} .demo{position: absolute; width: 80%; height: ...

如何使用js的计时器来让一个div背景从左向右移动全部代码答：1：向左） var dir = 0; // 每次移动的百分比，控制速度 var step = 3; div.addEventListener('mouseover', function() { var node = div; dir = 0; if (!div.mover)

js实现div自动在窗口左右移动答：var windowWidth = win.clientWidth; var windowHeight = win.clientHeight; if (windowWidth - width < (left + i)) { i = -i; } else if ((left + i) < 0) { i = -i; } if (windowHeight - height < (top + j)) { ...

JS 如何改变DIV的角度就是让div倾斜的意思出了用PS之外一切可实现的方...答：<div id="d_bx" style="position:absolute;left:320px;top:240px;width:150px;height:50px;border:1px solid #0000ff;"> <img src="http://img.baidu.com/img/logo-zhidao.gif" /> </div> <script type="text/javascript"> var isIE=/msie/i.test(navigator.userAgent) && !window....

如何让一个文字或则div层旋转20度然后显示在网页上?答：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"></...

JavaScript如何实现层(或层里面内容)的旋转?答：> <tr> <td class="test_c" id="one"> <img src="1.jpg" id="demo_r"> </td> </tr> <tr> <td> <input type="button" value="demo" onclick="demo_rotate();"> </td> </tr> </table> </div> </body> </html> 你要找不到两个js文件,请联系我.给我留言....

大家正在搜

js实现多个div轮播 div css js实现弹出框 js使一个div隐藏 Js实现div移动 js隐藏某一类div js怎样显示隐藏多个div jquery刷新某个div js移动div js 隐藏div