找回密码
 注-册

QQ登录

只需一步,快速开始

查看: 2291|回复: 2

[特效] 方块移动

[复制链接]
Leya 发表于 2008-4-8 17:44:25 | 显示全部楼层 |阅读模式
  1. <HEAD>
  2. <TITLE>方框移动</TITLE>
  3. <meta http-equiv="Content-Type" content="text/html; charset=GBK">
  4. <style language="javascript">
  5. <!--
  6. body, td{
  7.         font-size: 9pt;
  8. }
  9. .hidden{display:none;}
  10. .show{display:block;}
  11. -->
  12. </style>
  13. </HEAD>

  14. <BODY>
  15. <SCRIPT LANGUAGE="JavaScript">
  16. <!--
  17. var speed=10;//速度
  18. var ci = 10;//运动次数
  19. var left=0;//方框左位置
  20. var top=0;//方框上位置
  21. var width=0;//方框宽
  22. var height=0;//方框高
  23. var aimleft=0;//目标左位置
  24. var aimtop=0;//目标上位置
  25. var aimwidth=0;//目标宽
  26. var aimheight=0;//目标高
  27. var lb=0;//左步长
  28. var tb=0;//上步长
  29. var wb=0;//宽步长
  30. var hb=0;//高步长
  31. var fk = null;
  32. var aim = null;
  33. var aim1 = null;
  34. function initObj(oid){
  35.         if (!fk){fk = document.getElementById('fk');}
  36.         if (!aim){aim = document.getElementById('aim');}
  37.         if (!aim1)aim1 = document.getElementById('aim1');
  38. //        while (fk.hasChildNodes())fk.removeChild(fk.firstChild);
  39.         if (oid)
  40.                 append(fk,document.getElementById(oid),true);
  41. }
  42. function append(o,oc,cloned){
  43.         while (o.hasChildNodes())o.removeChild(o.firstChild);
  44.         if (cloned)oc = oc.cloneNode(true);
  45.         oc.className = 'show';
  46.         o.appendChild(oc);
  47. }
  48. /*
  49. * 取得对象位置、大小
  50. * 取得目标对象位置、大小
  51. */
  52. function setSource(obj,oid){
  53.         initObj(oid);
  54.         left      = getOffset(obj).Left;
  55.         top       = getOffset(obj).Top;
  56.         width     = obj.offsetWidth;
  57.         height    = obj.offsetHeight;
  58.         aimleft   = getOffset(aim).Left;
  59.         aimtop    = getOffset(aim).Top;
  60.         aimwidth  = aim.offsetWidth;
  61.         aimheight = aim.offsetHeight;
  62.         fk.style.display='';
  63.         clearInterval(MyMar);
  64. }

  65. /**
  66. * 设置方向步长、宽高步长
  67. */
  68. function setStep(){
  69.         lb = (aimleft-left)/ci;
  70.         tb = (aimtop-top)/ci;
  71.         wb = (aimwidth-width)/ci;
  72.         hb = (aimheight-height)/ci;
  73. }

  74. /**
  75. * 移动
  76. */
  77. function move(){
  78.         setStep();
  79.         left+=lb;
  80.         top+=tb;
  81.         width+=wb;
  82.         height+=hb;
  83.         if(left<aimleft-2 || top<aimtop-2 || width<aimwidth-2 || height<aimheight-2){
  84.                 fk.style.left = left+"px";
  85.                 fk.style.top = top+"px";
  86.                 fk.style.width = width+"px";
  87.                 fk.style.height = height+"px";
  88.         }else{
  89.                 if (fk)
  90.                         while(fk.hasChildNodes()){append(aim1,fk.firstChild);}
  91.                 hiddenFK();
  92.                 clearInterval(MyMar)
  93.         }
  94. }

  95. function hiddenFK(){
  96.         initObj();
  97.         fk.style.display='none';
  98. }

  99. /**
  100. * 取得某元素在页面中相对页面左上顶点的位置
  101. */
  102. function getOffset(obj){
  103.         var offsetleft = obj.offsetLeft;
  104.         var offsettop = obj.offsetTop;
  105.         while (obj.offsetParent != document.body)
  106.         {
  107.                 obj = obj.offsetParent;
  108.                 offsetleft += obj.offsetLeft;
  109.                 offsettop += obj.offsetTop;
  110.         }
  111.         return {Left : offsetleft, Top : offsettop};
  112. }
  113. var MyMar=setInterval(move,speed);

  114. //-->
  115. </SCRIPT>

  116. <div id="fk" style="position: absolute; width: 46px; height: 20px; border: 1px solid #000000 ; display: none"></div>
  117. <TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
  118. <TR bgcolor=#ffffff>
  119.         <TD onClick="setSource(this,'t1');MyMar=setInterval(move,speed)">笔记本</TD>
  120.         <TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}">小家电</TD>
  121.         <TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}">电冰箱</TD>
  122.         <TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}">波比娃娃</TD>
  123.         <TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}">小家电</TD>
  124.         <TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}">小家电</TD>
  125. </TR>
  126. </TABLE>









  127. <TABLE id="aim" style="border: 1px solid #666666 ; width: 227px; height: 300px;">
  128. <TR>
  129.         <TD id='aim1' valign="top"></TD>
  130. </TR>
  131. </TABLE>








  132. <TABLE style="border: 1px solid #666666" cellspacing=1 bgcolor=#ff1111 cellpadding=4 border=0>
  133. <TR bgcolor=#ffffff>
  134.         <TD onClick="setSource(this,'t1');MyMar=setInterval(move,speed)">笔记本</TD>
  135.         <TD onClick="setSource(this,'t2');{MyMar=setInterval(move,speed)}">小家电</TD>
  136.         <TD onClick="setSource(this,'t3');{MyMar=setInterval(move,speed)}">电冰箱</TD>
  137.         <TD onClick="setSource(this,'t4');{MyMar=setInterval(move,speed)}">波比娃娃</TD>
  138.         <TD onClick="setSource(this,'t5');{MyMar=setInterval(move,speed)}">小家电</TD>
  139.         <TD onClick="setSource(this,'t6');{MyMar=setInterval(move,speed)}">小家电</TD>
  140. </TR>
  141. </TABLE>
  142. <div id="t1" class="hidden">第1个div</div>
  143. <div id="t2" class="hidden">第2个div</div>
  144. <div id="t3" class="hidden">第3个div</div>
  145. <div id="t4" class="hidden">第4个div</div>
  146. <div id="t5" class="hidden">第5个div</div>
  147. <div id="t6" class="hidden">第6个div</div>
  148. </BODY>
