上一页  1   2    3     4     5     6   7    8       下一页

 

图像特效代码5

Fri

27

Feb

2009

150、图片重叠带阴影

150、图片重叠带阴影

脚本说明:

把如下代码加入<body>区域中

<script>

nereidFadeObjects = new Object();

nereidFadeTimers = new Object();

 

function nereidFade(object, destOp, rate, delta){

if (!document.all)

return

    if (object != "[object]"){  //do this so I can take a string too

        setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);

        return;

    }

       

    clearTimeout(nereidFadeTimers[object.sourceIndex]);

   

    diff = destOp-object.filters.alpha.opacity;

    direction = 1;

    if (object.filters.alpha.opacity > destOp){

        direction = -1;

    }

    delta=Math.min(direction*diff,delta);

    object.filters.alpha.opacity+=direction*delta;

 

    if (object.filters.alpha.opacity != destOp){

        nereidFadeObjects[object.sourceIndex]=object;

        nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);

    }

}

 

</script>

<TABLE background="background.jpg">

<TR><TD>

<DIV>

<img src="B2iconcrop.gif" style="filter:alpha(opacity=10)" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade(this,10,50,5)">

<img src="B2iconcrop.gif" style="filter:alpha(opacity=10)" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade(this,10,50,5)">

<img src="B2iconcrop.gif" style="filter:alpha(opacity=10)" onmouseover="nereidFade(this,100,30,5)" onmouseout="nereidFade(this,10,50,5)">

</DIV>

</TR></TD>

</TABLE>

0 Comments

Fri

27

Feb

2009

149、带彩色边框的图片

149、带彩色边框的图片

脚本说明:

把如下代码加入<body>区域中

<style>

.borderimage{

border:1px solid white;

}

</style>

<script language="JavaScript1.2">

 

function borderit(which,color){

//if IE 4+ or NS 6+

if (document.all||document.getElementById){

which.style.borderColor=color

}

}

</script>

<img src="yourimage.gif" class="borderimage" onMouseover="borderit(this,'blue')" onMouseout="borderit(this,'white')">

 

0 Comments

Fri

27

Feb

2009

148、小人右边飞舞

148、小人右边飞舞

脚本说明:

把如下代码加入<body>区域中

<script language="JavaScript1.2">

<!--

 

Cupid=new Image();

Cupid.src="cute.gif";  //specify path to Cupid image

amount=3;  //Number of cupids, minimum must be 3.

Xpos=700;  //cupids x coordinates, in pixel

Ypos=200;  //cupids y coordinates, in pixel

step=0.3; //Animation speed (smaller is slower)

dismissafter=10;  //seconds after which Cupids should disappear, in seconds

 

var ns6=document.getElementById&&!document.all

bats=new Array(3)

if (document.layers){

for (i=0; i < amount; i++)

{document.write("<LAYER NAME=n"+i+" LEFT=0 TOP=-50><a href='http://www.7stk.com'><IMG SRC='"+Cupid.src+"' NAME='nsi' width=69 height=60 border=0></a></LAYER>")}

}

else if (document.all||ns6){

document.write('<div id="out" style="position:absolute;top:0;left:0"><div id="in" style="position:relative">');

for (i=0; i < amount; i++){

if (document.all)

document.write('<a href="http://www.7stk.com"><img src="'+Cupid.src+'" id="msieBats" style="position:absolute;top:-50;left:0" border=0></a>')

else

document.write('<a href="http://www.7stk.com"><img src="'+Cupid.src+'" id="ns6Bats'+i+'" width=69 height=60 style="position:absolute;top:-50;left:0" border=0></a>')

}

document.write('</div></div>');

}

 

yBase=xBase=currStep=a_count=0;

b_count=1;

c_count=2;

d_count=3;

move=1;

if (document.layers||ns6){

yBase=window.innerHeight/3;

xBase=window.innerWidth/6;

if (document.layers)

window.captureEvents(Event.MOUSEMOVE);

 

}

if (document.all){

yBase = window.document.body.offsetHeight/3;

xBase = window.document.body.offsetWidth/6;

}

 

function dismisscupid(){

clearInterval(flycupid)

if (document.layers){

for (i2=0; i2 < amount; i2++){

document.layers['n'+i2].visibility="hide"

}

}

else if (document.all)

document.all.out.style.visibility="hidden"

else if (ns6)

document.getElementById("out").style.visibility="hidden"

}

 

if (document.layers){

for (i=0; i < amount; i++)

document.layers['n'+i].document.images['nsi'].src=Cupid.src

}

else if (document.all){

for (i=0; i < amount; i++)

document.all.msieBats[i].src=Cupid.src

}

else if (ns6){

for (i=0; i < amount; i++)

document.getElementById("ns6Bats"+i).src=Cupid.src

}

 

function Animate(){

a_count+=move;

b_count+=move;

c_count+=move;

currStep+=step;

if (a_count >= bats.length) a_count=0;

if (b_count >= bats.length) b_count=0;

if (c_count >= bats.length) c_count=0;

if (document.layers){

for (i=0; i < amount; i++) {

  var NewL="n"+i

  document.layers[NewL].top = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)

  document.layers[NewL].left =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)

  }

}

 

if (document.all){

for (i=0; i < amount; i++){

  document.all.msieBats[i].style.pixelTop = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)

  document.all.msieBats[i].style.pixelLeft =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)

 }

}

 

if (ns6){

for (i=0; i < amount; i++){

  document.getElementById("ns6Bats"+i).style.top = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)

  document.getElementById("ns6Bats"+i).style.left =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)

 }

}

 

}

flycupid=setInterval('Animate()',30);

setTimeout("dismisscupid()",dismissafter*1000)

//-->

</script>

0 Comments

Fri

27

Feb

2009

147、图片忽明忽亮

147、图片忽明忽亮

脚本说明:

把如下代码加入<body>区域中

<style>

<!--

 

#spotlight{

filter:light

}

 

-->

</style>

<img id="spotlight" speed="50" src="456.gif"><BR>

<a href="http://www.1stscript.com"><img id="spotlight" speed="100" src="exchangelogo.gif" border=0></a>

<script language="JavaScript1.2">

 

if (document.all&&window.spotlight){

var x=new Array()

var direction=new Array()

var y=new Array()

if (spotlight.length==null){

spotlight[0]=document.all.spotlight

x[0]=0

direction[0]="right"

y[0]=spotlight[0].height

spotlight[0].filters.light.addPoint(100,50,100,255,255,255,90)

}

else

for (i=0;i<spotlight.length;i++){

x[i]=0

direction[i]="right"

y[i]=spotlight[i].height

spotlight[i].filters.light.addPoint(100,50,100,255,255,255,90)

}

}

 

function slidelight(cur){

spotlight[cur].filters.light.MoveLight(0,x[cur],y[cur],200,-1)

 

if (x[cur]<spotlight[cur].width+200&&direction[cur]=="right")

x[cur]+=10

else if (x[cur]>spotlight[cur].width+200){

direction[cur]="left"

x[cur]-=10

}

else if (x[cur]>-200&&x[cur]<-185){

direction[cur]="right"

x[cur]+=10

}

else{

x[cur]-=10

direction[cur]="left"

}

}

 

if (document.all&&window.spotlight){

if (spotlight.length==null)

setInterval("slidelight(0)",spotlight[0].speed)

else

for (t=0;t<spotlight.length;t++){

var temp='setInterval("slidelight('+t+')",'+spotlight[t].speed+')'

eval(temp)

}

}

</script>

 

0 Comments

Fri

27

Feb

2009

146、点击后图片消失

146、点击后图片消失

脚本说明:

把如下代码加入<body>区域中

<script language="JavaScript1.2">

 

var Ymax=8;                                //MAX # OF PIXEL STEPS IN THE "X" DIRECTION

var Xmax=8;                                //MAX # OF PIXEL STEPS IN THE "Y" DIRECTION

var Tmax=10000;                        //MAX # OF MILLISECONDS BETWEEN PARAMETER CHANGES

 

 

var floatimages=new Array();

floatimages[0]='butterfly.gif';

floatimages[1]='butterfly.gif';

 

//*********DO NOT EDIT BELOW***********

var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;

var IE4 = (document.all)? true : false;

var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;

var wind_w, wind_h, t='', IDs=new Array();

for(i=0; i<floatimages.length; i++){

t+=(NS4)?'<layer name="pic'+i+'" visibility="hide" width="10" height="10"><a href="javascript:hidebutterfly()">' : '<div id="pic'+i+'" style="position:absolute; visibility:hidden;width:10px; height:10px"><a href="javascript:hidebutterfly()">';

t+='<img src="'+floatimages[i]+'" name="p'+i+'" border="0">';

t+=(NS4)? '</a></layer>':'</a></div>';

}

document.write(t);

 

function moveimage(num){

if(getidleft(num)+IDs[num].W+IDs[num].Xstep >= wind_w+getscrollx())IDs[num].Xdir=false;

if(getidleft(num)-IDs[num].Xstep<=getscrollx())IDs[num].Xdir=true;

if(getidtop(num)+IDs[num].H+IDs[num].Ystep >= wind_h+getscrolly())IDs[num].Ydir=false;

if(getidtop(num)-IDs[num].Ystep<=getscrolly())IDs[num].Ydir=true;

moveidby(num, (IDs[num].Xdir)? IDs[num].Xstep :  -IDs[num].Xstep , (IDs[num].Ydir)?  IDs[num].Ystep:  -IDs[num].Ystep);

}

 

function getnewprops(num){

IDs[num].Ydir=Math.floor(Math.random()*2)>0;

IDs[num].Xdir=Math.floor(Math.random()*2)>0;

IDs[num].Ystep=Math.ceil(Math.random()*Ymax);

IDs[num].Xstep=Math.ceil(Math.random()*Xmax)

setTimeout('getnewprops('+num+')', Math.floor(Math.random()*Tmax));

}

 

function getscrollx(){

if(NS4 || NS6)return window.pageXOffset;

if(IE4)return document.body.scrollLeft;

}

 

function getscrolly(){

if(NS4 || NS6)return window.pageYOffset;

if(IE4)return document.body.scrollTop;

}

 

function getid(name){

if(NS4)return document.layers[name];

if(IE4)return document.all[name];

if(NS6)return document.getElementById(name);

}

 

function moveidto(num,x,y){

if(NS4)IDs[num].moveTo(x,y);

if(IE4 || NS6){

IDs[num].style.left=x+'px';

IDs[num].style.top=y+'px';

}}

 

function getidleft(num){

if(NS4)return IDs[num].left;

if(IE4 || NS6)return parseInt(IDs[num].style.left);

}

 

function getidtop(num){

if(NS4)return IDs[num].top;

if(IE4 || NS6)return parseInt(IDs[num].style.top);

}

 

function moveidby(num,dx,dy){

if(NS4)IDs[num].moveBy(dx, dy);

if(IE4 || NS6){

IDs[num].style.left=(getidleft(num)+dx)+'px';

IDs[num].style.top=(getidtop(num)+dy)+'px';

}}

 

function getwindowwidth(){

if(NS4 || NS6)return window.innerWidth;

if(IE4)return document.body.clientWidth;

}

 

function getwindowheight(){

if(NS4 || NS6)return window.innerHeight;

if(IE4)return document.body.clientHeight;

}

 

function init(){

wind_w=getwindowwidth();

wind_h=getwindowheight();

for(i=0; i<floatimages.length; i++){

IDs[i]=getid('pic'+i);

if(NS4){

IDs[i].W=IDs[i].document.images["p"+i].width;

IDs[i].H=IDs[i].document.images["p"+i].height;

}

if(NS6 || IE4){

IDs[i].W=document.images["p"+i].width;

IDs[i].H=document.images["p"+i].height;

}

getnewprops(i);

moveidto(i , Math.floor(Math.random()*(wind_w-IDs[i].W)), Math.floor(Math.random()*(wind_h-IDs[i].H)));

if(NS4)IDs[i].visibility = "show";

if(IE4 || NS6)IDs[i].style.visibility = "visible";

startfly=setInterval('moveimage('+i+')',Math.floor(Math.random()*100)+100);

}}

 

function hidebutterfly(){

for(i=0; i<floatimages.length; i++){

if (IE4)

eval("document.all.pic"+i+".style.visibility='hidden'")

else if (NS6)

document.getElementById("pic"+i).style.visibility='hidden'

else if (NS4)

eval("document.pic"+i+".visibility='hide'")

clearInterval(startfly)

}

}

 

if (NS4||NS6||IE4){

window.onload=init;

window.onresize=function(){ wind_w=getwindowwidth(); wind_h=getwindowheight(); }

}

 

</script>

 

0 Comments

Fri

27

Feb

2009

145又一雪景效果

145又一雪景效果

脚本说明:

第一步:把如下代码加入<body>区域中

<script language="JavaScript">

<!--

 

Amount=20; //Smoothness! depends on image file size, the smaller the size the more you can use!

 

//Pre-load your image below!

Image0=new Image();

Image0.src="flake1.gif";

Image1=new Image();

Image1.src="flake2.gif";

Image2=new Image();

Image2.src="flake3.gif";

Image3=new Image();

Image3.src="flake4.gif";

Image4=new Image();

Image4.src="flake5.gif";

 

grphcs=new Array(5)

grphcs[0]="flake1.gif"

grphcs[1]="flake2.gif"

grphcs[2]="flake3.gif"

grphcs[3]="flake4.gif"

grphcs[4]="flake5.gif"

 

Ypos=new Array();

Xpos=new Array();

Speed=new Array();

Step=new Array();

Cstep=new Array();

ns=(document.layers)?1:0;

if (ns){

for (i = 0; i < Amount; i++){

var P=Math.floor(Math.random()*grphcs.length);

rndPic=grphcs[P];

document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");

}

}

else{

document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');

for (i = 0; i < Amount; i++){

var P=Math.floor(Math.random()*grphcs.length);

rndPic=grphcs[P];

document.write('<img id="si" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');

}

document.write('</div></div>');

}

WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;

WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;

for (i=0; i < Amount; i++){                                                               

 Ypos[i] = Math.round(Math.random()*WinHeight);

 Xpos[i] = Math.round(Math.random()*WinWidth);

 Speed[i]= Math.random()*3+2;

 Cstep[i]=0;

 Step[i]=Math.random()*0.1+0.05;

}

