非常棒齿轮滚动效果-JS特效-爱易网页

非常棒齿轮滚动效果

日期：2014-05-18　浏览次数：20149 次

欢迎光临爱易网网页脚本特效中心，点击运行按钮演示特效：

以下是程序代码

<HTML xmlns:v = "urn:schemas-microsoft-com:vml"><HEAD>
<META NAME="Description" CONTENT="VML Animation - Gears within Gears"> 
<META NAME="Keywords" CONTENT="cogs, gears, dhtml, vml, javascript, jscript, animation">
<TITLE>VML Animation - Gears within Gears－爱易网WEB开发www.aiyiweb.com</TITLE>
<OBJECT classid=CLSID:10072CEC-8CC1-11D1-986E-00A0C955B42E 
id=VMLRender></OBJECT>
<STYLE>v\:* {
BEHAVIOR: url(#VMLRender)
}
</STYLE>

</HEAD>
<BODY bgColor=#ffffff onresize=resize() scroll=no>
<div id=op></div>

//globals for HSV to RGB conversion
irpnt=new Array(2,1,0,0,3,2);
igpnt=new Array(3,2,2,1,0,0);
ibpnt=new Array(0,0,3,2,2,1);

//constants for gears
GB=100;
GD=30;
GA=20;

w=0;
h=0;
kx=0;
ky=0;
scol=new colour(57,.71,.89);
ss=new Array(500,500,500,500,500,500,500,500,500,500,500,500,500,500,500);
vs="<DIV id=kal style='position:absolute;left:"+kx+";top:"+ky+";'>";
for(j=0;j<ss.length;j++){
np=30-2*j;
sp=makegearpath(np);
hue=j*4;
dhue=8;
dr=(j+1)/2;
//if(j%2==0)dr=-dr;
vx=rnd(10)-4;if(vx==0)vx=-5;
vy=rnd(10)-4;if(vy==0)vy=-5;
vs+="<v:shape id='V"+j+"' np="+np+" hue="+hue+" dhue="+dhue+" dr="+dr+" vx="+vx+" vy="+vy+" style='position:absolute;left:"+((500-ss[j])/2)+"px;top:"+((500-ss[j])/2)+"px;height:"+ss[j]+";width:"+ss[j]+";rotation:0;' fill='true' stroke='true' coordsize='2500,2500' coordorigin '-1250,-1250' fillcolor='#fdf9ae' strokecolor='#000000' path='"+sp+"'></v:shape>"
}
vs+="</div>"
document.write(vs);
resize();

window.setInterval("frame();",20);

function frame(){
for(j=0;j<ss.length;j++){
S=document.all["V"+j];
//animate colour
hue=parseInt(S.hue);
dhue=parseInt(S.dhue);
hue+=dhue;
if(hue>=360)hue-=360;
S.hue=hue;
scol.h=hue;
scol.hsv2rgb();
S.fillcolor=scol.rgb;
//S.strokecolor=scol.rgb;
//animate rotation
r=parseFloat(S.style.rotation);
dr=parseFloat(S.dr);
r+=dr;if(r>=360)r-=360;if(r<0)r+=360;
S.style.rotation=r;
}
}

//n=number of points
//r1=outer diameter
//r2=inner diameter
//assumes coordsize='2000,2000' coordorigin '0,0'
function makegearpath(n){
var r1,r2,l1,l2
var theta,phi,alpha,beta

s="";
theta=2*Math.PI/n;
theta2=theta/2
r2=(GB*n)/(2*Math.PI);
r1=r2+GD;
l1=Math.sqrt((r1*r1+GA*GA));
l2=Math.sqrt((r2*r2+GA*GA));
alpha=Math.atan(GA/r1);
beta=Math.atan(GA/r2);
phi=Math.PI/2-theta2-beta;
s="m "+(1250+Math.round(l2*Math.cos(phi)))+","+(1250+Math.round(l2*Math.sin(phi)))+"l";
for (i=0;i<n;i++){
phi=i*theta+Math.PI/2;
if(i>0)s+=",";
s+=(1250+Math.round(l2*Math.cos(phi-theta2+beta)))+","+(1250+Math.round(l2*Math.sin(phi-theta2+beta)))+",";
s+=(1250+Math.round(l1*Math.cos(phi-alpha)))+ ","+(1250+Math.round(l1*Math.sin(phi-alpha)))+",";
s+=(1250+Math.round(l1*Math.cos(phi+alpha)))+ ","+(1250+Math.round(l1*Math.sin(phi+alpha)))+",";
s+=(1250+Math.round(l2*Math.cos(phi+theta2-beta)))+","+(1250+Math.round(l2*Math.sin(phi+theta2-beta)));
}
s+="x e"
return(s);
}

function rnd(n){
return(Math.floor((n+1)*Math.random()));
}

function resize(){
w=document.body.clientWidth;
h=document.body.clientHeight;
// bg.style.width=w;
// bg.style.height=h;
kx=w/2-250;
ky=h/2-250;
kal.style.left=kx;
kal.style.top=ky;
}

//utility object for HSV to RGB conversion
function hsv2rgb(){
pqvt=new Array(4);
with(this){
if(s==0){
r=Math.floor(255*v);
g=r;
b=r;
return;
}
if(h>=360)h=0;
nh=h/60;
i=Math.floor(nh);
f=nh-i;
pqvt[2]=255*v;
pqvt[0]=pqvt[2]*(1-s)
pqvt[1]=pqvt[2]*(1-s*f)
pqvt[3]=pqvt[2]*(1-s*(1-f))
r=Math.floor(pqvt[irpnt[i]]);
g=Math.floor(pqvt[igpnt[i]]);
b=Math.floor(pqvt[ibpnt[i]]);
rgb="#"+(65536*r+256*g+b).toString(16);
}
}

function colour(h,s,v){
this.h=h; //0-359
this.s=s; //0-1
this.v=v; //0-1
this.r=0; //0-255
t</div></div>

<div class="clearfix"></div>
                    </div>
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class="previous"><a href="4667">上一篇：狡猾的按钮特效</a></li>

<li class="next"><a href="1384">下一篇：支持多级的选项卡</a></li>
                        </ul>
                    </nav>

<div class="alert alert-warning" role="alert">
                        <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
                    </div>

<div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/16162' title='优酷土豆携手新浪微博 谋攻移动视频失地' target="_blank">
                        优酷土豆携手新浪微博 谋攻移动视频失地</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34128' title='传苹果已告知鸿海：两款新iPhone下月发货' target="_blank">
                        传苹果已告知鸿海：两款新iPhone下月发货</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34450' title='看病也能用支付宝了 马云的又一盘大棋' target="_blank">
                        看病也能用支付宝了 马云的又一盘大棋</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34139' title='iOS7拖累iPad 5、iPad mini2发布 传十月份推出' target="_blank">
                        iOS7拖累iPad 5、iPad mini2发布 传十月份推出</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34252' title='微软的云服务显示出他们将自我进化' target="_blank">
                        微软的云服务显示出他们将自我进化</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/34162' title='Skype周年：与微软联姻到底有没有未来？' target="_blank">
                        Skype周年：与微软联姻到底有没有未来？</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/16167' title='Kindle入华遭遇国内厂商“围剿 ” 电信也参战' target="_blank">
                        Kindle入华遭遇国内厂商“围剿 ” 电信也参战</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/6910' title='国美苏宁线上首度正面PK 京东列席4月电商战' target="_blank">
                        国美苏宁线上首度正面PK 京东列席4月电商战</a></li></div>
                   
                
                  <div class="col-md-6 col-xs-12">
                      <li class="articleAbout"><a href='/ItNews/10812' title='雅安地震 绝不宽恕应用人们爱心的骗子！' target="_blank">
                        雅安地震 绝不宽恕应用人们爱心的骗子！</a></li></div>
                   
                
        </ol>
    </div>
</div>

</div>

</div>
            </div>
            <div class="clearfix"></div>

<footer class=" footer navbar-bottom">
<em>友情链接：</em>
    
      <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a>            
    
      <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a>            
    
<br />
<script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script>

Copyright © 2013-2026 爱易网页 当前在线：124人　
        网站在12时23分21秒内访问总人数：82330人
    当前 16.95%
　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a>
<script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
<script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script>

</footer>

</div>
   
</body>
</html>