<!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>
转动的div层
最新推荐文章于 2021-06-03 06:05:31 发布