function fall(){

var WinHeight=(document.layers)?window.innerHeight:window.document.body.clientHeight;

var WinWidth=(document.layers)?window.innerWidth:window.document.body.clientWidth;

var hscrll=(document.layers)?window.pageYOffset:document.body.scrollTop;

var wscrll=(document.layers)?window.pageXOffset:document.body.scrollLeft;

for (i=0; i < Amount; i++){

sy = Speed[i]*Math.sin(90*Math.PI/180);

sx = Speed[i]*Math.cos(Cstep[i]);

Ypos[i]+=sy;

Xpos[i]+=sx;

if (Ypos[i] > WinHeight){

Ypos[i]=-60;

Xpos[i]=Math.round(Math.random()*WinWidth);

Speed[i]=Math.random()*5+2;

}

if (ns){

document.layers['sn'+i].left=Xpos[i];

document.layers['sn'+i].top=Ypos[i]+hscrll;

}

else{

si[i].style.pixelLeft=Xpos[i];

si[i].style.pixelTop=Ypos[i]+hscrll;

}

Cstep[i]+=Step[i];

}

setTimeout('fall()',10);

}

//-->

</script>

 

 

第二步:把<body>中的内容改为

<body bgcolor="#fef4d9" onLoad="fall()">

 

0 Comments

Fri

27

Feb

2009

144、飘动的多个图片

144、飘动的多个图片

脚本说明:

第一步:把如下代码加入<body>区域中

<script language="JavaScript">

<!--

 

Pic=new Array('04261.gif','04262.gif','04263.gif','04264.gif','04265.gif')

//Smoothness of animation depends on the number of images and they're file size.

MaxSpeed=5;

MinSpeed=2;

 

load = new Array()

for(i=0; i < Pic.length; i++)

 {

 load[i] = new Image();

 load[i].src = Pic[i];

 }

amount=Pic.length;

ns=(document.layers)?1:0;

if (ns){

for (i=0; i < amount; i++){

document.write("<LAYER NAME='netscape"+i+"' LEFT=0 TOP=0><img name='netpics' src="+load[i].src+"></LAYER>")}

}

else{

document.write("<div style='position:absolute;top:0px;left:0px'><div style='position:relative'>");

for (i=0; i < amount; i++){

document.write("<img id='explorer' src='"+load[i].src+"' style='position:absolute;top:0px;left:0px'>")}

document.write("</div></div>")

}

VB=0;

HB=0;

R=new Array();

PB=new Array();

RD=new Array();

Y=new Array();

X=new Array();

D=new Array();

SP=new Array();

BY=new Array();

BX=new Array();

for (i=0; i < amount; i++){

 Y[i]=10;

 X[i]=10;

 D[i]=Math.floor(Math.random()*70+10);

 SP[i]=Math.floor(Math.random()*MaxSpeed+MinSpeed);

}

function Curve(){

plusMinus=new Array(1,-1,2,-2,3,-3,0,1,-1,0,5,-5)

for (i=0; i < amount; i++){

R[i]=Math.floor(Math.random()*plusMinus.length);

RD[i]=plusMinus[R[i]];

}

setTimeout('Curve()',1500);

}

function MoveRandom(){

var H=(document.layers)?window.innerHeight:document.body.clientHeight;

var W=(document.layers)?window.innerWidth:document.body.clientWidth;

var YS=(document.layers)?window.pageYOffset:document.body.scrollTop;

var XS=(document.layers)?window.pageXOffset:document.body.scrollLeft;

 

for (i=0; i < amount; i++){

BY[i]=-load[i].height;

BX[i]=-load[i].width;

PB[i]=D[i]+=RD[i];

y = SP[i]*Math.sin(PB[i]*Math.PI/180);

x = SP[i]*Math.cos(PB[i]*Math.PI/180);

if (D[i] < 0) D[i]+=360;

Y[i]+=y;

X[i]+=x;

VB=180-D[i];

HB=0-D[i];

//Corner rebounds! not necessary but looks nice.

if ((Y[i] < 1) && (X[i] < 1)) {Y[i]=1;X[i]=1;D[i]=45;}

if ((Y[i] < 1) && (X[i] > W+BX[i])) {Y[i]=1;X[i]=W+BX[i];D[i]=135;}

if ((Y[i] > H+BY[i]) && (X[i] < 1)) {Y[i]=H+BY[i];X[i]=1;D[i]=315;}

if ((Y[i] > H+BY[i]) && (X[i] > W+BX[i])) {Y[i]=H+BY[i];X[i]=W+BX[i];D[i]=225;}

//Edge rebounds!

if (Y[i] < 1) {Y[i]=1;D[i]=HB;} 

if (Y[i] > H+BY[i]) {Y[i]=H+BY[i];D[i]=HB;} 

if (X[i] < 1) {X[i]=1;D[i]=VB;}

if (X[i] > W+BX[i]) {X[i]=W+BX[i];D[i]=VB;}

var layer=(document.layers)?document.layers['netscape'+i]:explorer[i].style;

layer.top=Y[i]+YS;

layer.left=X[i]+XS;

}

setTimeout('MoveRandom()',10);

}

function sTaRt(){Curve();MoveRandom()}

//-->

</script>

 

 

第二步:把<body>中的内容改为:

0 Comments

Fri

27

Feb

2009

143、动感的图片

143、动感的图片

脚本说明:

把如下代码加入<body>区域中

<SCRIPT LANGUAGE="JavaScript">

i=0;

function f_wave()

{i=i-4;

ShowCool.style.filter="Wave(Freq=1,LightStrength=20,Phase=" + i + ")";

setTimeout("f_wave()",100);

}

window.onload=f_wave;</SCRIPT>

<IMG SRC="logo0509.gif" WIDTH="180" HEIGHT="250" ID=ShowCool>

 

0 Comments

Fri

27

Feb

2009

142、按钮控制图片移动

142、按钮控制图片移动

脚本说明:

把如下代码加入<body>区域中

<script type="text/javascript">

function Path() {

       this.concat = int_concat;

       this.add = int_add;

       this.rotate = int_rot;

      

       function int_concat(p) {

              return new PathList(new Array(this, p));

       }

      

       function int_add(p) {

              return new PathAdd(this, p);

       }

      

       function int_rot(xc,yc,v) {

              return new RotatePath(this, xc, yc, v);

       }

}

 

 

// The following object is used for the concat

function PathList(inPathList) {

       // All path objects must have these 5 methods

       this.x  = 0;    // Retrieves the current x value

       this.y  = 0;

       this.step = int_step;               // Move to next step

       this.reset = int_reset;                    // Resets the current position

 

       // The rest may vary from different path objects

 

       this.pathList = inPathList;

       this.currentPath = 0;

 

       function int_step() {

              if (this.currentPath >= this.pathList.length) return false;

              if (this.pathList[this.currentPath].step()) {

                     this.x = this.pathList[this.currentPath].x;

                     this.y = this.pathList[this.currentPath].y;

              }

              else {

                     this.currentPath++;

                     if (this.currentPath >= this.pathList.length) return false;

                     this.x = this.pathList[this.currentPath].x;

                     this.y = this.pathList[this.currentPath].y;

              }

              return true;

       }

      

       function int_reset() {

              this.currentPath = 0;

              for (var i=0; i<this.pathList.length; i++)

                     this.pathList[i].reset();

              this.x = this.pathList[this.currentPath].x;

              this.y = this.pathList[this.currentPath].y;            

       }    

}

 

 

// The following object is used for adding two paths

function PathAdd(p1,p2) {

       // All path objects must have these 5 methods

       this.x  = 0;    // Retrieves the current x value

       this.y  = 0;

       this.step = int_step;               // Move to next step

       this.reset = int_reset;                    // Resets the current position

 

       // The rest may vary from different path objects

 

 

       this._p1 = p1;

       this._p2 = p2;

      

       function int_step() {

              var c1 = this._p1.step();

              var c2 = this._p2.step();

 

              this.x = this._p1.x + this._p2.x;

              this.y = this._p1.y + this._p2.y;

 

              return (c1 || c2);

       }

      

       function int_reset() {

              this._p1.reset();

              this._p2.reset();

 

              this.x = this._p1.x + this._p2.x;

              this.y = this._p1.y + this._p1.y;

       }    

}

 

function RotatePath(p,xc,yc,v) {

       this.x  = 0;    // Retrieves the current x value

       this.y  = 0;

       this.step = int_step;               // Move to next step

       this.reset = int_reset;                    // Resets the current position

 

 

       // The rest may vary from different path objects

 

       this._p = p;

       this._xc = xc;

       this._yc = yc;

       this._v = v;

      

       function int_step() {

              var c = this._p.step();

 

              var pol = toPol(this._p.x - this._xc, this._p.y - this._yc);

              var rec = toRec(pol.r, pol.v + toRad(this._v));

 

              this.x = rec.x + this._xc;

              this.y = rec.y + this._yc;

 

              return c;

       }

      

       function int_reset() {

              this._p.reset();

              var pol = toPol(this._p.x - this._xc, this._p.y - this._yc);

              var rec = toRec(pol.r, pol.v + toRad(this._v));

 

              this.x = rec.x - this._xc;

              this.y = rec.y - this._yc;

       }    

 

       function toPol(x,y) {

              var o = new Object();

              o.r = Math.sqrt(x*x + y*y);

              if (x == 0)

                     o.v = Math.PI / 2;

              else

                     o.v = Math.atan(y/x);

              if (x < 0)

                     o.v = o.v + Math.PI;

              return o;

       }

      

       function toRec(r,v) {

              var o = new Object();

              o.x = r * Math.cos(v);

              o.y = r * Math.sin(v);

              return o;

       }

 

       function toRad(deg) {

              return deg*Math.PI/180;

       }

}

 

PathAdd.prototype    = new Path;

PathList.prototype   = new Path;

RotatePath.prototype = new Path;

</script>

<script type="text/javascript">

function CirclePath(x, y, _xr, _yr, fromV, toV, n) {

       // All path objects must have these 5 methods

       this.x  = 0;    // Retrieves the current x value

       this.y  = 0;

       this.step = int_step;               // Move to next step

       this.reset = int_reset;

 

       // The rest may vary from different path objects

 

       this.steps = n;                // NN work around. NN can't handle local variables!!!

       this.stepsLeft = n;

       this.xp = x;

       this.yp = y;

       this.v = -toRad(fromV);

       this.startV = this.v;

       this.endV = -toRad(toV);

       this.xr = _xr;

       this.yr = _yr;

      

       this.x = getX(this.xp,this.xr,this.v);

       this.y = getY(this.yp,this.yr,this.v);

 

       function toRad(deg) {

              return deg*Math.PI/180;

       }

      

       function getX(xp, xr, v) {

//            alert("xp: " + xp + "\nxr: " + xr + "\nv: " + v);

              return xp + xr*Math.cos(v);

       }

 

       function getY(yp, yr, v) {

              return yp + yr*Math.sin(v);

       }

 

// Initate steps

       if (this.steps > 0)

              this.deltaV = (this.endV - this.startV)/n;      // work around netscape bug. Netscape couldn't handle this

       else {                                                              // as a local variable

              this.deltaV = 0;

              this.x = getX(this.xp,this.xr,this.endV);

              this.y = getY(this.yp,this.yr,this.endV);

       }

      

       function int_step() {

              if (this.stepsLeft > 0) {

                     this.v += this.deltaV;

                     this.x = getX(this.xp,this.xr,this.v);

                     this.y = getY(this.yp,this.yr,this.v);

 

                     this.stepsLeft--;

                     return true;

              }

              return false;

       }

      

       function int_reset() {

              if (this.steps < 1) {

                     this.x = getX(this.xp,this.xr,this.endV);

                     this.y = getY(this.yp,this.yr,this.endV);

              }

              else {

                     this.v = this.startV;

                     this.x = getX(this.xp,this.xr,this.v);

                     this.y = getY(this.yp,this.yr,this.v);

                     this.stepsLeft = this.steps;

              }

       }

}

 

CirclePath.prototype = new Path;

</script>

<script type="text/javascript">

function StraightPath(fromX, fromY, toX, toY, n) {

       // All path objects must have these 5 methods

       this.x  = fromX;   // Retrieves the current x value

       this.y  = fromY;

       this.step = int_step;               // Move to next step

                                                               // Returns true if the step was succesfull

                                                               // Returns false when the path has been done

       this.reset = int_reset;

       // The rest may vary from different path objects

 

       this.startX = fromX;

       this.startY = fromY;

       this.endX = toX;

       this.endY = toY;

 

// Initiate steps

      this.steps = n;

      this.totalSteps = n;

      if (this.totalSteps < 1) { // No Amimation!

             this.x = this.endX;

             this.y = this.endY;

             this.deltaX = 0;      // NN work around

             this.deltaY = 0;

      }

       else {

             this.deltaX = (this.endX - this.startX) / this.totalSteps;

              this.deltaY = (this.endY - this.startY) / this.totalSteps;

       }

 

       function int_step() {

              if (this.steps >= 0) {

                     this.steps--;

                     this.x += this.deltaX;

                     this.y += this.deltaY;

              }

              return (this.steps >= 0 );

       }

      

       function int_reset() {

              if (this.totalSteps < 1) {

                     this.steps = 0;

                     this.x = this.endX;

                     this.y = this.endY;

              }

              else {

                     this.steps = this.totalSteps;

                     this.x = this.startX;

                     this.y = this.startY;

              }

       }

}

 

StraightPath.prototype = new Path;

</script>

<script type="text/javascript">

var animIndex = 0;

var animArray = new Array();

 

function Animator(id, p, period) {

       this.play = int_play;

       this.pause = int_pause;

       this.stop = int_stop;

       this.onanimationdone;

       this.elstyle = null;  

       this.path = p;

       this.msec = period;

       this.id = id;

      

       this.index = animIndex;

       animArray[this.index] = this;

       this.thisString = "animArray[" + this.index + "]";

       animIndex++;

      

       function int_play() {

              if (this.elstyle == null) {

//                   this.elstyle = (document.all != null) ? document.all[this.id].style : document.layers[this.id];

                     if (document.all)    // IE4

                            this.elstyle = document.all[this.id].style;

                     else if (document.getElementById)      // NGLayout

                            this.elstyle = document.getElementById(this.id).style;

                     else if (document.layers)       // nn4.x

                            this.elstyle = document.layers[this.id]

                     else

                            return;

              }

              if (this.path.step()) {

                     this.elstyle.left = this.path.x;

                     this.elstyle.top  = this.path.y;

                     animArray[this.index].timer = setTimeout(this.thisString + ".play()", this.msec);

              }

              else if (this.onanimationdone != null) {

                     if (typeof(this.onanimationdone) == "string")

                            eval(this.onanimationdone);

                     else if (typeof(this.onanimationdone) == "function")

                            this.onanimationdone();

              }

       }

      

       function int_pause() {

              clearTimeout(animArray[this.index].timer);

       }

      

       function int_stop() {

              clearTimeout(animArray[this.index].timer);

              this.path.reset();

       }

}

