亲爱的老师 我还是发现了个问题 当我想看完视频后自己写的时候遇到了写问题 当我想解决问题的时候我不得不回头来看视频 而且不停的快进之类的去看我想看的代码 然而您视频又是一步步讲的 我理清逻辑就又不得不重新看一遍您的视频 我任然想您是否可以给一份源代码 我始终认为视频只是作了解 我要看代码我才能吸收 所以跪求源代码
2015-11-12
<!doctype>
<html>
<head>
<meta charset = "utf-8">
<title>同时改变宽高</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,li{list-style: none;}
ul li{width: 200px;height: 50px;background: #333;margin-bottom: 20px;border: 2px solid #999;}
</style>
<script type="text/javascript">
window.onload = function(){
//var aLi = document.getElementsByTagName("li");
var li1 = document.getElementById("li1");
var li2 = document.getElementById("li2");
var timer = null;
// for(var i = 0;i<aLi.length;i++){
// aLi[i].onmouseover = function(){
// startMove(this,400);//鼠标移入是宽变成400px
// }
// aLi[i].onmouseout = function(){
// startMove(this,200);
// }
// }
li1.onmouseover = function(){
startMove(this,400,"width");
}
li1.onmouseout = function(){
startMove(this,100,"width");
}
li2.onmouseover = function(){
startMove(this,400,"height");
}
li2.onmouseout = function(){
startMove(this,100,"height");
}
//函数定义有多种方法1、var提前 2、直接输入function
function getStyle(obj,attr){//obj是对象，attr是属性
if(obj.currentStyle){
return obj.currentStyle[attr];//ie浏览器
}else{
return getComputedStyle(obj,false)[attr];//针对火狐浏览器
}
}
var startMove = function(obj,iTarget,attr){//obj表示多个当前的
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var curr = parseInt(getStyle(obj,attr));//定义当前变量
var speed = (iTarget - curr)/8;//不可以放到前面去定义，因为obj是没有被定义
speed = speed>0?Math.ceil(speed):Math.floor(speed);//如果大于零向上取整，如果小于零就向下取整；
if(curr == iTarget){
clearInterval(obj.timer);
}else{
obj.style[attr] = curr + speed + "px";//
}
},30)
}
}
</script>
</head>
<body>
<div>
<ul>
<li id="li1"></li>
<li id="li2"></li>
<li></li>
</ul>
</div>
</body>
</html>
应该是没错的，可以参考一下
举报
