<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>JS 旋转函数，兼容各个浏览器</title>
<script id="jscode">
function hy_rotate(obj, rotate){
if(obj){
function rotate_set_style(obj, key, value){
obj.style[key] = value
}
function rotate_float(n, b){
b = isNaN(parseInt(b)) ? -1 : parseInt(b)
return isNaN(parseFloat(n)) ? 0 : (b == 0) ? parseInt(parseFloat(n)) : (b >0) ? parseFloat(parseFloat(n).toString().replace((new RegExp('^(\\d+)\\.(\\d{'+b+'})\\d*$')), '$1.$2')) : parseFloat(n)
}
rotate = rotate % 360
if(rotate <0){
rotate = 360 + rotate
}
rotate = rotate_float(rotate, 2)
var rpi = rotate * Math.PI / 180, c = Math.cos(rpi), s = Math.sin(rpi), oh = obj.offsetHeight, ow = obj.offsetWidth, pw = rotate_float((oh * Math.abs(s) + ow * Math.abs(c)), 2), ph = rotate_float((oh * Math.abs(c) + ow * Math.abs(s)), 2), tw = (rotate % 180 == 0) ? 0 : ((pw - ow) / 2), th = (rotate % 180 == 0) ? 0 : ((ph - oh) / 2), css3 = 'translate(' + tw + 'px, ' + th + 'px) rotate(' + rotate + 'deg)', css3key = '', dbstyle = document.body.style, css3keys = ['transform', '-moz-transform', '-webkit-transform', '-o-transform', '-ms-transform']
for(var i in css3keys){
if(css3keys[i] in dbstyle){
css3key = css3keys[i]
}
}
if(css3key == ''){
rotate_set_style(obj, 'filter', 'progid:DXImageTransform.Microsoft.Matrix(M11=' + c + ', M12=' + (-s) + ', M21=' + s + ', M22=' + c + ', sizingMethod=\'auto expand\')')
}else{
obj.parentNode.style.width = pw + 'px'
obj.parentNode.style.height = ph + 'px'
rotate_set_style(obj, css3key, css3)
}
}
}
</script>
<style>
.list{clear:bothpadding:20px}
.block{background:#FF99FFpadding:5pxfloat:left}
.rotate{background:#FF0000width:200pxpadding:5px}
.txt{background:#3366FFpadding:10pxcolor:#FFFFFFfont-size:12pxmargin-bottom:10px}
.code{border:#3333FF dotted 1pxpadding:10pxbackground:#FFCCFFclear:both}
</style>
</head>
<body>
<div>JS 旋转函数，兼容各个浏览器</div>
<div class="list">
<div class="block">
<div>
<div class="rotate" id="rotate">
<div class="txt">
我的角度是 <span id="rotate_num"></span>°
</div>
<img src="http://www.fjsen.com/images/attachement/jpg/site2/20130513/001b77b4c2f212fa86172f.jpg" />
</div>
</div>
</div>
</div>
<script>
function $id(id){
return document.getElementById(id)
}
var rrr = 0
var sss = 0
var iii = 0
var aaa = $id('rotate')
var bbb = $id('rotate_num')
function zzz(){
rrr = rrr+1
bbb.innerHTML = rrr
hy_rotate(aaa, rrr)
}
aaa.onclick = function(){
if(sss == 0){
iii = setInterval(zzz, 20)
sss = 1
}else{
clearInterval(iii)
sss = 0
}
}
</script>
</body>
</html>
jquery可以通过修改标签属性来改变它的样式js设置和获取标签的属性 :
代码如下:
<script type="text/javascript">
window.onload = function () {
var attr = document.getElementById("attr")
attr.setAttribute("style", "font-weight:bold")
alert(attr.getAttribute("style"))
}
</script>
jq设置和获取标签的属性 :
<script src="IP/Scripts/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#attr").attr("style", "color:#ff0000")//单个属性的设置
$("#Avatar").attr({ "class": "banner", "alt": "头像", "src": "IP/avatar/a118538.jpg?id=11133319" })//多个属性的设置
alert($("#Avatar").attr("src"))//得到指定标签的属性
})
</script>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）