</script>

<INPUT onclick=a.play() type=button value=开始> <INPUT onclick=a.pause() type=button value=暂停> <INPUT onclick=a.stop() type=button value=停止>

<DIV id=dot

style="HEIGHT: 100px; LEFT: 250px; POSITION: absolute; TOP: 150px; WIDTH: 100px"><IMG

alt="" border=0 height=32 src="globe.gif" width=32></DIV>

<SCRIPT type=text/javascript>

<!--

p1 = new StraightPath(150,50,250,50,12);

p2 = new CirclePath(250,150,100,100,90,-90,30);

p3 = new StraightPath(250,250,150,250,12);

p4 = new CirclePath(150,150,100,100,270,90,30);

p = p1.concat(p2).concat(p3).concat(p4);

p = p.rotate(150,50,45).add(new StraightPath(100,100,100,100,1));

a = new Animator("dot", p, 50);

a.onanimationdone = new Function("alert('一遍已经转完,请先按停止键再开始.')");

//-->

</SCRIPT>

 

0 Comments

Fri

27

Feb

2009

141、图片打碎后组合

141、图片打碎后组合

脚本说明:

第一步:把如下代码加入<body>区域中

<STYLE>

.spanstyle {

       LEFT: -5000px; POSITION: absolute

}

</STYLE>

<SCRIPT>

<!-- Beginning of JavaScript -

      

// The width of your images (pixels). All pictures should have the same width.

var imgwidth=200

 

// The height of your images (pixels). All pictures should have the same height.

var imgheight=90

 

// The URL of your images. You may add as many images as you like.

var imgurl=new Array()

imgurl[0]="a048.gif"

imgurl[1]="a049.gif"

imgurl[2]="a052.gif"

 

// Do not edit this block.

var imgpreload=new Array()

for (i=0;i<=imgurl.length-1;i++) {

       imgpreload[i]=new Image()

       imgpreload[i].src=imgurl[i]

}

 

// Final horizontal position of the image: distance to the left margin of the window

var x_finalpos=300

 

// Final vertical position of the image: distance to the top margin of the window

var y_finalpos=200

 

// Number of sliced cells (the higher this value the slower the script)

var x_slices=8

 

// Number of sliced rows (the higher this value the slower the script)

var y_slices=3

 

// Speed of the reassembling effect. More means slower.

var pause=10

 

// The width and heigth of the zone where the debris of the images are spread (pixels)

var screenwidth=800

var screenheight=500

 

// Do not change the variables below

var x_step=new Array()

var y_step=new Array()

var x_randompos=0

var y_randompos=0

var i_loop=0

var max_loop=20

var i_image=0

var width_slice=Math.floor(imgwidth/x_slices)

var height_slice=Math.floor(imgheight/y_slices)

var cliptop=0

var clipbottom=height_slice

var clipleft=0

var clipright=width_slice

var spancounter=0

 

function initiate() {

       cliptop=0

       clipbottom=height_slice

       clipleft=0

       clipright=width_slice

       i_loop=0

       spancounter=0

    if (document.all) {

          for (i=0;i<=y_slices-1;i++) {

                     for (ii=0;ii<=x_slices-1;ii++) {

                            var thisspan=eval("document.all.span"+spancounter+".style")

                            x_randompos=Math.ceil(screenwidth*Math.random())

                            y_randompos=Math.ceil(screenheight*Math.random())

                            thisspan.posLeft=x_randompos

                            thisspan.posTop=y_randompos

                thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

                            clipleft+=width_slice

                      clipright+=width_slice

                      spancounter++

                     }

               clipleft=0

               clipright=width_slice

               cliptop+=height_slice

               clipbottom+=height_slice

              }

   }

   explode_IE()

}

 

function changeimage() {

       spancounter=0

       for (i=0;i<=y_slices-1;i++) {

              for (ii=0;ii<=x_slices-1;ii++) {

                     var thisspan=eval("document.all.span"+spancounter+".style")          

                     thisspan.posLeft=-5000

                     thisspan.posTop=-5000

                     spancounter++

              }

       }

       spancounter=0

       if (i_image>imgurl.length-1) {i_image=0}

       for (i=0;i<=y_slices-1;i++) {

              for (ii=0;ii<=x_slices-1;ii++) {

                     var thisinnerspan=eval("span"+spancounter)

                  thisinnerspan.innerHTML="<img src='"+imgurl[i_image]+"'>"

                     spancounter++

              }

       }

       i_image++

       initiate()

}

 

 

function explode_IE() {

       spancounter=0

       if (i_loop<=max_loop-1) {

              for (i=0;i<=y_slices-1;i++) {

                     for (ii=0;ii<=x_slices-1;ii++) {

                            var thisspan=eval("document.all.span"+spancounter+".style")

                            x_step[spancounter]=(x_finalpos-thisspan.posLeft)/(max_loop-i_loop)

                            y_step[spancounter]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)            

                            thisspan.posLeft+=x_step[spancounter]

                            thisspan.posTop+=y_step[spancounter]

                            spancounter++

                     }

              }

              i_loop++

              var timer=setTimeout("explode_IE()",pause)

       }

       else {

              spancounter=0

              clearTimeout(timer)

              var timer=setTimeout("changeimage()",2000)

       }

}

 

 

// - End of JavaScript - -->

</SCRIPT>

<SCRIPT>

<!-- Beginning of JavaScript -

if (document.all) {

       for (i=0;i<=y_slices-1;i++) {

              for (ii=0;ii<=x_slices-1;ii++) {

                  document.write("<span id='span"+spancounter+"' class='spanstyle'></span>")

                     spancounter++

              }

       }

       spancounter=0

}

// - End of JavaScript - -->

</SCRIPT>

 

 

 

 

 

第二步:把<body>中的内容改为:

<body onload=changeimage()>

 

0 Comments

Fri

27

Feb

2009

140、图片显示特效

140、图片显示特效

脚本说明:

第一步:把如下代码加入<body>区域中

<SCRIPT>

<!-- Beginning of JavaScript -

var imageheight=280

var imagewidth=560

 

var cliptop

var clipbottom

var clipleft

var clipright

var clippoints

                                                                

var tempo=100

 

var stepx=0

var stepy=0

var timer

 

function setValues() {

       if (document.all) {

              document.all.image.style.posLeft=0

            document.all.image.style.posTop=0

              document.all.imagecontent.style.posLeft=0

            document.all.imagecontent.style.posTop=0

           moveimage()

       }

}

 

function moveimage() {

       if (stepx<=imagewidth || stepy<=imageheight) { 

              stepx=stepx+12

              stepy=stepy+6

              image.innerHTML="<span style='width:"+stepx+"px; height:"+stepy+"px;background-color:000000;filter:alpha(opacity=0,finishopacity=100,style=2'></span>"

              cliptop=0

              clipbottom=stepy

              clipleft=0

              clipright=stepx

             

              clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

              document.all.imagecontent.style.clip=clippoints

           timer=setTimeout("moveimage()",tempo)

       }

       else{

              clearTimeout(timer)

              timer=setTimeout("moveimage2()",tempo)

       }

}

 

function moveimage2() {

       if (stepx>=0 || stepy>=0) {   

              stepx=stepx-12

              stepy=stepy-6

              image.innerHTML="<span style='width:"+stepx+"px; height:"+stepy+"px;background-color:000000;filter:alpha(opacity=0,finishopacity=100,style=2'></span>"

              cliptop=0

              clipbottom=stepy

              clipleft=0

              clipright=stepx

             

              clippoints="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

              document.all.imagecontent.style.clip=clippoints

           timer=setTimeout("moveimage2()",tempo)

       }

       else{

              stepx=0

              stepy=0

              clearTimeout(timer)

              timer=setTimeout("moveimage()",tempo)

       }

}

 

// - End of JavaScript - -->

</SCRIPT>

<DIV id=imagecontent style="LEFT: -5000px; POSITION: absolute; TOP: -5000px"><IMG height=421 src="zeta0212.jpg" width=735></DIV>

<DIV id=image style="POSITION: absolute; TOP: -50px"></DIV>

 

 

第二步:把<body>中的内容改为:

<body bgcolor="#fef4d9" onload=setValues()>

0 Comments

Fri

27

Feb

2009

139、鼠标驱动多图变化

139、鼠标驱动多图变化 

脚本说明:

把如下代码加入<body>区域中

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

// Preload Images

var image0 = new Image(); image0.src = "sto/002.jpg";

var image1 = new Image(); image1.src = "sto/003.jpg";

var image2 = new Image(); image2.src = "sto/004.jpg";

//  End -->

</script>

<a href="#" onmouseover="image0.src='sto/005.jpg'; image1.src='sto/007.jpg'; image2.src='sto/006.jpg';" onmouseout="image0.src='sto/008.jpg'; image1.src='sto/009.jpg'; image2.src='sto/0011.jpg';"><img name="image0" src="sto/0011.jpg"></a>

<img name="image1" src="04041.gif" border="0">

<img name="image2" src="04042.gif" border="0">

0 Comments

Fri

27

Feb

2009

138、慢慢变大的图片

138、慢慢变大的图片

脚本说明:

第一步:把如下代码加入<body>区域中

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var ival, imgname, total, steps, maxx, maxy, currentx, currenty, dx, dy;

function zoomImg(imgname, total, steps, maxx, maxy)      {

// convert the total from seconds to miliseconds

total = total * 1000;

objref = eval("document.getElementById('"+imgname+"')");

currentx = objref.width;

currenty = objref.height;

// work out how much we need to increase the image by each step

// devide image sizes by number of steps to get the amount we need to change each step

stepx = maxx / steps;

stepy = maxy / steps;

// devide the total time (in ms) by the number of steps to get the interval time

inttime = total / steps;

// set the interval to increase the size of the image by the required pixels

functionRef = "resizeImg('"+imgname+"', "+stepx+", "+stepy+", "+maxx+", "+maxy+")";

ival = setInterval(functionRef, inttime);

}

function resizeImg(imgname, dx, dy, maxx, maxy) {

objref = eval("document.getElementById('"+imgname+"')");

currentx = objref.width;

currenty = objref.height;

if ((currentx<maxx-dx) && (currenty<maxy-dy)) {

objref.height = currenty + dy;

objref.width = currentx + dx;

}

else {

clearInterval(ival);

objref.height = maxy;

objref.width = maxx;

   }

}

//  End -->

</script>

<div align="center"><img src="letter_3.gif" name="test" id="test"></div>

 

 

第二步:把<body>中的内容改为:

<body onLoad="zoomImg('test', 10, 150, 300, 200)">

 

0 Comments

Fri

27

Feb

2009

137、变换飞舞的图片

137、变换飞舞的图片

脚本说明:

第一步:把如下代码加入<body>区域中

<script language="JavaScript">

<!-- Naughty Windows Script by kurt.grigg@virgin.net

 

pics=new Array('img.gif','inindent.gif','italic.gif','numlist.gif','paste.gif','redo.gif','under.gif')

load=new Array();

function PreLoad(){

for(i=0; i < pics.length; i++)

 {

 load[i]=new Image();

 load[i].src=pics[i];

 }

}

PreLoad();

BY=-22;         

BX=-17;                   

NS4=(document.layers);

NS6=(document.getElementById&&!document.all);

IE4=(document.all);

L=null;

if (NS4){

document.write("<LAYER NAME='netscape' LEFT=0 TOP=0><img name='n' src="+load[0].src+"></LAYER>");

}

if (NS6){

document.write("<img id='n6' src='"+load[0].src+"' style='position:absolute;top:0px;left:0px'>");

}

if (IE4){

document.write("<div style='position:absolute;top:0px;left:0px'><div style='position:relative'>");

document.write("<img id='explorer' src='"+load[0].src+"' style='position:absolute;top:0px;left:0px'>");

document.write("</div></div>")

}

R=0,PB=0,RD=0,Y=0,X=0,D=0,VB=0,HB=0;

Y=10;X=10;D=Math.floor(Math.random()*60+10);

function Curve(){

plusMinus=new Array(1,-1,2,-2,3,-3,0,1,-1)

R=Math.floor(Math.random()*plusMinus.length);

RD=plusMinus[R];

setTimeout('Curve()',1800);

}

function MoveRandom(){

setTimeout('MoveRandom()',10);

var H=(NS6||NS4)?window.innerHeight:document.body.clientHeight;

var W=(NS6||NS4)?window.innerWidth:document.body.clientWidth;

var YS=(NS6||NS4)?window.pageYOffset:document.body.scrollTop;

var XS=(NS6||NS4)?window.pageXOffset:document.body.scrollLeft;

PB=D+=RD;

y = 3*Math.sin(PB*Math.PI/180);

x = 3*Math.cos(PB*Math.PI/180);

if (D < 0) D+=360;

Y+=y;

X+=x;

VB=180-D;

HB=0-D;

if ((Y < 1) && (X < 1)) {Y=1;X=1;D=45;}

if ((Y < 1) && (X > W+BX)) {Y=1;X=W+BX;D=135;}

if ((Y > H+BY) && (X < 1)) {Y=H+BY;X=1;D=315;}

if ((Y > H+BY) && (X > W+BX)) {Y=H+BY;X=W+BX;D=225;}

if (Y < 1) {Y=1;D=HB;} 

if (Y > H+BY) {Y=H+BY;D=HB;} 

if (X < 1) {X=1;D=VB;}

if (X > W+BX) {X=W+BX;D=VB;}

if (NS4)L=document.netscape;

if (NS6)L=document.getElementById("n6").style;

if (IE4)L=explorer.style;

L.top=Y+YS;

L.left=X+XS;

}

count=0;

move=1;

function picSwap(){

if (count >= pics.length)count=0;

if (NS4)

document.layers['netscape'].document.images['n'].src=pics[count];

if (NS6)

document.getElementById("n6").src=pics[count];

if (IE4)

explorer.src=pics[count];

count+=move;

setTimeout('picSwap()',2500);

}

function sTaRt(){Curve();MoveRandom();picSwap()}

window.onload=sTaRt;

//-->

</script>

 

 

 

 

第二步:把<body>中的内容改为:

<body  onLoad="sTaRt()">

 

0 Comments

Fri

27

Feb

2009

136、图片放大镜效果

136、图片放大镜效果

脚本说明:

把如下代码加入<body>区域中

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

function enlargeImage1(){

   image1.height="300"

}

function dropImage1(){

   image1.height="150"

}

