JavaScript实现元素位置与尺寸交换动画的方法

JavaScript交换运动效果概述

本文详细介绍了一种使用JavaScript实现元素交换运动效果的技术方案，旨在为开发者提供参考与借鉴。

最终实现的交互效果为：当用户点击元素时，两个元素会互相交换其在页面中的位置以及距离左侧和顶部的坐标信息。

核心实现逻辑

实现该效果的关键点如下：

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>

希望上述内容能对读者在JavaScript程序设计方面的实践有所帮助。