微软网站上的购物车的效果

昨天晚上实在找不到 只好自己写了一个 有这么个意思 但是不太像啊 我记得微软那个是连这个物品区域的文字图片什么的都缩小飞到购物车里的 我这个只是一个框<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<style type="text/css">
body {
margin:0px;
}
</style>
</head><body>
<h1>
标题
</h1>
<table width="778" border="0" cellspacing="1" cellpadding="0">
  <tr>
    <td width="160" valign="top"><table width="100%"  border="0" cellspacing="1" cellpadding="0">
      <tr>
        <td align="center">导航兰</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table><table width="100%"  border="0" cellspacing="1" cellpadding="0">
      <tr>
        <td align="center">购物车 <div style="position:relative; width:5px; height:5px" id="cartArea">*</div> </td>
      </tr>
      <tr>
        <td><input type="button" name="cartSign" value="购物车标记位置信息" onclick="alert(cartArea.offsetLeft+'~'+cartArea.offsetTop+'~'+cartArea.offsetWidth+'~'+cartArea.offsetHeight)"></td>
      </tr>
    </table></td>
    <td valign="top"><div style="position:relative;" id="productArea"><table width="100%"  border="0" cellspacing="1" cellpadding="0" bgcolor="#FFCC00">
      <tr>
        <td bgcolor="#FFFFCC">fdsfds</td>
      </tr>
      <tr>
        <td bgcolor="#FFFFCC"><table width="100%"  border="0" cellspacing="1" cellpadding="0">
          <tr>
            <td width="33%">&nbsp;</td>
            <td><input type="text" name="number">
              <input type="button" name="productSign" value="商品标记位置信息" onclick="alert(productArea.offsetLeft+'~'+productArea.offsetTop+'~'+productArea.offsetWidth+'~'+productArea.offsetHeight+'~'+productArea.style.zIndex)">