function enlargeImage2(){

   image2.height="300"

}

function dropImage2(){

   image2.height="150"

}

//  End -->

</script>

<table>

<tr><td align="center">

<img src="picture4-sm.gif" height="150" name="image1" ondblclick="enlargeImage1()" onclick="dropImage1()">

</td><td align="center">

<img src="picture6-sm.gif" height="150" name="image2" ondblclick="enlargeImage2()" onclick="dropImage2()">

</td></tr>

</table>

 

0 Comments

Fri

27

Feb

2009

135、点击使图片大小变化

135、点击使图片大小变化

脚本说明:

把如下代码加入<body>区域中

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

function enlargeImage1(){

   image1.height="300"

}

function dropImage1(){

   image1.height="150"

}

function enlargeImage2(){

   image2.height="300"

}

function dropImage2(){

   image2.height="150"

}

//  End -->

</script>

<table>

<tr><td align="center">

<img src="picture4-sm.gif" height="150" name="image1" ondblclick="enlargeImage1()" onclick="dropImage1()">

</td><td align="center">

<img src="picture6-sm.gif" height="150" name="image2" ondblclick="enlargeImage2()" onclick="dropImage2()">

</td></tr>

</table>

 

 

0 Comments

Fri

27

Feb

2009

134、万能图片显示器??

134、万能图片显示器??

脚本说明:

第一步:把如下代码加入<body>区域中

<style>

 .divstyle{position:absolute; width="0";height:"0"}

</style>

 

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

function showimg(form)

{

adres = form.image_file.value;

index = adres.indexOf(".gif");

index = index + adres.indexOf(".jpg");

index = index + adres.indexOf(".bmp");

if (form.image_file.value == "")

  {alert("No Image found!");}

else

  {if (index == -3){alert("Unknow image type");

    form.width.value=0;

    form.height.value=0;}

  else

    {

    var img_obj = new Image();

    img_obj = form.image_file.value;

    document.changing.src = img_obj;

    document.changing2.src= img_obj;

    document.changing.width = document.changing2.width;

    document.changing.height = document.changing2.height;

    set();

}

  }

}

fast = 0;

change = 0;

function upw(){

  document.image.width.value=parseInt(document.image.width.value)+1;

  resize();}

function over_upw(){upw();

  change = 1;

  changetime = setTimeout("fast_upw()","600");}

function fast_upw(){clearTimeout(changetime);

  upw();

  fast = setTimeout("fast_upw()","100");}

function clt(){

if (change == 1){clearTimeout(changetime);}

clearTimeout(fast);

change = 0;

}

function resize()  {document.changing.height = document.image.height.value;

  document.changing.width = document.image.width.value;}

function downw(){document.image.width.value=parseInt(document.image.width.value)-1;

  resize();}

function over_downw(){downw();

  change = 1;

  changetime = setTimeout("fast_downw()","600");}

function fast_downw(){clearTimeout(changetime);

  downw();

  fast = setTimeout("fast_downw()","100");}

function uph(){document.image.height.value=parseInt(document.image.height.value)+1;

 resize();}

function over_downh(){downh();

  change = 1;

  changetime = setTimeout("fast_downh()","600");}

function fast_downh(){clearTimeout(changetime);

  downh();

  fast = setTimeout("fast_downh()","100");}

function over_uph(){uph();

  change = 1;

  changetime = setTimeout("fast_uph()","600");}

function fast_uph(){clearTimeout(changetime);

  uph();

  fast = setTimeout("fast_uph()","100");}

function downh(){document.image.height.value=parseInt(document.image.height.value)-1;

  resize();}

function set(){

  document.image.width.value=document.changing.width;

  document.image.height.value=document.changing.height;}

//  End -->

</script>

<center>

<form name="image">

<input type="file" name="image_file"><br>

<input type="button" name="show" value="显示图片" onclick="showimg(this.form)">

<br>

宽度   高度

<br><img src="up0821.gif" onmousedown="over_upw()" onmouseup="clt()">

<img src="down0821.gif" onmousedown="over_downw()" onmouseup="clt()">

<input type="text" name="width" size="4" readonly>

<input type="text" name="height" size="4" readonly>

<img src="up0821.gif" onmousedown="over_uph()" onmouseup="clt()" >

<img src="down0821.gif" onmousedown="over_downh()" onmouseup="clt()">

<br><br>

<table border ="1">

<tr><td>

<img src="053.gif" name="changing">

</td></tr></table>

</form>

<div STYLE="left:-5000 px;top:0" class="divstyle">

<P ><img src="053.gif" name="changing2"></p>

</div>

</center>

 

 

第二步:把<body>中的内容改为:

<body bgcolor="#fef4d9" onLoad="set()">

 

0 Comments

Fri

27

Feb

2009

133、页面中的'鬼影'??

133、页面中的'鬼影'??

脚本说明:

第一步:把如下代码加入<body>区域中

<SCRIPT LANGUAGE="JavaScript">

if(!window.JSFX)

       JSFX=new Object();

JSFX.layerNo=0;

/**********************************************************************************/

JSFX.createElem = function(htmlStr)

{

       var elem = null;

 

      if(document.layers)

       {

              elem=new Layer(2000);

              elem.document.open();

              elem.document.write(htmlStr);

              elem.document.close();

              elem.innerHTML = htmlStr;

       }

       else

       if(document.all)

       {

              var xName = "xLayer" + JSFX.layerNo++;

              var txt = "<DIV ID='" + xName

                     + "' STYLE=\"position:absolute;"

                     + "visibility:hidden\">"

                     + htmlStr

                     + "</DIV>";

 

                     document.body.insertAdjacentHTML("BeforeEnd",txt);

 

              elem = document.all[xName];

       }

       else

       if (document.getElementById)

       {

              var xName="xLayer" + JSFX.layerNo++;

              var txt = ""

                     + "position:absolute;"

                     + "visibility:hidden";

 

              var newRange = document.createRange();

 

              elem = document.createElement("DIV");

              elem.setAttribute("style",txt);

              elem.setAttribute("id", xName);

 

              document.body.appendChild(elem);

 

              newRange.setStartBefore(elem);

              strFrag = newRange.createContextualFragment(htmlStr);  

              elem.appendChild(strFrag);

       }

 

       return elem;

}

/**********************************************************************************/

JSFX.Layer = function(newLayer)

{

       if(!newLayer)

              return;

 

       if(typeof newLayer == "string")

              this.elem = JSFX.createElem(newLayer);

       else

              this.elem=newLayer;

 

       if(document.layers)

       {

              this.images=this.elem.document.images;

              this.style = this.elem;

      }

       else

       {

              this.images  = document.images;

              this.style   = this.elem.style;

       }

}

/**********************************************************************************/

var ns4 = (navigator.appName.indexOf("Netscape") != -1 && !document.getElementById);

 

/**********************************************************************************/

/*** moveTo (x,y) ***/

JSFX.Layer.prototype.moveTo = function(x,y)

{

       this.style.left = x+"px";

       this.style.top = y+"px";

}

if(ns4)

       JSFX.Layer.prototype.moveTo = function(x,y) { this.elem.moveTo(x,y); }

/**********************************************************************************/

/*** show()/hide() Visibility ***/

JSFX.Layer.prototype.show          = function()   { this.style.visibility = "visible"; }

JSFX.Layer.prototype.hide           = function()   { this.style.visibility = "hidden"; }

if(ns4)

{

       JSFX.Layer.prototype.show          = function()   { this.style.visibility = "show"; }

       JSFX.Layer.prototype.hide          = function()   { this.style.visibility = "hide"; }

}

/**********************************************************************************/

/*** Opacity ***/

if(document.all)

{

       JSFX.Layer.prototype.setOpacity = function(pc)

       {

              if(this.style.filter=="")

                     this.style.filter="alpha(opacity=100);";

              this.elem.filters.alpha.opacity=pc;

       }

}

else

       JSFX.Layer.prototype.setOpacity = function(pc) {return 0;}

/******* END OF CODE FROM JSFX.Layer.js ***/

/*** START OF CODE FROM JSFX.Browser.js ***/

JSFX.Browser = new Object();

 

if(navigator.appName.indexOf("Netscape") != -1)

{

       JSFX.Browser.getCanvasWidth     = function() {return innerWidth;}

       JSFX.Browser.getCanvasHeight    = function() {return innerHeight;}

       JSFX.Browser.getMinX        = function() {return(pageXOffset);}

       JSFX.Browser.getMinY        = function() {return(pageYOffset);}

       JSFX.Browser.getMaxX        = function() {return(pageXOffset+innerWidth);}

       JSFX.Browser.getMaxY        = function() {return(pageYOffset+innerHeight);}

}

else        if(document.all)

{

       JSFX.Browser.getCanvasWidth     = function() {return document.body.clientWidth;}

       JSFX.Browser.getCanvasHeight    = function() {return document.body.clientHeight;}

       JSFX.Browser.getMinX        = function() {return(document.body.scrollLeft);}

       JSFX.Browser.getMinY        = function() {return(document.body.scrollTop);}

       JSFX.Browser.getMaxX        = function() {

              return(document.body.scrollLeft

                     +document.body.clientWidth);

       }

       JSFX.Browser.getMaxY        = function() {

                     return(document.body.scrollTop

                            +document.body.clientHeight);

       }

}

/*** END OF CODE FROM JSFX.Browser.js ***/

/*** START OF CODE FROM JSFX.Ghosts.js ***/

 

JSFX.Halloween = new Object();

JSFX.Halloween.Ghosts = new Array();

JSFX.Halloween.start = function()

{

       if(JSFX.Halloween.theTimer == null)

       {

              JSFX.Halloween.theTimer = setTimeout("JSFX.Halloween.animateAll()", 40);

       }

}

JSFX.Halloween.animateAll = function()

{

       JSFX.Halloween.theTimer = setTimeout("JSFX.Halloween.animateAll()", 40);

       var sp = JSFX.Halloween.Ghosts;

       var i;

       for(i=0 ; i<sp.length ; i++)

       {

              sp[i].animate();

       }

 

}

JSFX.AddGhost = function(img)

{

       var myGhost = null;

       var htmlStr = "<IMG SRC='"+img+"'>";

 

       myGhost = new JSFX.Layer(htmlStr);

       myGhost.op = 0;

       myGhost.x = Math.random()*JSFX.Browser.getMaxX();

       myGhost.y = Math.random()*JSFX.Browser.getMaxY();

       myGhost.dx = 0;

       myGhost.dy = 0;

       myGhost.w = 30;

       myGhost.h = 30;

       myGhost.targetX = Math.random()*JSFX.Browser.getMaxX();

       myGhost.targetY = Math.random()*JSFX.Browser.getMaxY();

       myGhost.state = "off"

       myGhost.animate = JSFX.animateGhosts;

       myGhost.hide();

       myGhost.setOpacity(this.op);

       myGhost.moveTo(myGhost.x,myGhost.y);

       JSFX.Halloween.Ghosts[JSFX.Halloween.Ghosts.length] = myGhost;

       JSFX.Halloween.start();

}

JSFX.animateGhosts = function()

{

       if(this.state == "off")

       {

              if(Math.random() > .99)

              {

                     this.state="up";

                     this.show();

              }

       }

       else if(this.state == "on")

       {

              if(Math.random() > .98)

                     this.state="down";

       }

       else if(this.state == "up")

       {

              this.op += 2;

              this.setOpacity(this.op);

              if(this.op==100)

                     this.state = "on";

       }

       else if(this.state == "down")

       {

              this.op -= 2;

              if(this.op==0)

              {

                     this.hide();

                     this.state = "off";

              }

              else

                     this.setOpacity(this.op);

       }

 

       m = this;

       var X = (this.targetX - m.x);

       var Y = (this.targetY - m.y);

       var len = Math.sqrt(X*X+Y*Y);

       if(len < 1) len = 1;

       var dx = 20 * (X/len);

       var dy = 20 * (Y/len);

       var ddx = (dx - this.dx)/10;

       var ddy = (dy - this.dy)/10;

       this.dx += ddx;

       this.dy += ddy;

       m.x += this.dx;

       m.y += this.dy;

       m.moveTo(m.x, m.y);

       if(Math.random() >.95 )

       {

              this.targetX = Math.random()*(JSFX.Browser.getCanvasWidth()-150);

              this.targetY = Math.random()*(JSFX.Browser.getCanvasHeight()+JSFX.Browser.getMinY()-150);

       }

}

 

</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

function JSFX_StartEffects()

{

if (!document.all&&!document.layers)

return

JSFX.AddGhost("ghost0.gif");

JSFX.AddGhost("ghost1.gif");

JSFX.AddGhost("ghost2.gif");

 

JSFX.AddGhost("ghost0.gif");

JSFX.AddGhost("ghost1.gif");

JSFX.AddGhost("ghost2.gif");

}

</SCRIPT>

 

 

第二步:把<body>中的内容改为:

<body  onLoad="JSFX_StartEffects()">

 

0 Comments

Fri

27

Feb

2009

132、小方框中浏览大图

132、小方框中浏览大图

1  把如下代码复制到<head></head>之间

 

<style type="text/css">

<!--

#pic {

       width:480px;

       height:320px;

       border: 3px solid #ccc;

       background-image: url(images/butong_net.jpg);

       background-repeat: no-repeat;

       background-position: 0px 0px;

       cursor: move;

}

-->

</style>

<script type="text/javascript">

<!--

var p = new Array();

var speed = 0.05;  //速度

var picWidth = 1280;  // 大图的宽高

var picHeight = 971;

var x,y // 鼠标点下去时背景的坐标

var x_new,y_new  //位移

var haveclick = false;

 

function getmouseposition(event)

{

       if(document.all)

       {

              x = document.body.scrollLeft+event.clientX;

              y = document.body.scrollTop+event.clientY;

       }else

       {

              x = event.layerX;

              y = event.layerY;

       }    

       haveclick = true;

}

function movestop()

{

       haveclick = false;

}

 

function movestart(event)

{

if(haveclick)

{

       if(document.getElementById('pic').style.backgroundPosition.length==0)

              {document.getElementById('pic').style.backgroundPosition="0px 0px";}

       p = document.getElementById('pic').style.backgroundPosition.split(" ")

 

       if(document.all)

       {    

              x_new = document.body.scrollLeft+event.clientX;

              y_new = document.body.scrollTop+event.clientY;

       }else

       {    

              x_new = event.layerX;

              y_new = event.layerY;  

       }

      

       x2 = (speed*(x_new-x)+parseInt(p[0])).toString(10);    // 计算位移量

       y2 = (speed*(y_new-y)+parseInt(p[1])).toString(10);

      

       if (x2<-picWidth+420) x2=-picWidth+420;

       if (y2>0) y2=0;

       if (x2>0) x2=0;

       if (y2<-picHeight+300) y2=-picHeight+300;

 

       document.getElementById('pic').style.backgroundPosition=x2+"px "+y2+"px";

}

}

