加了getstyle()沒有效果了
<!DOCTYPE html>
<html>
<head>
?<meta charset="UTF-8">
?<title>Document</title>
?<style type="text/css">
? ul li{
? ? list-style: none;
? }
???? ul li{
???? ?width: 200px;
???? ?height: 100px;
???? ?background: yellow;
???? ?margin-bottom:20px;
??????? border: 4px solid #00ffff;
???? }
?</style>
?<script type="text/javascript">
??window.onload=function(){
???var aLi=document.getElementsByTagName('li');
???for (var i = 0;i<aLi.length; i++)
???{
????aLi[i].timer=null;
????aLi[i].onmouseover=function(){
?????startMove(this,400);
????}
????aLi[i].onmouseout=function(){
?????startMove(this,200);
????}
????
???}
??}
??// var timer=null;
??var icur=parseInt(getStyle(obj,'width'));
??function startMove(obj,target){
???clearInterval(obj.timer);
???obj.timer=setInterval(function(){
????var speed=(target-icur)/20;
????speed=speed>0?Math.ceil(speed):Math.floor(speed);
????if (icur==target) {
?????clearInterval(obj.timer);
????}
????else{
????obj.style.width=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></li>
??? ?<li></li>
??? ?<li></li>
??? ?<li></li>
??? </ul>
?
</body>
</html>
2017-01-02
var icur=parseInt(getStyle(obj,'width'));位置不對