<script>
function msCart(productID,cartID,productPrice,productNumber) {
oDivProduct = document.getElementById(productID);
if (document.getElementById("oDivProductDuplicate")) return false;
oDivProductDuplicate = document.createElement("DIV");
oDivProductDuplicate.id = "oDivProductDuplicate";
oDivProductDuplicate.style.zIndex = 1;
oDivProductDuplicate.style.position = "absolute";
oDivProductDuplicate.style.left = oDivProduct.offsetLeft-1;
oDivProductDuplicate.style.top = oDivProduct.offsetTop-1;
oDivProductDuplicate.style.width = oDivProduct.offsetWidth;
oDivProductDuplicate.style.height = oDivProduct.offsetHeight;
oDivProductDuplicate.style.border = "1px solid red";
// alert(oDivProductDuplicate.style.zIndex)
document.body.insertAdjacentElement("afterBegin",oDivProductDuplicate); oDivCart = document.getElementById("cartArea"); var stepLength = 16;
var stepTime = 10
var stepNum = 0;
var hengcha = oDivProductDuplicate.offsetLeft-oDivCart.offsetLeft;
var shucha = oDivProductDuplicate.offsetTop-oDivCart.offsetTop;
var oDivProductHeight = oDivProductDuplicate.offsetHeight;
var oDivProductWidth = oDivProductDuplicate.offsetWidth; var temp_stepMove = setInterval(stepMove,stepTime);
var temp_removeTimtout = setTimeout("oDivProductDuplicate.removeNode(true)",(stepLength+6)*stepTime); function stepMove() {
if (stepNum < stepLength) {
oDivProductDuplicate.style.left = oDivProductDuplicate.offsetLeft-hengcha/stepLength;
oDivProductDuplicate.style.top = oDivProductDuplicate.offsetTop-shucha/stepLength;
oDivProductHeight = (oDivProductHeight*0.8);
oDivProductWidth = (oDivProductWidth*0.8);
oDivProductDuplicate.style.height = oDivProductHeight;
oDivProductDuplicate.style.width = oDivProductWidth;
stepNum++;
} else {
clearInterval(temp_stepMove);
}
}
//}
</script>
  <input type="button" name="Submit" value="点这点这点这点这" onclick="msCart('productArea','cartArea',1,10)"></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td bgcolor="#FFFFCC">&nbsp;</td>
      </tr>
    </table></div></td>
  </tr>
</table>
</body>
</html>

解决方案 »

  1.   

    我修改了一下，有点意思：
    <div id="cartArea2">*</div>
    <br><br><br><br><!--input type="button" name="cartSign" value="购物车标记位置信息" onclick="alert(cartArea.offsetLeft+'~'+cartArea.offsetTop+'~'+cartArea.offsetWidth+'~'+cartArea.offsetHeight)"--><div style="position:relative;" id="productArea">
    <!--input type="text" name="number"-->
    <!--input type="button" name="productSign" value="商品标记位置信息" onclick="alert(productArea.offsetLeft+'~'+productArea.offsetTop+'~'+productArea.offsetWidth+'~'+productArea.offsetHeight+'~'+productArea.style.zIndex)"-->
    <!--input type="button" name="Submit" value="点这点这点这点这" onclick="msCart('productArea','cartArea',1,10)"-->
    <input type="button" name="Submit" value="点这点这点这点这" onclick="msCart('productArea','cartArea1',1,10)">
    <div>
    <script language="javascript">
    function msCart(productID,cartArea,productPrice,productNumber)
    {
    oDivProduct = document.getElementById(productID);
    if (document.getElementById("oDivProductDuplicate")) return false;
    oDivProductDuplicate = document.createElement("DIV");
    oDivProductDuplicate.id = "oDivProductDuplicate";
    oDivProductDuplicate.style.zIndex = 1;
    oDivProductDuplicate.style.position = "absolute";
    oDivProductDuplicate.style.left = oDivProduct.offsetLeft-1;
    oDivProductDuplicate.style.top = oDivProduct.offsetTop-1;
    oDivProductDuplicate.style.width = oDivProduct.offsetWidth;
    oDivProductDuplicate.style.height = oDivProduct.offsetHeight;
    oDivProductDuplicate.style.border = "1px dotted red";
    //alert(oDivProductDuplicate.style.zIndex)
    document.body.insertAdjacentElement("afterBegin",oDivProductDuplicate); oDivCart = document.getElementById(cartArea); var stepLength = 16;
    var stepTime = 10
    var stepNum = 0;
    var hengcha = oDivProductDuplicate.offsetLeft-oDivCart.offsetLeft;
    var shucha = oDivProductDuplicate.offsetTop-oDivCart.offsetTop;
    var oDivProductHeight = oDivProductDuplicate.offsetHeight;
    var oDivProductWidth = oDivProductDuplicate.offsetWidth; var temp_stepMove = setInterval(stepMove,stepTime);
    var temp_removeTimtout = setTimeout("oDivProductDuplicate.removeNode(true)",(stepLength+6)*stepTime); function stepMove()
    {
    if(stepNum < stepLength)
    {
    oDivProductDuplicate.style.left = oDivProductDuplicate.offsetLeft-hengcha/stepLength;
    oDivProductDuplicate.style.top = oDivProductDuplicate.offsetTop-shucha/stepLength;
    oDivProductHeight = (oDivProductHeight*0.8);
    oDivProductWidth = (oDivProductWidth*0.8);
    oDivProductDuplicate.style.height = oDivProductHeight;
    oDivProductDuplicate.style.width = oDivProductWidth;
    stepNum++;
    }
    else
    {
    clearInterval(temp_stepMove);
    }
    }
    }
    </script>
    <br><br><br><br>
    <div id="cartArea1">*</div><br><br><br><br>
    <div id="cartArea3">*</div>
      

  2.   

    我觉得飞动的那个是popup窗口