-->

</script>

 

 

2    把如下代码复制到<body></body>之间

 

 

 

 

<div id="pic" onmousedown="getmouseposition(event)" onmousemove="movestart(event)" onmouseup="movestop()" onmouseout="movestop()"> </div>

使用说明:head代码区的"background-image"的值为图片的地址,"width""height"为框的大小,"var picWidth""var picHeight"为图片的宽和高,这些参数都可根据您的需要更改.

 

 

 

0 Comments

Fri

27

Feb

2009

131、图片循环渐显示渐暗

131、图片循环渐显示渐暗

脚本说明:

把如下代码加入<body>区域中

<script language="JavaScript">

//var d='true'

var d=0

function JM_fade(ob){

if (d==0) {ob.filters.alpha.opacity+=1} else {ob.filters.alpha.opacity-=1}

if (ob.filters.alpha.opacity==100){d=1;} else if (ob.filters.alpha.opacity==0){d=0}

}

setInterval("JM_fade(u)",10)

</script>

<IMG src="little.jpg" name="u" style="filter:alpha(opacity=0)">

 

0 Comments

Fri

27

Feb

2009

130、飞舞的蝙蝠

130、飞舞的蝙蝠

脚本说明:

把如下代码加入<body>区域中

<script language="JavaScript1.2">

<!--

 

Cupid=new Image();

Cupid.src="bat.gif";  //specify path to bat image

amount=3;  //Number of cupids, minimum must be 3.

Xpos=700;  //cupids x coordinates, in pixel

Ypos=200;  //cupids y coordinates, in pixel

step=0.3; //Animation speed (smaller is slower)

dismissafter=15;  //seconds after which Cupids should disappear, in seconds

 

var ns6=document.getElementById&&!document.all

bats=new Array(3)

if (document.layers){

for (i=0; i < amount; i++)

{document.write("<LAYER NAME=n"+i+" LEFT=0 TOP=-50><a href='http://www.7stk.com'><IMG SRC='"+Cupid.src+"' NAME='nsi' width=69 height=60 border=0></a></LAYER>")}

}

else if (document.all||ns6){

document.write('<div id="out" style="position:absolute;top:0;left:0"><div id="in" style="position:relative">');

for (i=0; i < amount; i++){

if (document.all)

document.write('<a href="http://www.7stk.com"><img src="'+Cupid.src+'" id="msieBats" style="position:absolute;top:-50;left:0" border=0></a>')

else

document.write('<a href="http://www.7stk.com"><img src="'+Cupid.src+'" id="ns6Bats'+i+'" width=69 height=60 style="position:absolute;top:-50;left:0" border=0></a>')

}

document.write('</div></div>');

}

 

yBase=xBase=currStep=a_count=0;

b_count=1;

c_count=2;

d_count=3;

move=1;

if (document.layers||ns6){

yBase=window.innerHeight/3;

xBase=window.innerWidth/6;

if (document.layers)

window.captureEvents(Event.MOUSEMOVE);

 

}

if (document.all){

yBase = window.document.body.offsetHeight/3;

xBase = window.document.body.offsetWidth/6;

}

 

function dismisscupid(){

clearInterval(flycupid)

if (document.layers){

for (i2=0; i2 < amount; i2++){

document.layers['n'+i2].visibility="hide"

}

}

else if (document.all)

document.all.out.style.visibility="hidden"

else if (ns6)

document.getElementById("out").style.visibility="hidden"

}

 

if (document.layers){

for (i=0; i < amount; i++)

document.layers['n'+i].document.images['nsi'].src=Cupid.src

}

else if (document.all){

for (i=0; i < amount; i++)

document.all.msieBats[i].src=Cupid.src

}

else if (ns6){

for (i=0; i < amount; i++)

document.getElementById("ns6Bats"+i).src=Cupid.src

}

 

function Animate(){

a_count+=move;

b_count+=move;

c_count+=move;

currStep+=step;

if (a_count >= bats.length) a_count=0;

if (b_count >= bats.length) b_count=0;

if (c_count >= bats.length) c_count=0;

if (document.layers){

for (i=0; i < amount; i++) {

  var NewL="n"+i

  document.layers[NewL].top = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)

  document.layers[NewL].left =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)

  }

}

 

if (document.all){

for (i=0; i < amount; i++){

  document.all.msieBats[i].style.pixelTop = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)

  document.all.msieBats[i].style.pixelLeft =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)

 }

}

 

if (ns6){

for (i=0; i < amount; i++){

  document.getElementById("ns6Bats"+i).style.top = Ypos+yBase*Math.sin(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/10)

  document.getElementById("ns6Bats"+i).style.left =Xpos+xBase*Math.cos(((currStep)+i*3.7)/4)*Math.cos((currStep+i*35)/62)

 }

}

 

}

flycupid=setInterval('Animate()',30);

setTimeout("dismisscupid()",dismissafter*1000)

//-->

</script>

0 Comments

Fri

27

Feb

2009

129、鼠标放到图片宣传图片

129、鼠标放到图片宣传图片

脚本说明:

把如下代码加入<body>区域中

<SCRIPT>

document.ns = navigator.appName == "Netscape"

function lqdellload()

{

if (navigator.appName == "Netscape")

{document.lqdell.pageY=pageYOffset+window.innerHeight-200;

document.lqdell.pageX=+window.innerWidth-120;

document.lqdell2.pageY=pageYOffset+window.innerHeight-200;

document.lqdell2.pageX=+window.innerWidth-715;

lqdellmove();

}

else

{

lqdell.style.top=document.body.scrollTop+document.body.offsetHeight-200;

lqdell.style.left=document.body.offsetWidth-120;

lqdell2.style.top=document.body.scrollTop+document.body.offsetHeight-200;

lqdell2.style.left=document.body.offsetWidth-715;

lqdellmove();

}

}

function lqdellmove()

{

if(document.ns)

{

document.lqdell.top=pageYOffset+window.innerHeight-200

document.lqdell.left=+window.innerWidth-120;

document.lqdell2.top=pageYOffset+window.innerHeight-200

document.lqdell2.left=+window.innerWidth-715;

setTimeout("lqdellmove();",5)

}

else

{

lqdell.style.top=document.body.scrollTop+document.body.offsetHeight-200;

lqdell.style.left=document.body.offsetWidth-120;

lqdell2.style.top=document.body.scrollTop+document.body.offsetHeight-200;

lqdell2.style.left=document.body.offsetWidth-715;

setTimeout("lqdellmove();",5)

}

}

 

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true)

 

 

function lqdellover()

{

if(navigator.appName == "Netscape"){

document.lqdell2.visibility="show";

}else

{

lqdell2.style.visibility="visible";

}

}

function lqdellout()

{

if(navigator.appName == "Netscape"){

document.lqdell2.visibility="hide";

}else

{

lqdell2.style.visibility="hidden";

}

}

 

if (navigator.appName == "Netscape")

{document.write("<layer id=lqdell top=300 width=64 height=80><a href='http://www.7stk.com' onmouseover=lqdellover() onmouseout=lqdellout() border=0 target=_blank><img src=logo01.gif border=0></a></layer>"

+"<layer id=lqdell2><a href='http://www.7stk.com' onmouseover=lqdellover() onmouseout=lqdellout() border=0 target=_blank><img src=dvb.jpg border=0></a></layer>");

lqdellload()}

else

{

document.write("<div id=lqdell style='position: absolute;width:64;top:300;visibility: visible;z-index: 1'><a href='http://www.7stk.com' onmouseover=lqdellover() onmouseout=lqdellout() target=_blank><img src='logo01.gif' border='0'></a></div>"

+"<div id=lqdell2 style='position: absolute;visibility: hidden;z-index: 10'><a href='http://http://www.7stk.com' onmouseover=lqdellover() onmouseout=lqdellout() target=_blank><img src='dvb.jpg' border='0'></a></div>");

lqdellload()

}

</SCRIPT>

 

0 Comments

Fri

27

Feb

2009

128、鼠标打开半透明图片

128、鼠标打开半透明图片

脚本说明:

把如下代码加入<body>区域中

<STYLE type=text/css>.invisible {

       FILTER: alpha(opacity=0)

}

</STYLE>

 

<SCRIPT language=JavaScript1.2>

<!--

function high(which2){

theobject=which2

highlighting=setInterval("highlightit(theobject)",50)

}

function low(which2){

clearInterval(highlighting)

which2.filters.alpha.opacity=0

}

function highlightit(cur2){

if (cur2.filters.alpha.opacity<100)

cur2.filters.alpha.opacity+=10

else if (window.highlighting)

clearInterval(highlighting)

}

//-->

</SCRIPT>

      <TABLE borderColor=#999999 cellSpacing=8 cellPadding=0 width=302

        border=0><TBODY>

        <TR>

          <TD width=90 background=text1.gif bgColor=#db4d0e

            height=90><A href="http://www.7stk.com/mall/goods/goodsy.htm"><IMG

            class=invisible onmouseover=high(this) onmouseout=low(this)

            src="cloths.jpg" border=0></A></TD>

          <TD width=90 background=text2.gif bgColor=#ff9f07><A

            href="http://www.7stk.com/mall/goods/goodsc.htm"><IMG

            class=invisible onmouseover=high(this) onmouseout=low(this)

            src="watch.jpg" border=0></A></TD>

          <TD width=90 background=text3.gif bgColor=#ff9f07><A

            href="http://www.7stk.com/mall/goods/toy.htm"><IMG class=invisible

            onmouseover=high(this) onmouseout=low(this) src="toy.gif"

            border=0></A></TD></TR>

        <TR>

          <TD background=text4.gif bgColor=#ff9f07><A

            href="http://www.7stk.com/mall/goods/goodsb.htm"><IMG

            class=invisible onmouseover=high(this) onmouseout=low(this)

            src="bag.jpg" border=0></A></TD>

          <TD background=text5.gif bgColor=#a5d523><A

            href="http://www.7stk.com/mall/goods/handset1.htm"><IMG

            class=invisible onmouseover=high(this) onmouseout=low(this)

            src="handset.gif" border=0></A></TD>

          <TD background=text6.gif bgColor=#c56e19><A

            href="http://www.7stk.com/mall/goods/good_others.htm"><IMG

            class=invisible onmouseover=high(this) onmouseout=low(this)

            src="record.gif" border=0></A></TD></TR>

        <TR>

          <TD background=text12.gif bgColor=#ff9f07><A

            href="http://www.7stk.com/mall/goods/towyears.htm"><IMG

            class=invisible onmouseover=high(this) onmouseout=low(this)

            src="towyears.gif" border=0></A></TD>

          <TD background=text8.gif bgColor=#c56e19><A

            href="http://www.7stk.com/mall/goods/good_fish1.htm"><IMG

            class=invisible onmouseover=high(this) onmouseout=low(this) src=""

            border=0></A></TD>

          <TD background=text7.gif bgColor=#c56e19><A

            href="http://www.7stk.com/static/buytic/index.htm"><IMG

            class=invisible onmouseover=high(this) onmouseout=low(this)

            src="piao.gif" border=0></A></TD></TR></TBODY></TABLE>

      

 

0 Comments

Fri

27

Feb

2009

127、图片轮番显示效果

127、图片轮番显示效果

脚本说明:

把如下代码加入<body>区域中

<style type="text/css">

#img1 {position:absolute; width:300px; height:100px; left:220px; top:125px; z-index:1; visibility:hidden;}

#img2 {position:absolute; width:300px; height:100px; left:220px; top:125px; z-index:2}

</style>

 

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var ie5=(document.getElementById && document.all);

var ns6=(document.getElementById && !document.all);

 

nPlus = 5   //the % of fading for each step

speed = 50  //the speed

 

// You don't have to edit below this line

nOpac = 100

function FadeImg(){

    if(document.getElementById){

        document.getElementById('img1').style.visibility="visible";

        imgs = document.getElementById('img2');

       opacity = nOpac+nPlus;

       nOpac = opacity;

       setTimeout('FadeImg()',speed);

    if(opacity>100 || opacity<0){

        nPlus=-nPlus;

    }

    if(ie5){

        imgs.style.filter="alpha(opacity=0)";

       imgs.filters.alpha.opacity = opacity;

    }

    if(ns6){

        imgs.style.MozOpacity = 0 + '%';

       imgs.style.MozOpacity = opacity + '%';

    }

  }

}

onload=FadeImg;

//  End -->

</script>

<div id="img1">

  <img src="img1.gif" border=0 width=300 height=100>

</div>

<div id="img2">

  <img src="img2.gif" border=0 width=300 height=100>

</div>

0 Comments

Fri

27

Feb

2009

126、图片的明暗变化

126、图片的明暗变化

脚本说明:

把如下代码加入<body>区域中:

<script>

function hover(id,opacity){

       document.all[id].filters.alpha.opacity = opacity;

}

 

function opacify(id,delay,start,stop){

    opacify(id,delay,start,stop,0);

    }

   

function opacify(id,delay,start,stop,offset){

    offset *= 1000;

    if (document.all){

        hover(id,start);

        setTimeout("fadeOut('"+id +"',"+ delay +","+ start +","+stop +")",offset);

        }

    }   

 

function fadeOut(id,delay,start,stop){

    if (document.all[id].filters.alpha.opacity > stop){

        document.all[id].filters.alpha.opacity -= 2;

        setTimeout("fadeOut('"+ id +"',"+ delay +","+ start +","+ stop +")",delay);

        }

    else {

        setTimeout("fadeIn('"+ id +"',"+ delay +","+ start +","+ stop +")",delay);

        }

    }  

   

function fadeIn(id,delay,start,stop){

    if (document.all[id].filters.alpha.opacity < start){

        document.all[id].filters.alpha.opacity += 2;

        setTimeout("fadeIn('"+ id +"',"+ delay +","+ start +","+ stop +")",delay);

        }

    else {

        setTimeout("fadeOut('"+ id +"',"+ delay +","+ start +","+ stop +")",delay);

        }

    }     

   

 

</script>

<img src="anarchos_button.jpg" name="imageName" onLoad="opacify('imageName',22,100,20)" style="filter:alpha(opacity=100);" alt="blah" />

 

 

 

0 Comments

Fri

27

Feb

2009

125、蜜蜂跟随花盆采蜜

