转动的div层

最新推荐文章于 2021-06-03 06:05:31 发布

hxy07075032

最新推荐文章于 2021-06-03 06:05:31 发布

阅读量298

点赞数

分类专栏： javascript 文章标签： div转动层

本文链接：https://blog.csdn.net/hxy07075032/article/details/43967127

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>

<h1>转动div层</h1>
<style>
#d_bx{position:absolute;width:150px;height:50px;border:1px solid #0000ff;}
</style>
<div>
    <input type="button" value="逆时针" onclick="R_dd=-10;R_ote();" />
    <input type="button" value="顺时针" onclick="R_dd=10;R_ote();" />
    <input type="button" value="连续转" onclick="S_szc();" />
    <input type="button" value="停止" onclick="SN_t();" />
</div>
<div id="d_bx" style="left:50px;top:100px;">
    <img src="http://img.baidu.com/img/logo-zhidao.gif" />
</div>
<script type="text/javascript">
//检测浏览器
var isIE=/msie/i.test(navigator.userAgent) && !window.opera;
//alert(isIE);
//定义对象
var O_bx=G('d_bx');
//获得对象的宽度和高度
var WH_w=O_bx.clientWidth, WH_h=O_bx.clientHeight;

//获得样式的高度和宽度
var LT_l=parseInt(O_bx.style.left), LT_t=parseInt(O_bx.style.top);

var bx_R=G_R(O_bx);

var R_jd=0; //开始的角度

var R_tim=0;  //清零?

function S_szc(){R_tim=setInterval(R_ote, 50);}
function SN_t(){clearInterval(R_tim); R_ote(0);}

function G(t){return document.getElementById(t);} //获得对象

function R_ote(t_j){
var R_dd=60; // 步长
    if(t_j || t_j==0){R_jd=t_j-R_dd;}

    R_jd+=R_dd; if(R_jd>180){R_jd-=180; R_jd=0}
    //alert(R_jd);
    if(isIE){R_otie(R_jd);}else{O_bx.style[bx_R]='rotate('+R_jd+'deg)';}
}

function R_otie(d_j){
    var d_h=d_j * Math.PI / 180;
    var m_c=Math.cos(d_h), m_s=Math.sin(d_h);
    var t_w=(Math.abs(WH_w*m_c)+Math.abs(WH_h*m_s));
    var t_h=(Math.abs(WH_h*m_c)+Math.abs(WH_w*m_s));
    O_bx.style.cssText='left:'+(LT_l+(WH_w-t_w)/2)+'px;top:'+(LT_t+(WH_h-t_h)/2)+'px;filter:progid:DXImageTransform.Microsoft.Matrix(M11='+m_c+',M12='+(-m_s)+',M21='+m_s+',M22='+m_c+',SizingMethod="auto expand")';
}
    //判断使用者浏览器是否支持属性
function G_R(t_o){
    var t_O=t_o.style;//对象的样式
    if(t_O.webkitTransform !== undefined){//Chrome Safari
        return 'webkitTransform';
    }else if(t_O.MozTransform !== undefined){//Mozilla
        return 'MozTransform';
    }else if(t_O.OTransform !== undefined){//Opera
        return 'OTransform';
    }else{
        return 'transform';
    }
}
</script>



</body>
</html>

hxy07075032

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
转动的div层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><body><h1>转动div层</h1><style>#d_bx
复制链接

扫一扫

专栏目录