复制代码
回复

使用道具 举报

瀚武仪 发表于 2009-3-28 15:39:20 | 显示全部楼层

我对论坛的建议,请过目

唉,我说版主大大,我第一次进咱们论坛的时候,我感觉到我终于找到我想要的论坛了,在这里我了解到很多我想要知道的东西,也交到很多朋友!但是咱们这多好的一个论坛啊,如果不让所有有需要的人知道咱们论坛,那就是对版主辛苦劳动的侮辱!我认为咱们这个论坛需要多进行网站推广宣传,以提高人气。

像咱们这种论坛估计只需要一款论坛群发类软件也就差不多了,不过现在群发软件市场很混乱,很多垃圾软件,骗人软件也挺多的,现在市场上唯一网站推广有效果的好像只有论坛群发-论坛推广小助手这一款了,别的基本上都没什么效果了,版主可以亲自尝试下,好像最近他们还在搞什么免费体验活动,要不版主去试试?或者是各位兄弟们没事帮咱们版主过去看看,看软件是否真的好用!他们的网址好像是www.tgxzs.com,有时间去看看吧!

不过我估计您也是挺不容易的,平时还得辛辛苦苦为大家找资料之类的,出太多的钱去宣传咱们网站也不太合适,我建议您可以考虑下现在一些比较流行的网络推广软件,比如说论坛群发推广软件啊,博客群发推广软件啊,邮件群发推广软件啊,这些群发软件都挺便宜的,几百块钱就能对整个互联网进行大范围的推广。
回复

使用道具 举报

xiao.a 发表于 2009-3-28 18:58:08 | 显示全部楼层
发广告的
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注-册

本版积分规则

Archiver|手机版|小黑屋|DoDVip ( 桂ICP备14000730号 )

GMT+8, 2025-5-1 17:37 , Processed in 0.063910 second(s), 22 queries .

Powered by Discuz! X3.5

Copyright © 2001-2024 Tencent Cloud.

快速回复 返回顶部 返回列表