125、蜜蜂跟随花盆采蜜

脚本说明:

第一步:把如下代码加入<body>区域中

<SCRIPT language=JavaScript>

function DynLayer(id,nestref,frame) {

       if (!is.ns5 && !DynLayer.set && !frame) DynLayerInit()

       this.frame = frame || self

       if (is.ns) {

              if (is.ns4) {

                     if (!frame) {

                            if (!nestref) var nestref = DynLayer.nestRefArray[id]

                            if (!DynLayerTest(id,nestref)) return

                            this.css = (nestref)? eval("document."+nestref+".document."+id) : document.layers[id]

                     }

                     else this.css = (nestref)? eval("frame.document."+nestref+".document."+id) : frame.document.layers[id]

                     this.elm = this.event = this.css

                     this.doc = this.css.document

              }

              else if (is.ns5) {

                     this.elm = document.getElementById(id)

                     this.css = this.elm.style

                     this.doc = document

              }

              this.x = this.css.left

              this.y = this.css.top

              this.w = this.css.clip.width

              this.h = this.css.clip.height

       }

       else if (is.ie) {

              this.elm = this.event = this.frame.document.all[id]

              this.css = this.frame.document.all[id].style

              this.doc = document

              this.x = this.elm.offsetLeft

              this.y = this.elm.offsetTop

              this.w = (is.ie4)? this.css.pixelWidth : this.elm.offsetWidth

              this.h = (is.ie4)? this.css.pixelHeight : this.elm.offsetHeight

       }

       this.id = id

       this.nestref = nestref

       this.obj = id + "DynLayer"

       eval(this.obj + "=this")

}

function DynLayerMoveTo(x,y) {

       if (x!=null) {

              this.x = x

              if (is.ns) this.css.left = this.x

              else this.css.pixelLeft = this.x

       }

       if (y!=null) {

              this.y = y

              if (is.ns) this.css.top = this.y

              else this.css.pixelTop = this.y

       }

}

function DynLayerMoveBy(x,y) {

       this.moveTo(this.x+x,this.y+y)

}

function DynLayerShow() {

       this.css.visibility = (is.ns4)? "show" : "visible"

}

function DynLayerHide() {

       this.css.visibility = (is.ns4)? "hide" : "hidden"

}

DynLayer.prototype.moveTo = DynLayerMoveTo

DynLayer.prototype.moveBy = DynLayerMoveBy

DynLayer.prototype.show = DynLayerShow

DynLayer.prototype.hide = DynLayerHide

DynLayerTest = new Function('return true')

 

// DynLayerInit Function

function DynLayerInit(nestref) {

       if (!DynLayer.set) DynLayer.set = true

       if (is.ns) {

              if (nestref) ref = eval('document.'+nestref+'.document')

              else {nestref = ''; ref = document;}

              for (var i=0; i<ref.layers.length; i++) {

                     var divname = ref.layers[i].name

                     DynLayer.nestRefArray[divname] = nestref

                     var index = divname.indexOf("Div")

                     if (index > 0) {

                            eval(divname.substr(0,index)+' = new DynLayer("'+divname+'","'+nestref+'")')

                     }

                     if (ref.layers[i].document.layers.length > 0) {

                            DynLayer.refArray[DynLayer.refArray.length] = (nestref=='')? ref.layers[i].name : nestref+'.document.'+ref.layers[i].name

                     }

              }

              if (DynLayer.refArray.i < DynLayer.refArray.length) {

                     DynLayerInit(DynLayer.refArray[DynLayer.refArray.i++])

              }

       }

       else if (is.ie) {

              for (var i=0; i<document.all.tags("DIV").length; i++) {

                     var divname = document.all.tags("DIV")[i].id

                     var index = divname.indexOf("Div")

                     if (index > 0) {

                            eval(divname.substr(0,index)+' = new DynLayer("'+divname+'")')

                     }

              }

       }

       return true

}

DynLayer.nestRefArray = new Array()

DynLayer.refArray = new Array()

DynLayer.refArray.i = 0

DynLayer.set = false

 

// Slide Methods

function DynLayerSlideTo(endx,endy,inc,speed,fn) {

       if (endx==null) endx = this.x

       if (endy==null) endy = this.y

       var distx = endx-this.x

       var disty = endy-this.y

       this.slideStart(endx,endy,distx,disty,inc,speed,fn)

}

function DynLayerSlideBy(distx,disty,inc,speed,fn) {

       var endx = this.x + distx

       var endy = this.y + disty

       this.slideStart(endx,endy,distx,disty,inc,speed,fn)

}

function DynLayerSlideStart(endx,endy,distx,disty,inc,speed,fn) {

       if (this.slideActive) return

       if (!inc) inc = 10

       if (!speed) speed = 20

       var num = Math.sqrt(Math.pow(distx,2) + Math.pow(disty,2))/inc

       if (num==0) return

       var dx = distx/num

       var dy = disty/num

       if (!fn) fn = null

       this.slideActive = true

       this.slide(dx,dy,endx,endy,num,1,speed,fn)

}

function DynLayerSlide(dx,dy,endx,endy,num,i,speed,fn) {

       if (!this.slideActive) return

       if (i++ < num) {

              this.moveBy(dx,dy)

              this.onSlide()

              if (this.slideActive) setTimeout(this.obj+".slide("+dx+","+dy+","+endx+","+endy+","+num+","+i+","+speed+",\""+fn+"\")",speed)

              else this.onSlideEnd()

       }

       else {

              this.slideActive = false

              this.moveTo(endx,endy)

              this.onSlide()

              this.onSlideEnd()

              eval(fn)

       }

}

function DynLayerSlideInit() {}

DynLayer.prototype.slideInit = DynLayerSlideInit

DynLayer.prototype.slideTo = DynLayerSlideTo

DynLayer.prototype.slideBy = DynLayerSlideBy

DynLayer.prototype.slideStart = DynLayerSlideStart

DynLayer.prototype.slide = DynLayerSlide

DynLayer.prototype.onSlide = new Function()

DynLayer.prototype.onSlideEnd = new Function()

 

// Clip Methods

function DynLayerClipInit(clipTop,clipRight,clipBottom,clipLeft) {

       if (is.ie) {

              if (arguments.length==4) this.clipTo(clipTop,clipRight,clipBottom,clipLeft)

              else if (is.ie4) this.clipTo(0,this.css.pixelWidth,this.css.pixelHeight,0)

       }

}

function DynLayerClipTo(t,r,b,l) {

       if (t==null) t = this.clipValues('t')

       if (r==null) r = this.clipValues('r')

       if (b==null) b = this.clipValues('b')

       if (l==null) l = this.clipValues('l')

       if (is.ns) {

              this.css.clip.top = t

              this.css.clip.right = r

              this.css.clip.bottom = b

              this.css.clip.left = l

       }

       else if (is.ie) this.css.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)"

}

function DynLayerClipBy(t,r,b,l) {

       this.clipTo(this.clipValues('t')+t,this.clipValues('r')+r,this.clipValues('b')+b,this.clipValues('l')+l)

}

function DynLayerClipValues(which) {

       if (is.ie) var clipv = this.css.clip.split("rect(")[1].split(")")[0].split("px")

       if (which=="t") return (is.ns)? this.css.clip.top : Number(clipv[0])

       if (which=="r") return (is.ns)? this.css.clip.right : Number(clipv[1])

       if (which=="b") return (is.ns)? this.css.clip.bottom : Number(clipv[2])

       if (which=="l") return (is.ns)? this.css.clip.left : Number(clipv[3])

}

DynLayer.prototype.clipInit = DynLayerClipInit

DynLayer.prototype.clipTo = DynLayerClipTo

DynLayer.prototype.clipBy = DynLayerClipBy

DynLayer.prototype.clipValues = DynLayerClipValues

 

// Write Method

function DynLayerWrite(html) {

       if (is.ns) {

              this.doc.open()

              this.doc.write(html)

              this.doc.close()

       }

       else if (is.ie) {

              this.event.innerHTML = html

       }

}

DynLayer.prototype.write = DynLayerWrite

 

// BrowserCheck Object

function BrowserCheck() {

       var b = navigator.appName

       if (b=="Netscape") this.b = "ns"

       else if (b=="Microsoft Internet Explorer") this.b = "ie"

       else this.b = b

       this.version = navigator.appVersion

       this.v = parseInt(this.version)

       this.ns = (this.b=="ns" && this.v>=4)

       this.ns4 = (this.b=="ns" && this.v==4)

       this.ns5 = (this.b=="ns" && this.v==5)

       this.ie = (this.b=="ie" && this.v>=4)

       this.ie4 = (this.version.indexOf('MSIE 4')>0)

       this.ie5 = (this.version.indexOf('MSIE 5')>0)

       this.min = (this.ns||this.ie)

}

is = new BrowserCheck()

 

// CSS Function

function css(id,left,top,width,height,color,vis,z,other) {

       if (id=="START") return '<STYLE TYPE="text/css">\n'

       else if (id=="END") return '</STYLE>'

       var str = (left!=null && top!=null)? '#'+id+' {position:absolute; left:'+left+'px; top:'+top+'px;' : '#'+id+' {position:relative;'

       if (arguments.length>=4 && width!=null) str += ' width:'+width+'px;'

       if (arguments.length>=5 && height!=null) {

              str += ' height:'+height+'px;'

              if (arguments.length<9 || other.indexOf('clip')==-1) str += ' clip:rect(0px '+width+'px '+height+'px 0px);'

       }

       if (arguments.length>=6 && color!=null) str += (is.ns)? ' layer-background-color:'+color+';' : ' background-color:'+color+';'

       if (arguments.length>=7 && vis!=null) str += ' visibility:'+vis+';'

       if (arguments.length>=8 && z!=null) str += ' z-index:'+z+';'

       if (arguments.length==9 && other!=null) str += ' '+other

       str += '}\n'

       return str

}

function writeCSS(str,showAlert) {

       str = css('START')+str+css('END')

       document.write(str)

       if (showAlert) alert(str)

}

 

</SCRIPT><SCRIPT language=JavaScript>

function Drag() {

       this.obj = null

       this.array = new Array()

       this.dropTargets = new Array()

       this.active = false

       this.offsetX = 0

       this.offsetY = 0

       this.zIndex = 0

       this.resort = true

       this.add = DragAdd

       this.addTargets = DragAddTargets

       this.checkTargets = DragCheckTargets

       this.targetHit == null

       this.remove = DragRemove

       this.setGrab = DragSetGrab

       this.mouseDown = DragMouseDown

       this.mouseMove = DragMouseMove

       this.mouseUp = DragMouseUp

       this.onDragStart = new Function()

       this.onDragMove = new Function()

       this.onDragEnd = new Function()

       this.onDragDrop = new Function()

}

function DragAdd() {

       for (var i=0; i<arguments.length; i++) {

              var l = this.array.length

              this.array[l] = arguments[i]

              this.array[l].dragGrab = new Array(0,this.array[l].w,this.array[l].h,0)

              this.zIndex += 1

       }

}

function DragAddTargets() {

       for (var i=0; i<arguments.length; i++) {

              var l = this.dropTargets.length

              this.dropTargets[l] = arguments[i]

              this.dropTargets[l].dragGrab = new Array(0,this.dropTargets[l].w,this.dropTargets[l].h,0)

       }

}

function DragSetGrab(dynlayer,top,right,bottom,left) {

       dynlayer.dragGrab = new Array(top,right,bottom,left)

}

function DragRemove() {

       for (var i=0; i<arguments.length; i++) {

              for (var j=0; j<this.array.length; j++) {

                     if (this.array[j]==arguments[i]) {

                            for (var k=j;k<=this.array.length-2;k++) this.array[k] = this.array[k+1]

                            this.array[this.array.length-1] = null

                            this.array.length -= 1

                            break

                     }

              }

       }

}

function DragMouseDown(x,y) {

       for (var i=this.array.length-1;i>=0;i--) {

              var lyr = this.array[i]

              if (checkWithinLayer(x,y,lyr)) {

                     this.obj = this.array[i]

                     this.offsetX = x-this.obj.x

                     this.offsetY = y-this.obj.y

                     this.active = true

                     break

              }

       }

       if (!this.active) return false

       else {

              if (this.resort) {

                     this.obj.css.zIndex = this.zIndex++

                     for (var j=i;j<=this.array.length-2;j++) this.array[j] = this.array[j+1]

                     this.array[this.array.length-1] = this.obj

              }

              this.onDragStart(x,y)

              return true

       }

}

function DragMouseMove(x,y) {

       if (!this.active) return false

       else {

              this.obj.moveTo(x-this.offsetX,y-this.offsetY)

              this.onDragMove(x,y)

              return true

       }

}

function DragMouseUp(x,y) {

       if (!this.active) return false

       else {

              this.active = false

              if (this.checkTargets()) this.onDragDrop()

              this.onDragEnd(x,y)

              return true

       }

}

function DragCheckTargets() {

       for (i in this.dropTargets) {

              var lyr = this.dropTargets[i]

              if (checkWithinLayer(lyr.x,lyr.y,this.obj) ||

              checkWithinLayer(lyr.x+lyr.w,lyr.y,this.obj) ||

              checkWithinLayer(lyr.x,lyr.y+lyr.h,this.obj) ||

              checkWithinLayer(lyr.x+lyr.w,lyr.y+lyr.h,this.obj) ||

              checkWithinLayer(this.obj.x,this.obj.y,lyr) ||

              checkWithinLayer(this.obj.x+this.obj.w,this.obj.y,lyr) ||

              checkWithinLayer(this.obj.x,this.obj.y+this.obj.h,lyr) ||

              checkWithinLayer(this.obj.x+this.obj.w,this.obj.y+this.obj.h,lyr)) {

                     this.targetHit = lyr

                     return true

              }

       }

       return false

}

 

function checkWithin(x,y,left,right,top,bottom) {

       if (x>=left && x<right && y>=top && y<bottom) return true

       else return false

}

function checkWithinLayer(x,y,lyr) {

       if (checkWithin(x,y,lyr.x+lyr.dragGrab[3],lyr.x+lyr.dragGrab[1],lyr.y+lyr.dragGrab[0],lyr.y+lyr.dragGrab[2])) return true

       else return false

}

 

// automatically define the default "drag" Drag Object

drag = new Drag()

 

</SCRIPT><SCRIPT language=JavaScript>

<!--

 

for (var i=0;i<=4;i++) {

       eval("bee_r"+i+" = new Image()")

       eval("bee_r"+i+".src = 'bee-r"+i+".gif'")

       eval("bee_l"+i+" = new Image()")

       eval("bee_l"+i+".src = 'bee-l"+i+".gif'")

}

 

 

