1,鼠标移动改变多个Div宽度
文本:
oDiv[i].Timer 每个Div都加一个定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多个Div,鼠标移动改变宽度</title>
<style>
div {width: 80px; height: 50px; background: pink; margin: 10px;}
</style>
<script>
window.onload=function (ev) {
var oDiv=document.getElementsByTagName('div');
for(var i=0; i<oDiv.length; i++){
oDiv[i].Timer = null; // !!! oDiv[i].Timer 每个都加一个定时器
oDiv[i].onmouseover=function () {
StartMove(this, 400);
};
oDiv[i].onmouseout=function () {
StartMove(this, 80);
}
}
};
// var Timer = null;
function StartMove(obj, iTarget) {
clearInterval(obj.Timer);
obj.Timer = setInterval(function () {
var speed=(iTarget-obj.offsetWidth)/6;
speed=speed>0 ? Math.ceil(speed):Math.floor(speed);
if( obj.style.width >= iTarget){
clearInterval(obj.Timer);
}else{
obj.style.width= obj.offsetWidth + speed + 'px';}
}, 30);
}
</script>
</head>
<body>
<div>Cookie_fzx</div>
<div>Cookie_fzx</div>
<div>Cookie_fzx</div>
<div>Cookie_fzx</div>
</body>
</html>
2,多个Div淡入淡出
文本:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多个Div淡入淡出</title>
<style>
div{width:100px; height: 100px; background: red; float: left; margin: 20px;
filter: alpha(opacity:30); opacity: 0.3;}
</style>
<script>
window.onload=function () {
var aDiv=document.getElementsByTagName('div');
for(var i=0; i< aDiv.length; i++){
aDiv[i].alpha=30; // aDiv[i].alpha 每个都设置一个变量
aDiv[i].Timer=null;
aDiv[i].onmouseover=function () {
StartMove(this, 100);
};
aDiv[i].onmouseout=function () {
StartMove(this, 30);
};
}
};
// var alpha=30;
function StartMove(obj, iTarget) {
clearInterval(obj.Timer);
obj.Timer=setInterval(function () {
var speed=(iTarget-obj.alpha)/6;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if(obj.alpha ==iTarget){
clearInterval(obj.Timer);
}else {
obj.alpha+=speed;
obj.style.filter="alpha(opcity:" + obj.alpha + ")";
obj.style.opacity=obj.alpha/100;
}
}, 30);
}
</script>
</head>
<body>
<div>Cookie_fzx</div>
<div>Cookie_fzx</div>
<div>Cookie_fzx</div>
<div>Cookie_fzx</div>
</body>
</html>
3,变宽 / 变高 / 变字体大小 /变边框大小
文本:
obj.offsetWidth 获取的是盒子模型的宽度,包括 width,borderWidth,padding相加之和。
因此 使用 getComputedStyle(obj, false)[name] 获取样式属性的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变宽/变高/变字体大小/变边框大小</title>
<style>
div{width:100px; height: 100px; background: pink; float: left; margin: 20px;
border: 5px solid green; font-size: 14px;}
</style>
<script>
window.onload=function () {
// 变高
var oDiv1=document.getElementById('div1');
oDiv1.Timer=null;
oDiv1.onmouseover=function () {
StartMove(this,'height', 250);
};
oDiv1.onmouseout=function () {
StartMove(this,'height', 100);
};
// 变宽
var oDiv2=document.getElementById('div2');
oDiv2.Timer=null;
oDiv2.onmouseover=function () {
StartMove(this,'width', 250);
};
oDiv2.onmouseout=function () {
StartMove(this,'width', 100);
};
// 变字体大小
var oDiv3=document.getElementById('div3');
oDiv3.Timer=null;
oDiv3.onmouseover=function () {
StartMove(this,'font-size', 30);
};
oDiv3.onmouseout=function () {
StartMove(this,'font-size', 14);
};
// 变边框大小
var oDiv4=document.getElementById('div4');
oDiv4.Timer=null;
oDiv4.onmouseover=function () {
StartMove(this,'borderWidth', 60);
};
oDiv4.onmouseout=function () {
StartMove(this,'borderWidth', 5);
};
};
function getStyle(obj, name) {
if(obj.currentStyle){
return currentStyle[name];
}else{
return getComputedStyle(obj, false)[name];
}
}
function StartMove(obj, attrStyle, iTarget) {
clearInterval(obj.Timer);
obj.Timer=setInterval(function () {
var curStyle=parseInt(getStyle(obj,attrStyle)); // getStyle(obj,width)不对; parseInt(getStyle(obj,'width'))对的
var speed=(iTarget-curStyle)/6;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
if(curStyle == iTarget){
clearInterval(obj.Timer);
}else {
obj.style[attrStyle]= curStyle+ speed + 'px'; // obj.style.attrStyle不对; obj.style[attrStyle]对的
}
}, 30);
}
</script>
</head>
<body>
<div id="div1" >Cookie_fzx变高</div>
<div id="div2">Cookie_fzx变宽-_-</div>
<div id="div3">Cookie_fzx变字体大小</div>
<div id="div4">Cookie_fzx变边框大小</div>
</body>
</html>
改变 StartMove() 函数
function StartMove(obj, attrStyle, iTarget) {
clearInterval(obj.Timer);
obj.Timer=setInterval(function () {
// 获取样式的值
var curStyle=0; // getStyle(obj,width)不对; parseInt(getStyle(obj,'width'))对的
if(attrStyle == 'opacity'){
curStyle=Math.round(parseFloat(getStyle(obj, attrStyle))*100); // 四舍五入变整数
}else{
curStyle=parseInt(getStyle(obj, attrStyle));
}
// 设置 速度
var speed=(iTarget-curStyle)/6;
speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);
// 设置间隔定时器
if(curStyle == iTarget){
clearInterval(obj.Timer);
}else {
if(attrStyle == 'opacity'){
obj.style.filter='filter: alpha(opacity: ' + (speed+curStyle) + ')';
obj.style.opacity= (speed+curStyle)/100;
}else{
obj.style[attrStyle]= curStyle+ speed + 'px'; // obj.style.attrStyle不对; obj.style[attrStyle]对的
}
}
}, 30);