JBTALKS.CC

标题: 让网页图片像风火轮般转动 [打印本页]
作者: FallenAngelz    时间: 2010-3-29 10:27 PM
标题: 让网页图片像风火轮般转动


怎样才能让网页图片元素像上图般不停地转动？
这是利用JavaScript的功能来实现的。
首先，到图片搜索去找任何图片。
然后将以下代码贴在浏览器的地址栏中：
  1. javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);
复制代码
作者: kenchy    时间: 2010-3-30 04:10 PM
可惜不能用在部落格~><
作者: KenjixSin    时间: 2010-4-12 01:36 AM
提示: 作者被禁止或删除 内容自动屏蔽
作者: FallenAngelz    时间: 2010-4-12 10:59 AM
厉害~~那个script是你自己写的吗@@？？？
KenjixSin 发表于 2010-4-12 01:36 AM


不是我写的，转贴
不过大多高手都会吧。
作者: Dhilip89    时间: 2010-4-12 02:43 PM
本帖最后由 Dhilip89 于 2010-4-12 02:48 PM 编辑

我已经对那个JS做了一些改变，可以放在任何网页里面用了:
  1. <script type="text/javascript">
  2. var R = 0,
  3.     x1 = 0.1,
  4.     y1 = 0.05,
  5.     x2 = 0.25,
  6.     y2 = 0.24,
  7.     x3 = 1.6,
  8.     y3 = 0.24,
  9.     x4 = 300,
  10.     y4 = 200,
  11.     x5 = 300,
  12.     y5 = 200;

  14. var objImg, objImgLen;

  16. function initRotate() {

  18.     objImg = document.getElementsByTagName("img");
  19.     objImgLen = objImg.length;
  20.     setInterval('rotateImgs()',5);
  21. }

  23. function rotateImgs() {

  25.     for(i = 0; i - objImgLen; i++) {

  27.         objImgs = objImg[i].style;
  28.         objImgs.position = 'absolute';
  29.         objImgs.left = (Math.sin(R * x1 + i * x2 + x3) * x4 + x5) + 'px';
  30.         objImgs.top = (Math.cos(R * y1 + i * y2 + y3) * y4 + y5) + 'px';
  31.     }
  32.     R++;
  33. }

  35. </script>
复制代码
要调用时用这个:
  1. <body onload="initRotate();">
复制代码
作者: KenjixSin    时间: 2010-4-12 04:24 PM
提示: 作者被禁止或删除 内容自动屏蔽
作者: Dhilip89    时间: 2010-4-12 05:52 PM
强~~你是拿art of science Internet technology的吗？
KenjixSin 发表于 2010-4-12 04:24 PM



不是，我目前在TARC读Certificate in Computer Science (Level 4)
作者: KenjixSin    时间: 2010-4-12 07:48 PM
提示: 作者被禁止或删除 内容自动屏蔽
作者: Dhilip89    时间: 2010-4-12 07:53 PM
回复 8# KenjixSin

呵呵~你打算去哪一间分院读？
作者: KenjixSin    时间: 2010-4-13 01:55 AM
提示: 作者被禁止或删除 内容自动屏蔽
作者: Dhilip89    时间: 2010-4-13 02:08 AM
回复 10# KenjixSin

我的是在Johor Branch
作者: KenjixSin    时间: 2010-4-13 12:53 PM
提示: 作者被禁止或删除 内容自动屏蔽



欢迎光临 JBTALKS.CC (https://jbtalks.my/) Powered by Discuz! X2.5