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