一、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);
}