function init() {

       flower1 = new DynLayer('flower1Div')

       bee1 = new Bee('bee1Bee',null,flower1)

      

       drag.resort = false

       drag.add(flower1)

 

       document.onmousedown = mouseDown

       document.onmousemove = mouseMove

       document.onmouseup = mouseUp

       if (is.ns) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)

}

 

function mouseDown(e) {

       if ((is.ns && e.which!=1) || (is.ie && event.button!=1)) return true

       var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft

       var y = (is.ns)? e.pageY : event.y+document.body.scrollTop

       if (drag.mouseDown(x,y)) {

              return false

       }

       else return true

}

function mouseMove(e) {

       var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft

       var y = (is.ns)? e.pageY : event.y+document.body.scrollTop

       if (drag.mouseMove(x,y)) {

              bee1.startFly()

              return false

       }

       else return true

}

function mouseUp(e) {

       var x = (is.ns)? e.pageX : event.x+document.body.scrollLeft

       var y = (is.ns)? e.pageY : event.y+document.body.scrollTop

       if (drag.mouseUp()) {

              return false

       }

       else return true

}

 

function Bee(id,nestref,flower) {

       this.dynlayer = DynLayer

       this.dynlayer(id,nestref)

       this.i1 = new DynLayer(id+'i1',id)

       this.i2 = new DynLayer(id+'i2',id)

       this.flower = flower

       this.flyactive = false

       this.animactive = false

       this.animcount = 0

       this.direction = "r"

       this.animdir = 1

       this.amplitude = 35

       this.angleinc = 10

       this.hoverangle = 0

       this.centerX = this.x

       this.centerY = this.y

       this.startFly = BeeStartFly

       this.fly = BeeFly

       this.animate = BeeAnimate

       this.land = BeeLand

}

Bee.prototype = DynLayer.prototype

function BeeStartFly() {

       if (!this.flyactive) {

              var distx = Math.abs(this.x+8-this.flower.x)

              var disty = Math.abs(this.y+8-this.flower.y)

              if (Math.sqrt(Math.pow(distx,2)+Math.pow(disty,2)) > 35) {

                     this.slideActive = false

                     this.animactive = true

                     this.animate()

                     this.flyactive = true

                     this.fly()

              }

       }

}

function BeeFly() {

       if (this.flyactive) {

              var distx = Math.abs(this.x+8-this.flower.x)

              var disty = Math.abs(this.y+8-this.flower.y)

              if (Math.sqrt(Math.pow(distx,2)+Math.pow(disty,2)) > 40 || distx > 15) {

                     var angle = Math.floor(Math.atan(disty/distx)*180/Math.PI)

                     if (distx==0 && disty==0) angle = 0

                     if (this.flower.x>=this.x+8) {

                            if (this.flower.y<=this.y+8) angle = angle    // 0 to 90

                            else angle = 360-angle                // 270 to 360

                            this.direction = "r"

                     }

                     else {

                            if (this.flower.y<=this.y+8) angle = 180-angle    // 90 to 180

                            else angle = 180+angle           // 180 to 270

                            this.direction = "l"

                     }

                     this.centerX += 3*Math.cos(angle*Math.PI/180)

                     this.centerY -= 3*Math.sin(angle*Math.PI/180)

                     this.hoverangle += this.angleinc

                     this.moveTo(this.centerX,this.centerY-this.amplitude*Math.sin(this.hoverangle*Math.PI/180))

                     setTimeout(this.obj+'.fly()',20)

              }

              else {

                     this.flyactive = false

                     this.slideTo(this.flower.x+3,this.flower.y-5,2,20,this.obj+".land()")

              }

       }

}

function BeeAnimate() {

       if (this.animactive) {

              this.i1.doc.images[this.id+'i1Img'].src = eval('bee_'+this.direction+Math.floor(5*Math.random())+'.src')

              this.i2.doc.images[this.id+'i2Img'].src = eval('bee_'+this.direction+Math.floor(5*Math.random())+'.src')

              setTimeout(this.obj+'.animate()',20)

       }

}

function BeeLand() {

       this.centerX = this.x

       this.centerY = this.y

       this.hoverangle = 0

       if (!this.flyactive) {

              this.i1.doc.images[this.id+'i1Img'].src = bee_r1.src

              this.i2.doc.images[this.id+'i2Img'].src = bee_r1.src

              this.animactive = 0

       }

}

 

//-->

</SCRIPT><STYLE type=text/css>#bee1Bee {   LEFT: 100px; WIDTH: 16px; POSITION: absolute; TOP: 100px; HEIGHT: 16px}#bee1Beei1 {       LEFT: 0px; WIDTH: 16px; POSITION: absolute; TOP: 0px; HEIGHT: 16px}#bee1Beei2 {    LEFT: 0px; WIDTH: 16px; POSITION: absolute; TOP: 0px; HEIGHT: 16px}#flower1Div {     LEFT: 120px; WIDTH: 45px; POSITION: absolute; TOP: 120px; HEIGHT: 72px}</STYLE><DIV id=flower1Div><IMG height=72 src="flower.gif" width=45></DIV><DIV id=bee1Bee><DIV id=bee1Beei1><IMG height=16 src="bee-r1.gif" width=16 name=bee1Beei1Img></DIV><DIV id=bee1Beei2><IMG height=16 src="bee-r1.gif" width=16 name=bee1Beei2Img></DIV></DIV>

 

 

第二步:把<body>中的内容改为:

<body onload=init()>

 

0 Comments

Fri

27

Feb

2009

124、天体运行规律

124、天体运行规律

脚本说明:

第一步:把如下代码加入<body>区域中

<SCRIPT language=JavaScript>

function DynLayer(id,nestref,frame) {

       if (!is.ns5 && !DynLayer.set && !frame) DynLayerInit()

       this.frame = frame || self

       if (is.ns) {

              if (is.ns4) {

                     if (!frame) {

                            if (!nestref) var nestref = DynLayer.nestRefArray[id]

                            if (!DynLayerTest(id,nestref)) return

                            this.css = (nestref)? eval("document."+nestref+".document."+id) : document.layers[id]

                     }

                     else this.css = (nestref)? eval("frame.document."+nestref+".document."+id) : frame.document.layers[id]

                     this.elm = this.event = this.css

                     this.doc = this.css.document

              }

              else if (is.ns5) {

                     this.elm = document.getElementById(id)

                     this.css = this.elm.style

                     this.doc = document

              }

              this.x = this.css.left

              this.y = this.css.top

              this.w = this.css.clip.width

              this.h = this.css.clip.height

       }

       else if (is.ie) {

              this.elm = this.event = this.frame.document.all[id]

              this.css = this.frame.document.all[id].style

              this.doc = document

              this.x = this.elm.offsetLeft

              this.y = this.elm.offsetTop

              this.w = (is.ie4)? this.css.pixelWidth : this.elm.offsetWidth

              this.h = (is.ie4)? this.css.pixelHeight : this.elm.offsetHeight

       }

       this.id = id

       this.nestref = nestref

       this.obj = id + "DynLayer"

       eval(this.obj + "=this")

}

function DynLayerMoveTo(x,y) {

       if (x!=null) {

              this.x = x

              if (is.ns) this.css.left = this.x

              else this.css.pixelLeft = this.x

       }

       if (y!=null) {

              this.y = y

              if (is.ns) this.css.top = this.y

              else this.css.pixelTop = this.y

       }

}

function DynLayerMoveBy(x,y) {

       this.moveTo(this.x+x,this.y+y)

}

function DynLayerShow() {

       this.css.visibility = (is.ns4)? "show" : "visible"

}

function DynLayerHide() {

       this.css.visibility = (is.ns4)? "hide" : "hidden"

}

DynLayer.prototype.moveTo = DynLayerMoveTo

DynLayer.prototype.moveBy = DynLayerMoveBy

DynLayer.prototype.show = DynLayerShow

DynLayer.prototype.hide = DynLayerHide

DynLayerTest = new Function('return true')

 

// DynLayerInit Function

function DynLayerInit(nestref) {

       if (!DynLayer.set) DynLayer.set = true

       if (is.ns) {

              if (nestref) ref = eval('document.'+nestref+'.document')

              else {nestref = ''; ref = document;}

              for (var i=0; i<ref.layers.length; i++) {

                     var divname = ref.layers[i].name

                     DynLayer.nestRefArray[divname] = nestref

                     var index = divname.indexOf("Div")

                     if (index > 0) {

                            eval(divname.substr(0,index)+' = new DynLayer("'+divname+'","'+nestref+'")')

                     }

                     if (ref.layers[i].document.layers.length > 0) {

                            DynLayer.refArray[DynLayer.refArray.length] = (nestref=='')? ref.layers[i].name : nestref+'.document.'+ref.layers[i].name

                     }

              }

              if (DynLayer.refArray.i < DynLayer.refArray.length) {

                     DynLayerInit(DynLayer.refArray[DynLayer.refArray.i++])

              }

       }

       else if (is.ie) {

              for (var i=0; i<document.all.tags("DIV").length; i++) {

                     var divname = document.all.tags("DIV")[i].id

                     var index = divname.indexOf("Div")

                     if (index > 0) {

                            eval(divname.substr(0,index)+' = new DynLayer("'+divname+'")')

                     }

              }

       }

       return true

}

DynLayer.nestRefArray = new Array()

DynLayer.refArray = new Array()

DynLayer.refArray.i = 0

DynLayer.set = false

 

// Slide Methods

function DynLayerSlideTo(endx,endy,inc,speed,fn) {

       if (endx==null) endx = this.x

       if (endy==null) endy = this.y

       var distx = endx-this.x

       var disty = endy-this.y

       this.slideStart(endx,endy,distx,disty,inc,speed,fn)

}

function DynLayerSlideBy(distx,disty,inc,speed,fn) {

       var endx = this.x + distx

       var endy = this.y + disty

       this.slideStart(endx,endy,distx,disty,inc,speed,fn)

}

function DynLayerSlideStart(endx,endy,distx,disty,inc,speed,fn) {

       if (this.slideActive) return

       if (!inc) inc = 10

       if (!speed) speed = 20

       var num = Math.sqrt(Math.pow(distx,2) + Math.pow(disty,2))/inc

       if (num==0) return

       var dx = distx/num

       var dy = disty/num

       if (!fn) fn = null

       this.slideActive = true

       this.slide(dx,dy,endx,endy,num,1,speed,fn)

}

function DynLayerSlide(dx,dy,endx,endy,num,i,speed,fn) {

       if (!this.slideActive) return

       if (i++ < num) {

              this.moveBy(dx,dy)

              this.onSlide()

              if (this.slideActive) setTimeout(this.obj+".slide("+dx+","+dy+","+endx+","+endy+","+num+","+i+","+speed+",\""+fn+"\")",speed)

              else this.onSlideEnd()

       }

       else {

              this.slideActive = false

              this.moveTo(endx,endy)

              this.onSlide()

              this.onSlideEnd()

              eval(fn)

       }

}

function DynLayerSlideInit() {}

DynLayer.prototype.slideInit = DynLayerSlideInit

DynLayer.prototype.slideTo = DynLayerSlideTo

DynLayer.prototype.slideBy = DynLayerSlideBy

DynLayer.prototype.slideStart = DynLayerSlideStart

DynLayer.prototype.slide = DynLayerSlide

DynLayer.prototype.onSlide = new Function()

DynLayer.prototype.onSlideEnd = new Function()

 

// Clip Methods

function DynLayerClipInit(clipTop,clipRight,clipBottom,clipLeft) {

       if (is.ie) {

              if (arguments.length==4) this.clipTo(clipTop,clipRight,clipBottom,clipLeft)

              else if (is.ie4) this.clipTo(0,this.css.pixelWidth,this.css.pixelHeight,0)

       }

}

function DynLayerClipTo(t,r,b,l) {

       if (t==null) t = this.clipValues('t')

       if (r==null) r = this.clipValues('r')

       if (b==null) b = this.clipValues('b')

       if (l==null) l = this.clipValues('l')

       if (is.ns) {

              this.css.clip.top = t

              this.css.clip.right = r

              this.css.clip.bottom = b

              this.css.clip.left = l

       }

       else if (is.ie) this.css.clip = "rect("+t+"px "+r+"px "+b+"px "+l+"px)"

}

function DynLayerClipBy(t,r,b,l) {

       this.clipTo(this.clipValues('t')+t,this.clipValues('r')+r,this.clipValues('b')+b,this.clipValues('l')+l)

}

function DynLayerClipValues(which) {

       if (is.ie) var clipv = this.css.clip.split("rect(")[1].split(")")[0].split("px")

       if (which=="t") return (is.ns)? this.css.clip.top : Number(clipv[0])

       if (which=="r") return (is.ns)? this.css.clip.right : Number(clipv[1])

       if (which=="b") return (is.ns)? this.css.clip.bottom : Number(clipv[2])

       if (which=="l") return (is.ns)? this.css.clip.left : Number(clipv[3])

}

DynLayer.prototype.clipInit = DynLayerClipInit

DynLayer.prototype.clipTo = DynLayerClipTo

DynLayer.prototype.clipBy = DynLayerClipBy

DynLayer.prototype.clipValues = DynLayerClipValues

 

// Write Method

function DynLayerWrite(html) {

       if (is.ns) {

              this.doc.open()

              this.doc.write(html)

              this.doc.close()

       }

       else if (is.ie) {

              this.event.innerHTML = html

       }

}

DynLayer.prototype.write = DynLayerWrite

 

// BrowserCheck Object

function BrowserCheck() {

       var b = navigator.appName

       if (b=="Netscape") this.b = "ns"

       else if (b=="Microsoft Internet Explorer") this.b = "ie"

       else this.b = b

       this.version = navigator.appVersion

       this.v = parseInt(this.version)

       this.ns = (this.b=="ns" && this.v>=4)

       this.ns4 = (this.b=="ns" && this.v==4)

       this.ns5 = (this.b=="ns" && this.v==5)

       this.ie = (this.b=="ie" && this.v>=4)

       this.ie4 = (this.version.indexOf('MSIE 4')>0)

       this.ie5 = (this.version.indexOf('MSIE 5')>0)

       this.min = (this.ns||this.ie)

}

is = new BrowserCheck()

 

// CSS Function

