用js写交换运动效果

如图所示

 

地址

http://nfc.qq.com/?&mz_ca=1000973&mz_sp=3xYDZ0&mz_cr=0&mz_sr=0&mz_sb=1

 

实现后的效果，点击互相交换位置和距离左边和上角的信息。

 

要点一：

var now = s_pic_li[0];
for(var i=0; i<s_pic_li.length; i++){
s_pic_li[i].onclick = function(){
if(this == now) return false;
var w = now.offsetWidth;
var h = now.offsetHeight;
var l = now.offsetLeft;
var t = now.offsetTop;
var w1= this.offsetWidth;
var h1 = this.offsetHeight;
var l1 = this.offsetLeft;
var t1 = this.offsetTop;
startrun(now,{width:w1,height:h1,left:l1,top:t1});
startrun(this,{width:w,height:h,left:l,top:t});
now=this;
}
}

循环给每一块加点击事件，获取交换双方的信息，然后执行运动函数，相关信息做为参数。

 

最后，上代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
<!--
body,ul,li{margin:0; padding:0; font:18px/1.5 arial; color:#333;}
#big_pic{width:500px; height:400px; background:#ccc; text-align:center; position:absolute;}
#s_pic li{float:left; width:100px; height:80px; display:inline; background:#06c; text-align:center; position:absolute; top:310px;}
-->
</style>
<script>
<!--
window.onload = function(){
    var s_pic = document.getElementById("s_pic");
    var s_pic_li = s_pic.getElementsByTagName("li");
    var now = s_pic_li[0];
    for(var i=0; i<s_pic_li.length; i++){
      s_pic_li[i].onclick = function(){
          if(this == now) return false;
            var w = now.offsetWidth;
            var h = now.offsetHeight;
            var l = now.offsetLeft;
            var t = now.offsetTop;
            var w1= this.offsetWidth;
            var h1 = this.offsetHeight;
            var l1 = this.offsetLeft;
            var t1 = this.offsetTop;
            startrun(now,{width:w1,height:h1,left:l1,top:t1});
            startrun(this,{width:w,height:h,left:l,top:t});
            now=this;
        }
    }
}

function getstyle(obj,name){
  if(obj.currentStyle){
      return obj.currentStyle[name];
    }else{
      return getComputedStyle(obj,false)[name];
    }
}

function startrun(obj,json,fn){
  clearInterval(obj.timer);
    obj.timer = setInterval(function(){
      var isall = true; 
      for(var attr in json){
          var cur=0;
            if(attr == "opacity"){
              cur = Math.round(parseFloat(getstyle(obj,attr))*100);
            }else{
              cur = parseInt(getstyle(obj,attr));
            }
            
            var speed = (json[attr] - cur)/8
            speed = speed>0?Math.ceil(speed):Math.floor(speed);
            if(cur != json[attr]){
              isall = false;
            }
            if(attr == "opacity"){
              obj.style.filter = "alpha(opacity="+(cur+speed)+")";
                obj.style.opacity = (cur+speed)/100;
            }else{
              obj.style[attr] = cur+speed+"px";
            }
        }
        
        if(isall){
          clearInterval(obj.timer);
            if(fn){
              fn();
            }
        }
    
    },30);
}
//-->
</script>
</head>
<body>
<ul id="s_pic">
  <li style="left:0; top:0; width:400px; height:300px">0</div>
  <li style="left:0;">1</li>
  <li style="left:110px;">2</li>
  <li style="left:220px;">3</li>
  <li style="left:330px;">4</li>
</ul>
</body>
</html>



posted @ 2012-03-09 13:57  jingangel  阅读(576)  评论(0)  编辑  收藏  举报