您的位置：首页 > Web前端 > CSS

js多物体不同运动框架(标签样式)

2018-03-19 15:34 429 查看

                <style>
#div1{width:50px; height: 50px;float:left;margin: 10px;
background: red;border: 5px solid black;font-size: 14px;
filter: alpha(opacity:30);opacity: 0.3;}
</style>
<!--网站中的运动框架:将不同运动封装成一个方法,
(能实现的运动有变宽、变高、变字体大小、变透明度、变边框等等,
大多是给标签添加的样式，)-->
<script>
window.onload = function(){
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function(){
startMove(this,'opacity',100);
}
oDiv.onmouseout = function(){
startMove(this,'opacity',30);
}
}

// 获取当前样式
function getStyle(obj,name){
//解决获取当前样式在不同浏览器上的兼容问题
if(obj.currentStyle){
//IE7以下低版本浏览器
return obj.currentStyle[name];
}else{
//火狐谷歌等高版本浏览器
return getComputedStyle(obj,false)[name];
}
}

var timer =null;//创建定时器
function startMove(obj,attr,iTarget){
clearInterval(obj.timer);//清除旧定时器
obj.timer = setInterval(function (){
var cur = 0;
//单独处理透明度样式->习惯处理100这样的透明度
//这个是原来的,只有宽和高啥的,没有透明度
if(attr == 'opacity'){
cur = parseFloat(getStyle(obj,attr))*100;

}else{
//除透明度以外，其他样式
cur = parseInt(getStyle(obj,attr));
}
//获取当期速度，并将其取整，避免不能精准到达指定位置
var speed = (iTarget - cur)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(cur == iTarget){
clearInterval(obj.timer);//到达位置停止定时器
}else{
if(attr == "opacity"){//改变透明度的样式
obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
obj.style.opacity = (cur+speed)/100;
}else{//改变除透明度以外的其他样式
obj.style[attr] = cur+speed+'px';

}
}
},30);
}
//以上代码基本上适合所有运动，只要调用startMove方法，并给他传上参数，就能实现你想要的简单运
</script>
</head>
<body>
<div id="div1"></div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航