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

JS动画——制作鼠标移入移出的时候控件属性的变化

2016-01-30 14:15 603 查看

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>anim4.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<style type="text/css">
ul,li{
list-style: none;
}

ul li {
width: 200px;
height: 100px;
background: green;
margin-bottom: 20px;
filter:alpha(opacity:30);
opacity:0.3;
border: 4px solid #000;
text-align: center;
font-size: 15px;
}
</style>

<script type="text/javascript">
window.onload = function() {
var aLi = document.getElementsByTagName("li");
for(var i = 0; i <aLi.length; i++) {
aLi[i].timer = null;
aLi[i].timer2 = null;
aLi[i].temer3 = null;
aLi[i].alpha = 30;
aLi[i].onmouseover = function() {
var _objthis = this;
startMove(_objthis, 'width', 400, 100, 30, function() {
startMove(_objthis, 'height', 200, 30, 15, function(){});
});
}
aLi[i].onmouseout = function() {
var _objthis = this;
startMove(_objthis, 'width', 200, 100, 30, function() {
startMove(_objthis, 'height', 100, 30, 15, function(){});
});
}
}

function startMove(obj, mode, iTarget, iAlpha, size, fn) {
//改变宽度，渐变动画
clearInterval(obj.timer);
obj.timer = setInterval(function() {

var widthStyle = null;
if(mode == 'width') {
widthStyle = parseInt(getStyle(obj, 'width'));
} else if(mode == 'height') {
widthStyle = parseInt(getStyle(obj, 'height'));
}
var speed = (iTarget - widthStyle) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(widthStyle == iTarget) {
clearInterval(obj.timer);

if(fn) {
fn();
}
} else {
if(mode == 'width') {
obj.style.width = widthStyle + speed;
}
if(mode == 'height') {
obj.style.height = widthStyle + speed;
}
}
}, 30);

//改变透明度
clearInterval(obj.timer2);
obj.timer2 = setInterval(function() {
var alphaSpeed = 0;
if(obj.alpha > iAlpha) {
alphaSpeed = -10;
} else {
alphaSpeed = 10;
}
if(obj.alpha == iAlpha) {
clearInterval(obj.timer2);
} else {
obj.alpha += alphaSpeed;
//IE浏览器
obj.style.filter = "alpha(opacity:"+obj.alpha+")";
//IE以外的浏览器
obj.style.opacity = obj.alpha/100;
}
}, 30);

//改变字体大小
clearInterval(obj.timer3);
obj.timer3 = setInterval(function() {
var sizeSpeed = 0;
var newSize = parseInt(getStyle(obj, 'fontSize'));
if(newSize > size) {
sizeSpeed = -1;
} else {
sizeSpeed = 1;
}
if(newSize == size) {
clearInterval(obj.timer3);
} else {
obj.style.fontSize = parseInt(newSize + sizeSpeed + 'px');
}
}, 30);
}

//获取样式中的属性值
function getStyle(obj, attr) {
if(obj.currentStyle) {
//IE浏览器
return obj.currentStyle[attr];
} else {
//IE以外的其他浏览器
return getComputedStyle(obj, false)[attr];
}
}
}
</script>

</head>

<body>
<ul>
<li>Raid</li>
<li>Raid</li>
<li>Raid</li>
</ul>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航