不能實(shí)現(xiàn)高度變高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
? ? <title>寬和高度的變化</title>
? ? <style type="text/css">
? ? *{padding: 0;margin:0;}
?
? ? ul li{
? ? ? ? width:300px;
? ? ? ? height: 100px;
? ? ? ? background-color: red;
? ? ? ? margin-bottom:20px;?
? ? ? ? border:5px solid green;
? ? }
?
? ? </style>
?
?
? ? <script type="text/javascript">
? window.onload=function(){
? ? ? ?/* ? var opp=document.getElementsByTagName("li");
? ? ? ? for (var i=0;i<opp.length;i++){
? ? ? ? ? ? opp[i].timer=null;
? ? ? ? ? ? opp[i].onmouseover=function(){
? ? ? ? ? ? ? ? startMove(this,400);
? ? ? ? ? ? }
? ? ? ? ? ? opp[i].onmouseout=function(){
? ? ? ? ? ? ? ? startMove(this,200);
? ? ? ? ? ? }
? ? ? ? }*/
? ?var Li1 = document.getElementById('li1');
? ?var Li2 = document.getElementById('li2');
Li1.onmouseover = function(){
startMove(this,'height',400);
}
Li1.onmouseout = function(){
startMove(this,'height',100);
}
Li2.onmouseover = function(){
startMove1(this,'width',400);
}
Li2.onmouseout = function(){
startMove1(this,'width',200);
}
}
? ? ?
? ? ?function startMove1(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);
? ? ? ? ? ? ? ? ? ? if(icur==iTarget){
? ? ? ? ? ? ? ? ? ? ? ? clearInterval(obj.timer);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? else{
? ? ? ? ? ? ? ? ? ? ? ? obj.style[attr]=icur+speed+'px';
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? },30)
? ? ? ? ? ? }
? ? ?
? ? function getStyle(obj,attr){
? ? ? ? if (obj.currentStyle){
? ? ? ? ? ?return obj.currentStyle[attr];
? ? ? ? }else{
? ? ? ? ? ?return getComputedStyle(obj,false)[attr];
? ? ? ? }
? ? }
?
? ? </script>
</head>
<body>
<ul>
? ? <li id="li1"></li>
? ? <li id="li2"></li>
</ul>
</body>
</html>
這是我的代碼 ?但是運(yùn)行之后不能實(shí)現(xiàn)高度變高
2016-05-10
好噠 謝謝
2016-05-10
Li1.onmouseover = function(){
startMove(this,'height',400);
}
Li1.onmouseout = function(){
startMove(this,'height',100);
}
改為
Li1.onmouseover = function(){
startMove1(this,'height',400);
}
Li1.onmouseout = function(){
startMove1(this,'height',100);
}