function css(id,left,top,width,height,color,vis,z,other) {

       if (id=="START") return '<STYLE TYPE="text/css">\n'

       else if (id=="END") return '</STYLE>'

       var str = (left!=null && top!=null)? '#'+id+' {position:absolute; left:'+left+'px; top:'+top+'px;' : '#'+id+' {position:relative;'

       if (arguments.length>=4 && width!=null) str += ' width:'+width+'px;'

       if (arguments.length>=5 && height!=null) {

              str += ' height:'+height+'px;'

              if (arguments.length<9 || other.indexOf('clip')==-1) str += ' clip:rect(0px '+width+'px '+height+'px 0px);'

       }

       if (arguments.length>=6 && color!=null) str += (is.ns)? ' layer-background-color:'+color+';' : ' background-color:'+color+';'

       if (arguments.length>=7 && vis!=null) str += ' visibility:'+vis+';'

       if (arguments.length>=8 && z!=null) str += ' z-index:'+z+';'

       if (arguments.length==9 && other!=null) str += ' '+other

       str += '}\n'

       return str

}

function writeCSS(str,showAlert) {

       str = css('START')+str+css('END')

       document.write(str)

       if (showAlert) alert(str)

}

 

</SCRIPT>

 

<SCRIPT language=JavaScript>

function Circle(dynlayer,name) {

       this.dynlayer = dynlayer

       this.name = name

       this.play = CirclePlay

       this.slide = CircleSlide

       this.pause = CirclePause

       this.stop = CircleStop

}

function CirclePlay(radius,angleinc,angle,endangle,speed,fn) {

       if (this.active) return

       if (!this.paused) {

              this.radius = radius

              this.angleinc = angleinc

              this.angle = angle

              this.endangle = endangle

              this.speed = speed

              this.fn = fn

              this.centerX = eval(this.dynlayer+'.x') - this.radius*Math.cos(this.angle*Math.PI/180)

              this.centerY = eval(this.dynlayer+'.y') + this.radius*Math.sin(this.angle*Math.PI/180)

              if (this.endangle!=null) {

                     this.angleinc = Math.abs(this.angleinc)

                     if (this.endangle<this.angle) this.angleinc *= -1

              }

       }

       this.active = true

       this.paused = false

       eval(this.dynlayer+'.'+this.name+'.slide()')

}

function CircleSlide() {

       if (this.active && (this.endangle==null || Math.abs(this.angleinc)<Math.abs(this.endangle-this.angle))) {

              this.angle += this.angleinc

              var x = this.centerX + this.radius*Math.cos(this.angle*Math.PI/180)

              var y = this.centerY - this.radius*Math.sin(this.angle*Math.PI/180)

              eval(this.dynlayer+'.moveTo('+x+','+y+')')

              setTimeout(this.dynlayer+'.'+this.name+'.slide()',this.speed)

       }

       else {

              if (this.endangle!=null) {

                     var x = Math.round(this.centerX + this.radius*Math.cos(this.endangle*Math.PI/180))

                     var y = Math.round(this.centerY - this.radius*Math.sin(this.endangle*Math.PI/180))

                     eval(this.dynlayer+'.moveTo('+x+','+y+')')

              }

              if (!this.paused) {

                     this.active = false

                     eval(this.fn)

              }

       }

}

function CirclePause() {

       if (this.active) {

              this.active = false

              this.paused = true

       }

}

function CircleStop() {

       this.active = false

       this.paused = false

}

 

</SCRIPT>

 

<SCRIPT language=JavaScript>

<!--

 

function init() {

earth = new DynLayer("earthDiv")

earth.circle = new Circle("earth","circle")

moon = new DynLayer("moonDiv")

moon.circle = new Circle("moon","circle")

earth.circle.play(125,1.5,0,null,20)

moon.circle.play(40,4,0,null,20)

}

//-->

</SCRIPT>

 

 

<DIV id=sun

style="LEFT: 214px; WIDTH: 71px; POSITION: absolute; TOP: 174px"><IMG height=71

src="sun.gif" width=71 border=0> </DIV>

<DIV id=earthDiv

style="LEFT: 325px; WIDTH: 100px; POSITION: absolute; TOP: 160px; HEIGHT: 100px">

<DIV id=earthImg

style="LEFT: 34px; WIDTH: 32px; POSITION: absolute; TOP: 34px; HEIGHT: 32px"><IMG

height=32 src="earth.gif" width=32 border=0> </DIV>

<DIV id=moonDiv

style="LEFT: 80px; WIDTH: 20px; POSITION: absolute; TOP: 40px; HEIGHT: 20px"><IMG

height=20 src="moon.gif" width=20 border=0> </DIV></DIV>

 

 

 

 

第二步:把<body>中的内容改为:

<body  background=stars.gif onload=init()>

 

0 Comments

Fri

27

Feb

2009

123、小球的跳动

123、小球的跳动

脚本说明:

第一步:把如下代码加入<body>区域中

<SCRIPT language=JavaScript>

<!--

 

// Note: this was written a long time ago

 

ball_stationary = new Image()

ball_stationary.src = "ball-stationary.gif"

ball_animated = new Image()

ball_animated.src = "ball-animated.gif"

 

ns4 = (document.layers) ? 1:0

ie4 = (document.all) ? 1:0

 

function parabola(obj,type,xDistance,yDistance,xDirection,yDirection,xinc,speed) {

       if (ns4) this.obj = document.layers[obj]

       if (ie4) this.obj = document.all[obj].style

       this.type = type

       this.xDistance = xDistance

       this.yDistance = yDistance

       this.xDirection = xDirection

       this.yDirection = yDirection

       this.xinc = xinc

       this.speed = speed

       this.active = 0

       this.i = 0

       this.multiplier = this.yDistance/Math.pow(this.xDistance/this.type,2)

       this.startX = parseInt(this.obj.left)

       this.startY = parseInt(this.obj.top)

       this.x = this.startX

       this.y = this.startY

       // the decreasing values used for the arcing parabola

       // represents how much less the ball will bounce each time

       this.xdec = 25

       this.ydec = 50

       this.move = moveParabola

}

 

function moveParabola() {

       this.i += this.xDirection*this.xinc

       this.x = this.startX + this.i

       this.obj.left = this.x

       if (this.type == 1) {

              this.y = this.startY + this.yDirection*this.multiplier*Math.pow(Math.abs(this.i),2)

              this.obj.top = this.y

       }

       if (this.type == 2) {

              this.y = this.startY - this.yDirection*this.multiplier*Math.pow(this.xDistance/2-Math.abs(this.i),2) + this.yDirection*this.yDistance

              this.obj.top = this.y

       }

}

 

function init() {

       ball = new parabola("balldiv",1,125,250,1,1,3,20)

}

 

// this is the dropping parabola that first starts the animation

function bounce1() {

       if (ball.active) {

              if (Math.abs(ball.i) < ball.xDistance) {

                     ball.move()

                     setTimeout("bounce1()",ball.speed)

              }

              else {

                     // after it drops, the parabola has to change into an arcing parabola

                     // to continue bouncing.  Must reset the following values...

                     ball.type = 2

                     ball.yDirection = -1

                     ball.i = 0

                     ball.yDistance -= ball.ydec

                     ball.startX = ball.x

                     ball.startY = ball.y

                     // Important: the multiplier is used in the calculation of the parabola

                     // if you change the xDistance,yDistance, or type you must recalculate it

                     ball.multiplier = ball.yDistance/Math.pow(ball.xDistance/ball.type,2)

                     setTimeout("bounce2()",ball.speed)

              }

       }

}

 

// this is the arcing parabola that continually runs after the initial drop

function bounce2() {

       if (ball.active) {

              if (Math.abs(ball.i) < ball.xDistance) {

                     ball.move()

                     setTimeout("bounce2()",ball.speed)

              }

              else {

                     // each time the ball hits the ground I decrease both the xDistance

                     // and yDistance to make it appear as if it's slowing down

                     // must also recalculate the multiplier each time

                     ball.i = 0

                     ball.xdec *= 0.9

                     ball.ydec *= 0.9

                     ball.xDistance -= ball.xdec

                     ball.yDistance -= ball.ydec

                     ball.startX = ball.x

                     ball.startY = ball.y

                     ball.multiplier = ball.yDistance/Math.pow(ball.xDistance/ball.type,2)

                     if (ball.yDistance > 0 && ball.xDistance > 0) setTimeout("bounce2()",ball.speed)

                     else {

                            changeImages("off")

                            ball.active = 0

                     }

              }

       }

}

 

function start() {

       if (!ball.active) {

              if (ball.x == 593) {  // if at the end, reset it

                     reset()

                     start()

              }

              else {

                     changeImages("on")  // else start the drop

                     ball.active = 1

                     bounce1()

              }

       }

}

 

function stop() {

       ball.active = 0

       changeImages("off")

}

 

function reset() {

       if (!ball.active) {

       changeImages("off")

       ball.active = 0

       ball.i = 0

       ball.type = 1

       ball.xdec = 25

       ball.ydec = 50

       ball.xDistance = 125

       ball.yDistance = 250

       ball.yDirection = 1

       ball.multiplier = ball.yDistance/Math.pow(ball.xDistance/ball.type,2)

       ball.startX = 5

       ball.startY = 40

       ball.x = ball.startX

       ball.y = ball.startY

       ball.obj.left = ball.x

       ball.obj.top = ball.y

       }

       else {

              ball.active = 0

              setTimeout("reset()",50)

       }

}

 

function changeImages(which) {

       if (which == "on") {

              if (ns4) document.layers["balldiv"].document.images["ballimg"].src = ball_animated.src

              if (ie4) document.images["ballimg"].src = ball_animated.src

       }

       if (which == "off") {

              if (ns4) document.layers["balldiv"].document.images["ballimg"].src = ball_stationary.src

              if (ie4) document.images["ballimg"].src = ball_stationary.src

       }

}

 

//-->

</SCRIPT>

<A onclick=start() href="#">开始跳动</A> - <A onclick=stop()

href="#">停止</A> - <A onclick=reset() href="#">重新开始</A> <DIV id=balldiv><IMG height=50 src="ball-stationary.gif" width=50 border=0 name=ballimg> </DIV>

 

 

第二步:把<body>中的内容改为:

<body   onload=init()>

 

0 Comments

Fri

27

Feb

2009

122、图片链接的文字说明

122、图片链接的文字说明

脚本说明:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

function showtip2(current,e,text){

  if (document.all&&document.readyState=="complete"){

    document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'

    document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10

    document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10

    document.all.tooltip2.style.visibility="visible"

}

  else if (document.layers){

    document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')

    document.tooltip2.document.nstip.document.close()

    document.tooltip2.document.nstip.left=0

    currentscroll=setInterval("scrolltip()",100)

    document.tooltip2.left=e.pageX+10

    document.tooltip2.top=e.pageY+10

    document.tooltip2.visibility="show"

}

}

function hidetip2(){

  if (document.all)

    document.all.tooltip2.style.visibility="hidden"

    else if (document.layers){

    clearInterval(currentscroll)

    document.tooltip2.visibility="hidden"

}

}

//  End -->

</script>

<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:gold;z-index:10"></div>

<div align="CENTER" name="divTest" onMouseover="showtip2(this,event,'这里可以放上图片链接的文字说明');" onMouseout="hidetip2();" STYLE="cursor: hand">

<TABLE border="0" cellpadding="0" cellspacing="0"><TR><TD COLSPAN="7">

<IMG SRC="0817.gif" WIDTH="100" HEIGHT="39" BORDER="0"><p>

</TABLE>

<p></div>

0 Comments

Fri

27

Feb

2009

121、可移动的多个图片

121、可移动的多个图片

脚本说明:

把如下代码加入<body>区域中:

<script language="JavaScript">

//Pre-load your images here.

imgs=new Array("p1.gif","p2.gif","p3.gif","p4.gif","p5.gif")

 

//Alter nothing past here!

load=new Array()

for(i=0; i < imgs.length; i++){

 load[i]=new Image();

 load[i].src=imgs[i];

}

var ns=(document.layers);

var ns6=(document.getElementById&&!document.all);

var ie=(document.all);

var n=imgs.length;

var y=null;

var x=null;

var z=null;

var w=null;//Alternate id. Not used for this script.

if (ns||ns6){

window.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);

document.releaseEvents(Event.MOUSEMOVE);

}

if (ns){window.onmousedown=down;window.onmouseup=up}

if (ie||document.getElementById){document.onmousedown=down;document.onmouseup=up}

function down(e){

if (ns){

 window.onmousemove=move;

 if (document.layers['pics'+e.target.name]){

 z=document.layers['pics'+e.target.name];

 y=e.layerY;

 x=e.layerX;

 document.layers['pics'+e.target.name].zIndex=n++;

 }

else {return true}

w=z.name.charAt(z.name.length-1);

}

if (ie && window.event.srcElement.parentElement){

 document.onmousemove=move;

 if  (window.event.srcElement.parentElement.id.indexOf("pics") != -1){

 z=window.event.srcElement.parentElement;

 y=window.event.offsetY;

 x=window.event.offsetX;

 w=window.event.srcElement.parentElement.id.charAt(window.event.srcElement.parentElement.id.length-1);

 window.event.srcElement.parentElement.style.zIndex=n++;

 }

}

if (ns6){

 document.onmousemove=move;

 if  (e.target.parentNode.id.indexOf("pics") != -1){

 z=e.target.parentNode.style;

 x=e.clientX - parseInt(z.left);

 y=e.clientY - parseInt(z.top);

 w=e.target.parentNode.id.charAt(e.target.parentNode.id.length-1);

 z.zIndex=n++; 

 }

}

return false;

}

function move(e){

if (ns && z){z.left=e.pageX-x;z.top=e.pageY-y;}

if (ns6 && z){z.top=parseInt(e.clientY)-y;z.left=parseInt(e.clientX)-x}

if (ie && z){z.style.posLeft=window.event.clientX-x;z.style.posTop=window.event.clientY-y}

return false;

}

function up(e){

if (ie||ns6)document.onmousemove=null;

if (ns)window.onmousemove=null;

z=null;

}

//-->

</script>

 

<div id="pics0" style="position:absolute;top:10px;left:10px;cursor:move">

<img src="p1.gif" name="0">

</div>

 

<div id="pics1" style="position:absolute;top:100px;left:10px;cursor:move">

<img src="p2.gif" name="1">

</div>

 

<div id="pics2" style="position:absolute;top:190px;left:10px;cursor:move">

<img src="p3.gif" name="2">

</div>

 

<div id="pics3" style="position:absolute;top:280px;left:10px;cursor:move">

<img src="p4.gif" name="3">

</div>

 

<div id="pics4" style="position:absolute;top:370px;left:10px;cursor:move">

<img src="p5.gif" name="4">

</div>

 

0 Comments