一、Html布局
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
二、Css樣式
<style>
body,ul{
margin:0;
padding: 0;
}
ul,li{
list-style: none;
}
ul li{
width:200px;
height: 100px;
background: yellow;
margin-bottom: 20px;
filter:alpha(opacity:30); /*針對(duì) IE8 以及更早的版本*/
opacity:0.3;
border: 4px solid blue;
/*添加一個(gè)寬度為4px的邊框*/
}
</style>
三、Js部分
window.onload = function(){
var aLi = document.getElementsByTagName("li");
for (var i = 0; i < aLi.length; i++) {
aLi[i].timer = null;
//多物體運(yùn)動(dòng) 必須給每個(gè)li定義定時(shí)器
aLi[i].onmouseover = function(){
startMove(this,400);
}
aLi[i].onmouseout = function(){
startMove(this,200);
}
}
}
startMove = function(obj,iTarget){
clearInterval(obj.timer);
//開啟定時(shí)器前先關(guān)閉所有定時(shí)器
obj.timer = setInterval(function(){
var icur = parseInt(getStyle(obj,'width'));
//獲取目標(biāo)區(qū)域的當(dāng)前寬度 并賦值給icur
var speed = (iTarget -icur)/8;
speed = speed > 0?Math.ceil(speed):Math.floor(speed);
//緩沖運(yùn)動(dòng) speed>0向上取整 speed<0向下取整
if(icur == iTarget){
clearInterval(obj.timer);
}else{
obj.style.width = icur + speed + "px";
}
},30)
}
//offsetWidth包括了border margin等屬性的寬度 并不是li內(nèi)容的寬度
//應(yīng)該封裝getStyle函數(shù)獲取width等樣式
getStyle = function(obj,attr){
if(obj.currentStyle){
//currentStyle IE瀏覽器
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
//getComputedStyle 第二個(gè)參數(shù)為垃圾參數(shù) 寫什么都可以 習(xí)慣false FF Chrome瀏覽器
}
}
//將 startMove()函數(shù)進(jìn)一步封裝 添加參數(shù)attr
startMove = function(obj,attr, iTarget){
clearInterval(obj.timer);
//開啟定時(shí)器前先關(guān)閉所有定時(shí)器
obj.timer = setInterval(function(){
var icur = parseInt(getStyle(obj,attr));
var speed = (iTarget -icur)/8;
speed = speed > 0?Math.ceil(speed):Math.floor(speed);
//緩沖運(yùn)動(dòng) speed>0向上取整 speed<0向下取整
if(icur == iTarget){
clearInterval(obj.timer);
}else{
obj.style[attr] = icur + speed + "px";
//注意不能再用 .attr設(shè)置屬性 而是用中括號(hào) [attr]
}
},30)
}
window.onload = function(){
var aLi = document.getElementsByTagName("li");
aLi[0].onmouseover = function(){
startMove(this,'width',400);
}
aLi[0].onmouseout = function(){
startMove(this,'width',200);
}
aLi[1].onmouseover = function(){
startMove(this,'height',400);
}
aLi[1].onmouseout = function(){
startMove(this,'height',200);
}
aLi[2].onmouseover = function(){
startMove(this,'width',400);
}
aLi[2].onmouseout = function(){
startMove(this,'height',200);
}
}
//以上并不能實(shí)現(xiàn)對(duì)透明度的更改 1、opacity為小數(shù) 2、透明度沒(méi)有px單位
startMove = function(obj,attr, iTarget){
clearInterval(obj.timer);
//開啟定時(shí)器前先關(guān)閉所有定時(shí)器
obj.timer = setInterval(function(){
var icur = 0;
if(attr == 'opacity'){
icur = Math.round(parseFloat(getStyle(obj,attr))*100);
//如果是opacity則應(yīng)用parseFloat 之后×100是為了方便兼容alpha
//parseFloat取到的是多位小數(shù) 所以用Math.round四舍五入
}else{
icur = parseInt(getStyle(obj,attr));
}
var speed = (iTarget -icur)/8;
speed = speed > 0?Math.ceil(speed):Math.floor(speed);
//緩沖運(yùn)動(dòng) speed>0向上取整 speed<0向下取整
if(icur == iTarget){
clearInterval(obj.timer);
}else{
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity: '+(icur+speed)+')';
//針對(duì) IE8 以及更早的版本
obj.style.opacity = (icur+speed)/100;
//針對(duì)FF Chrome
}else{
obj.style[attr] = icur + speed + "px";
}
}
},30)
}
aLi[0].onmouseover = function(){
startMove(this,'opacity',100);
}
aLi[0].onmouseout = function(){
startMove(this,'opacity',30);
}
