Fri

27

Feb

2009

120、物件的重新定位

120、物件的重新定位

脚本说明:

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

<STYLE TYPE="text/css">

<!--

 

#moveobj {position: absolute;

        top: 0;

        left: 0;}

              -->

</STYLE>

<script language="javascript">

<!--

function moveit(){

       moveTop = document.forms[0].elements[0].value;

       moveLeft = document.forms[0].elements[1].value;

       moveobj.style.top = moveTop;

       moveobj.style.left = moveLeft;

 

       }

//-->

</script>

<form action="javascript:moveit()">

  <div align="center">top:

    <input type=text size=5 name=topnum value=10>

       left:

    <input type=text size=5 name=leftnum value=10>

    <input type=submit value="移动" name="submit">

    <br>

    输入新的位置,未做合法性检测。</div>

</form>

      <div id="moveobj"><img src="073.gif" width="60" height="106"></div>

0 Comments

Fri

27

Feb

2009

119、页面外显示图片

119、页面外显示图片

脚本说明:

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

<SCRIPT LANGUAGE="JScript">

var Popwin = window.createPopup();

var PopBody = Popwin.document.body;

PopBody.innerHTML = "<img src=lady.jpg>"

Popwin.show(400,10,210,240)

</SCRIPT>

0 Comments

Fri

27

Feb

2009

118、变形旋转的图片

118、变形旋转的图片

脚本说明:

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

<OBJECT ID="DAViewer" STYLE="width:88;height:31;z-index:-1;position:relative;border:0 solid black;" CLASSID="CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D"></OBJECT>

<SCRIPT LANGUAGE="JScript">

<!--

m = DAViewer.PixelLibrary;

myPic = m.ImportImage("xuanzhuan.gif");

myRotate = m.Rotate3RateDegrees(m.Vector3(0,1,1),45).ParallelTransform2()

myImg = myPic.Transform(myRotate)

DAViewer.Image = myImg;

DAViewer.Start();

//-->

</SCRIPT>

0 Comments

Fri

27

Feb

2009

117、下拉框选择显示图片

117、下拉框选择显示图片

脚本说明:

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

<img width=200 height=223 src="01251.gif" name="x1">

<SELECT onChange="document.x1.src=options[selectedIndex].value">

<option value="01251.gif">看看图片1</option>

<option value="01252.gif">看看图片2</option>

<option value="01253.gif">看看图片3</option>

<option value="01254.gif">看看图片4</option>

</SELECT>

 

0 Comments

Fri

27

Feb

2009

116、广告图片宣传

116、广告图片宣传

脚本说明:

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

<SCRIPT language=JavaScript>

<!--

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 MM_timelinePlay(tmLnName, myID) { //v1.2

  //Copyright 1997 Macromedia, Inc. All rights reserved.

  var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false;

  if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time

  tmLn = document.MM_Time[tmLnName];

  if (myID == null) { myID = ++tmLn.ID; firstTime=true;}//if new call, incr ID

  if (myID == tmLn.ID) { //if Im newest

    setTimeout('MM_timelinePlay("'+tmLnName+'",'+myID+')',tmLn.delay);

    fNew = ++tmLn.curFrame;

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

      sprite = tmLn[i];

      if (sprite.charAt(0) == 's') {

        if (sprite.obj) {

          numKeyFr = sprite.keyFrames.length; firstKeyFr = sprite.keyFrames[0];

          if (fNew >= firstKeyFr && fNew <= sprite.keyFrames[numKeyFr-1]) {//in range

            keyFrm=1;

            for (j=0; j<sprite.values.length; j++) {

              props = sprite.values[j];

              if (numKeyFr != props.length) {

                if (props.prop2 == null) sprite.obj[props.prop] = props[fNew-firstKeyFr];

                else        sprite.obj[props.prop2][props.prop] = props[fNew-firstKeyFr];

              } else {

                while (keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]) keyFrm++;

                if (firstTime || fNew==sprite.keyFrames[keyFrm-1]) {

                  if (props.prop2 == null) sprite.obj[props.prop] = props[keyFrm-1];

                  else        sprite.obj[props.prop2][props.prop] = props[keyFrm-1];

        } } } } }

      } else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);

      if (fNew > tmLn.lastFrame) tmLn.ID = 0;

  } }

}

 

function MM_initTimelines() { //v4.0

    //MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights reserved.

    var ns = navigator.appName == "Netscape";

    var ns4 = (ns && parseInt(navigator.appVersion) == 4);

    var ns5 = (ns && parseInt(navigator.appVersion) > 4);

    document.MM_Time = new Array(1);

    document.MM_Time[0] = new Array(2);

    document.MM_Time["Timeline1"] = document.MM_Time[0];

    document.MM_Time[0].MM_Name = "Timeline1";

    document.MM_Time[0].fps = 15;

    document.MM_Time[0][0] = new String("sprite");

    document.MM_Time[0][0].slot = 1;

    if (ns4)

        document.MM_Time[0][0].obj = document["Layer1"];

    else if (ns5)

        document.MM_Time[0][0].obj = document.getElementById("Layer1");

    else

        document.MM_Time[0][0].obj = document.all ? document.all["Layer1"] : null;

    document.MM_Time[0][0].keyFrames = new Array(1, 35);

    document.MM_Time[0][0].values = new Array(4);

    if (ns5)

        document.MM_Time[0][0].values[0] = new Array("0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px");

    else

        document.MM_Time[0][0].values[0] = new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);

    document.MM_Time[0][0].values[0].prop = "left";

    if (ns5)

        document.MM_Time[0][0].values[1] = new Array("0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px");

    else

        document.MM_Time[0][0].values[1] = new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);

    document.MM_Time[0][0].values[1].prop = "top";

    if (!ns4) {

        document.MM_Time[0][0].values[0].prop2 = "style";

        document.MM_Time[0][0].values[1].prop2 = "style";

    }

    if (ns5)

        document.MM_Time[0][0].values[2] = new Array("452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px");

    else

        document.MM_Time[0][0].values[2] = new Array(452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452);

    document.MM_Time[0][0].values[2].prop = "height";

    if (!ns4)

        document.MM_Time[0][0].values[2].prop2 = "style";

    document.MM_Time[0][0].values[3] = new Array("inherit","inherit");

    document.MM_Time[0][0].values[3].prop = "visibility";

    if (!ns4)

        document.MM_Time[0][0].values[3].prop2 = "style";

    document.MM_Time[0][1] = new String("sprite");

    document.MM_Time[0][1].slot = 1;

    if (ns4)

        document.MM_Time[0][1].obj = document["Layer1"];

    else if (ns5)

        document.MM_Time[0][1].obj = document.getElementById("Layer1");

    else

        document.MM_Time[0][1].obj = document.all ? document.all["Layer1"] : null;

    document.MM_Time[0][1].keyFrames = new Array(36, 56);

    document.MM_Time[0][1].values = new Array(4);

    if (ns5)

        document.MM_Time[0][1].values[0] = new Array("0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px");

    else

        document.MM_Time[0][1].values[0] = new Array(0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0);

    document.MM_Time[0][1].values[0].prop = "left";

    if (ns5)

        document.MM_Time[0][1].values[1] = new Array("0px", "-23px", "-45px", "-68px", "-90px", "-113px", "-136px", "-158px", "-181px", "-203px", "-226px", "-249px", "-271px", "-294px", "-316px", "-339px", "-362px", "-384px", "-407px", "-429px", "-452px");

    else

        document.MM_Time[0][1].values[1] = new Array(0,-23,-45,-68,-90,-113,-136,-158,-181,-203,-226,-249,-271,-294,-316,-339,-362,-384,-407,-429,-452);

    document.MM_Time[0][1].values[1].prop = "top";

    if (!ns4) {

        document.MM_Time[0][1].values[0].prop2 = "style";

        document.MM_Time[0][1].values[1].prop2 = "style";

    }

    if (ns5)

        document.MM_Time[0][1].values[2] = new Array("452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px", "452px");

    else

        document.MM_Time[0][1].values[2] = new Array(452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452,452);

    document.MM_Time[0][1].values[2].prop = "height";

    if (!ns4)

        document.MM_Time[0][1].values[2].prop2 = "style";

    document.MM_Time[0][1].values[3] = new Array("inherit","inherit");

    document.MM_Time[0][1].values[3].prop = "visibility";

    if (!ns4)

        document.MM_Time[0][1].values[3].prop2 = "style";

    document.MM_Time[0].lastFrame = 56;

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

        document.MM_Time[i].ID = null;

        document.MM_Time[i].curFrame = 0;

        document.MM_Time[i].delay = 1000/document.MM_Time[i].fps;

    }

}

//-->

</SCRIPT>

<DIV id=Layer1

style="BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; Z-INDEX: 1; LEFT: 0px; BORDER-LEFT: #000000 1px; WIDTH: 780px; BORDER-BOTTOM: #000000 1px; POSITION: absolute; TOP: 0px; HEIGHT: 452px; BACKGROUND-COLOR: #666699; layer-background-color: #666699"><IMG

src="portrait23.jpg" width=780></DIV>

 

 

 

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

<body onload="MM_timelinePlay('Timeline1')">

 

0 Comments

Fri

27

Feb

2009

115、飘动的广告图片

115、飘动的广告图片

脚本说明:

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

<script language="JavaScript">

<!--

if(parseInt(navigator.appVersion.charAt(0))<4){

       location.href="http://www.k688.com"

}

 

var mvtLight="index_dreamweaver.gif"

var mvtWidth=60

var mvtHeight=60

var mvtLink="http://www.k688.com"

var mvtAlt="网络时空"

 

brOK=navigator.javaEnabled()?true:false

ns4=(document.layers)?true:false

ie4=(document.all)?true:false

 

if(ns4){

document.write('<layer id="mvt" width=40 height=60;"><a href="'+mvtLink+'" target=_blank><img border=0 src="'+mvtLight+'" border=0 width="'+mvtWidth+'" height="'+mvtHeight+'" alt="'+mvtAlt+'"><\/a><\/layer>');

}

else{

document.write('<div id="mvt" style="position:absolute; width:40; height:60;"><a href="'+mvtLink+'" target=_blank><img src="'+mvtLight+'" border=0 width="'+mvtWidth+'" height="'+mvtHeight+'" alt="'+mvtAlt+'"><\/a><\/div>');

}

 

var vmin=2;

var vmax=5;

var vr=2;

var timer1;

 

function Chip(chipname,width,height)

{this.named=chipname;

 this.vx=vmin+vmax*Math.random();

 this.vy=vmin+vmax*Math.random();

 this.w=width;

 this.h=height;

 this.xx=0;

 this.yy=0;

 this.timer1=null;

}

 

function movechip(chipname)

{

 if(brOK)

       {eval("chip="+chipname);

       if(ns4)

       {pageX=window.pageXOffset;

              pageW=window.innerWidth;

              pageY=window.pageYOffset;

              pageH=window.innerHeight;

       }

       else

       {pageX=window.document.body.scrollLeft;

              pageW=window.document.body.offsetWidth-8;

              pageY=window.document.body.scrollTop;

              pageH=window.document.body.offsetHeight;

       }

 

       chip.xx=chip.xx+chip.vx;

       chip.yy=chip.yy+chip.vy;

 

       chip.vx+=vr*(Math.random()-0.5);

       chip.vy+=vr*(Math.random()-0.5);

       if(chip.vx>(vmax+vmin))     chip.vx=(vmax+vmin)*2-chip.vx;

       if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;

       if(chip.vy>(vmax+vmin))     chip.vy=(vmax+vmin)*2-chip.vy;

       if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;

 

 

       if(chip.xx<=pageX)

              {     chip.xx=pageX;

              chip.vx=vmin+vmax*Math.random();

              }

       if(chip.xx>=pageX+pageW-chip.w)

              {     chip.xx=pageX+pageW-chip.w;

              chip.vx=-vmin-vmax*Math.random();

              }

       if(chip.yy<=pageY)

              {     chip.yy=pageY;

              chip.vy=vmin+vmax*Math.random();

              }

       if(chip.yy>=pageY+pageH-chip.h)

              {     chip.yy=pageY+pageH-chip.h;

              chip.vy=-vmin-vmax*Math.random();

              }

 

       if(ns4){

              eval('document.'+chip.named+'.top ='+chip.yy);

              eval('document.'+chip.named+'.left='+chip.xx);

       }

       else{

              eval('document.all.'+chip.named+'.style.pixelLeft='+chip.xx);

              eval('document.all.'+chip.named+'.style.pixelTop ='+chip.yy);

       }

       chip.timer1=setTimeout("movechip('"+chip.named+"')",100);

       }

}

 

function stopme(chipname)

{if(brOK)

       {//alert(chipname)

       eval("chip="+chipname);

       if(chip.timer1!=null)

       {clearTimeout(chip.timer1)}

       }

}

 

var mvt;

function mvt()

{

       mvt=new Chip("mvt",60,80);

       if(brOK){

              movechip("mvt");

       }

}

 

window.onload=mvt

 

//-->

</script>

 

0 Comments

Fri

27

Feb

2009

114、跟随鼠标的显隐图片

114、跟随鼠标的显隐图片

脚本说明:

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

<style type="text/css">

<!--

h1 {

  color:#cc3333;

  font-family:"Comic Sans MS",Helvetica;

}

h3 {

  color:#993333;

  font-family:"Comic Sans MS",Helvetica;

}

.kisser {

  position:absolute;

  top:0;

  left:0;

  visibility:hidden;

}

-->

</style>

 

<script language="JavaScript1.2" type="text/JavaScript">

<!-- cloak

 

 

kisserCount = 15 //maximum number of images on screen at one time

curKisser = 0 //the last image DIV to be displayed (used for timer)

kissDelay = 1000 //duration images stay on screen (in milliseconds)

kissSpacer = 50 //distance to move mouse b4 next heart appears

theimage = "kiss/lips_small.gif" //the 1st image to be displayed

theimage2 = "kiss/small_heart.gif" //the 2nd image to be displayed

 

 

//Browser checking and syntax variables

var docLayers = (document.layers) ? true:false;

var docId = (document.getElementById) ? true:false;

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

var docbitK = (docLayers) ? "document.layers['":(docId) ? "document.getElementById('":(docAll) ? "document.all['":"document."

var docbitendK = (docLayers) ? "']":(docId) ? "')":(docAll) ? "']":""

var stylebitK = (docLayers) ? "":".style"

var showbitK = (docLayers) ? "show":"visible"

var hidebitK = (docLayers) ? "hide":"hidden"

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

//Variables used in script

var posX, posY, lastX, lastY, kisserCount, curKisser, kissDelay, kissSpacer, theimage

lastX = 0

lastY = 0

//Collection of functions to get mouse position and place the images

function doKisser(e) {

 

  posX = getMouseXPos(e)

  posY = getMouseYPos(e)

  if (posX>(lastX+kissSpacer)||posX<(lastX-kissSpacer)||posY>(lastY+kissSpacer)||posY<(lastY-kissSpacer)) {

    showKisser(posX,posY)

    lastX = posX

    lastY = posY

  }

}

// Get the horizontal position of the mouse

function getMouseXPos(e) {

  if (document.layers||ns6) {

    return parseInt(e.pageX+10)

  } else {

    return (parseInt(event.clientX+10) + parseInt(document.body.scrollLeft))

  }

}

// Get the vartical position of the mouse

function getMouseYPos(e) {

  if (document.layers||ns6) {

    return parseInt(e.pageY)

  } else {

    return (parseInt(event.clientY) + parseInt(document.body.scrollTop))

  }

}

//Place the image and start timer so that it disappears after a period of time

function showKisser(x,y) {

  var processedx=ns6? Math.min(x,window.innerWidth-75) : docAll? Math.min(x,document.body.clientWidth-55) : x

  if (curKisser >= kisserCount) {curKisser = 0}

  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".left = " + processedx)

  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".top = " + y)

  eval(docbitK + "kisser" + curKisser + docbitendK + stylebitK + ".visibility = '" + showbitK + "'")

  if (eval("typeof(kissDelay" + curKisser + ")")=="number") {

    eval("clearTimeout(kissDelay" + curKisser + ")")

  }

  eval("kissDelay" + curKisser + " = setTimeout('hideKisser(" + curKisser + ")',kissDelay)")

  curKisser += 1

}

//Make the image disappear

function hideKisser(knum) {

  eval(docbitK + "kisser" + knum + docbitendK + stylebitK + ".visibility = '" + hidebitK + "'")

}

 

function kissbegin(){

//Let the browser know when the mouse moves

if (docLayers) {

  document.captureEvents(Event.MOUSEMOVE)

  document.onMouseMove = doKisser

} else {

  document.onmousemove = doKisser

}

}

window.onload=kissbegin

// decloak -->

</script>

<script language="JavaScript" type="text/JavaScript">

<!-- cloak

// Add all DIV's of hearts

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

for (k=0;k<kisserCount;k=k+2) {

  document.write('<div id="kisser' + k + '" class="kisser"><img src="' + theimage + '" alt="" border="0"></div>\n')

  document.write('<div id="kisser' + (k+1) + '" class="kisser"><img src="' + theimage2 + '" alt="" border="0"></div>\n')

}

}

 

// decloak -->

</script>

 

0 Comments

Fri

27

Feb

2009

113、变化导航的图片

113、变化导航的图片

脚本说明:

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

<script language="JavaScript1.2">

 

//Drop-in slideshow II (hyperlinked)- By Dynamic Drive

//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com

//This credit MUST stay intact for use

 

var slideshow_width=88 //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)

var slideshow_height=31 //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)

var pause=3000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)

 

var dropimages=new Array()

//SET IMAGE PATHS. Extend or contract array as needed

dropimages[0]="button1.gif"

dropimages[1]="button2.gif"

dropimages[2]="button3.gif"

 

var droplinks=new Array()

//SET IMAGE URLs. Extend or contract array as needed

droplinks[0]="http://www.7stk.com"

droplinks[1]="http://www.7stk.com"

droplinks[2]="http://www.7stk.com"

 

////NO need to edit beyond here/////////////

 

var preloadedimages=new Array()

for (p=0;p<dropimages.length;p++){

preloadedimages[p]=new Image()

preloadedimages[p].src=dropimages[p]

}

 

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

 

if (ie4||dom)

document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div></div>')

else

document.write('<a href="javascript:rotatelink()"><img name="defaultslide" src="'+dropimages[0]+'" border=0></a>')

 

var curpos=slideshow_height*(-1)

var degree=10

var curcanvas="canvas0"

var curimageindex=0

var nextimageindex=1

 

 

function movepic(){

if (curpos<0){

curpos=Math.min(curpos+degree,0)

tempobj.style.top=curpos

}

else{

clearInterval(dropslide)

nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"

tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)

tempobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'

nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0

setTimeout("rotateimage()",pause)

}

}

 

function rotateimage(){

if (ie4||dom){

resetit(curcanvas)

var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)

crossobj.style.zIndex++

var temp='setInterval("movepic()",50)'

dropslide=eval(temp)

curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"

}

else

document.images.defaultslide.src=dropimages[curimageindex]

linkindex=curimageindex

curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0

}

 

function rotatelink(){

window.location=droplinks[linkindex]

}

 

function resetit(what){

curpos=slideshow_height*(-1)

var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)

crossobj.style.top=curpos}

 

function startit(){

var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)

crossobj.innerHTML='<a href="'+droplinks[curimageindex]+'"><img src="'+dropimages[curimageindex]+'" border=0></a>'

rotateimage()

}

 

if (ie4||dom)

window.onload=startit

else

setInterval("rotateimage()",pause)

 

</script>

 

 

0 Comments

Fri

27

Feb

2009

112、变化的多幅图片

112、变化的多幅图片

脚本说明:

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

<script language="JavaScript1.2">

 

//Drop-in slideshow- By Dynamic Drive

//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com

//This credit MUST stay intact for use

 

var slideshow_width=140 //SET SLIDESHOW WIDTH (set to largest image's width if multiple dimensions exist)

var slideshow_height=225 //SET SLIDESHOW HEIGHT (set to largest image's height if multiple dimensions exist)

var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

 

var dropimages=new Array()

//SET IMAGE PATHS. Extend or contract array as needed

dropimages[0]="photo1.jpg"

dropimages[1]="photo2.jpg"

dropimages[2]="photo3.jpg"

 

////NO need to edit beyond here/////////////

 

var preloadedimages=new Array()

for (p=0;p<dropimages.length;p++){

preloadedimages[p]=new Image()

preloadedimages[p].src=dropimages[p]

}

 

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1

var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

 

if (ie4||dom)

document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:-'+slideshow_height+'"></div></div>')

else

document.write('<img name="defaultslide" src="'+dropimages[0]+'">')

 

var curpos=slideshow_height*(-1)

var degree=10

var curcanvas="canvas0"

var curimageindex=0

var nextimageindex=1

 

 

function movepic(){

if (curpos<0){

curpos=Math.min(curpos+degree,0)

tempobj.style.top=curpos

}

else{

clearInterval(dropslide)

nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"

tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)

tempobj.innerHTML='<img src="'+dropimages[nextimageindex]+'">'

nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0

setTimeout("rotateimage()",pause)

}

}

 

function rotateimage(){

if (ie4||dom){

resetit(curcanvas)

var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)

crossobj.style.zIndex++

var temp='setInterval("movepic()",50)'

dropslide=eval(temp)

curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"

}

else

document.images.defaultslide.src=dropimages[curimageindex]

curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0

}

 

function resetit(what){

curpos=slideshow_height*(-1)

var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)

crossobj.style.top=curpos}

 

function startit(){

var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)

crossobj.innerHTML='<img src="'+dropimages[curimageindex]+'">'

rotateimage()

}

 

if (ie4||dom)

window.onload=startit

else

setInterval("rotateimage()",pause)

 

</script>

 

0 Comments

Fri

27

Feb

2009

111、非凡图片效果

111、非凡图片效果

脚本说明:

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

<script language=JavaScript>

<!-- Beginning of JavaScript Code -------------------

 

nereidFadeObjects = new Object();

nereidFadeTimers = new Object();

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

if (!document.all)

return

    if (object != "[object]"){ 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);

    }

}

// -- End of JavaScript Code -->

</script>

 <table border="0" cellspacing="1" cellpadding="0" align="center">

          <tr align="center">

            <td background="sto/004.jpg" width="60" height="60"><a href="#">

                     <img

      onmouseover=nereidFade(this,100,5,7) style="FILTER: alpha(opacity=0);border:1px solid #000000"

      onmouseout=nereidFade(this,01,7,5)

      src="sto/005.jpg" width="150" height="200" border="0" alt="网页特效代码"  ></a></td>

            <td width="60" height="60" background="sto/001.jpg"><a href="http://www.7stk.com">

                     <img src="sto/006.jpg" width="150" height="200" border="0" alt="网页特效代码" onmouseover=nereidFade(this,100,5,7) style="FILTER: alpha(opacity=0);border:1px solid #000000" 

      onmouseout=nereidFade(this,01,7,5) ></a></td>

            <td width="60" height="60" background="sto/002.jpg"><a href="http://www.7stk.com">

                     <img src="sto/007.jpg" width="150" height="200" border="0" alt="网页特效代码"  onmouseover=nereidFade(this,100,5,7) style="FILTER: alpha(opacity=0);border:1px solid #000000" 

      onmouseout=nereidFade(this,01,7,5) ></a></td>

            <td width="60" height="60" background="sto/003.jpg"><a href="http://www.7stk.com">

                     <img src="sto/0011.jpg" width="150" height="200" border="0" alt="网页特效代码" onmouseover=nereidFade(this,100,5,7) style="FILTER: alpha(opacity=0);border:1px solid #000000" 

      onmouseout=nereidFade(this,01,7,5) ></a></td>

          </tr>

        </table>

 

0 Comments

Fri

27

Feb

2009

110、飘落的多图片

110、飘落的多图片

脚本说明:

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

<STYLE>

#Layer0 {

       Z-INDEX: 10; LEFT: -100px; WIDTH: 60px; POSITION: absolute; TOP: -100px; HEIGHT: 60px

}

#Layer1 {

       Z-INDEX: 20; LEFT: -100px; WIDTH: 60px; POSITION: absolute; TOP: -100px; HEIGHT: 60px

}

#Layer2 {

       Z-INDEX: 30; LEFT: -100px; WIDTH: 60px; POSITION: absolute; TOP: -100px; HEIGHT: 60px

}

#Layer3 {

       Z-INDEX: 40; LEFT: -100px; WIDTH: 60px; POSITION: absolute; TOP: -100px; HEIGHT: 60px

}

#Layer4 {

       Z-INDEX: 50; LEFT: -100px; WIDTH: 60px; POSITION: absolute; TOP: -100px; HEIGHT: 60px

}

#Layer5 {

       Z-INDEX: 60; LEFT: -100px; WIDTH: 60px; POSITION: absolute; TOP: -100px; HEIGHT: 60px

}

#Layer6 {

       Z-INDEX: 70; LEFT: -100px; WIDTH: 60px; POSITION: absolute; TOP: -100px; HEIGHT: 60px

}

BODY {

       FONT-SIZE: 9pt; WORD-SPACING: normal; LINE-HEIGHT: 13pt

}

P {

       FONT-SIZE: 9pt; WORD-SPACING: normal; LINE-HEIGHT: 13pt

}

TD {

       FONT-SIZE: 9pt; WORD-SPACING: normal; LINE-HEIGHT: 13pt

}

</STYLE>

 

<SCRIPT language=JavaScript>

xfirst = new Array(80,150,220,310,400,590,680);      //初始x位置

yfirst = new Array(0,180,70,10,50,30,140);       //初始y位置

xcoor = new Array(80,150,220,310,400,590,680); 

ycoor = new Array(0,180,70,10,50,30,140);

xdirec= new Array(1,-1,1,-1,1,-1); //初始方向 -1 为左 and 1 为右

var ns = navigator.appName == "Netscape";

function doplay()

{

    var x,y,i,j,w,h;

       w = window.screen.width - 100;

//     w = document.body.clientWidth - 100;

       h = window.screen.height - 100;

//     h = document.body.clientHeight - 50;

    for(j=0;j<7;j++){

           i=Math.random();                              //随机改变运动方向

           if (i > 0.95) xdirec[j] = 0 - xdirec[j]; 

           x=Math.floor(10*Math.random());

           y=Math.floor(5*Math.random());  //xy方向上的随机增量

           if ( xdirec[j] == 1 ) xcoor[j] = xcoor[j] + x;

           else xcoor[j] = xcoor[j] - x;

           ycoor[j] = ycoor[j] + y;              //x越界则变向,y越界则返回

           if ( xcoor[j] >= w ) {xcoor[j]=w;xdirec[j]=-1;}

           if ( xcoor[j] <= 0 ) {xcoor[j]=0;xdirec[j]=1;}

           if ( ycoor[j] >= h ) {xcoor[j]=xfirst[j];ycoor[j]=yfirst[j];}

        if (!ns){ eval('document.all'+'["Layer'+j+'"]'+'.style.left='+xcoor[j]);

              eval('document.all'+'["Layer'+j+'"]'+'.style.top='+ycoor[j]);}

        else {  eval('document.layers'+'["Layer'+j+'"]'+'.left='+xcoor[j]);

              eval('document.layers'+'["Layer'+j+'"]'+'.top='+ycoor[j]);}

       }

    setTimeout('doplay()',100); 

}

doplay()

</SCRIPT>

<DIV id=Layer0><IMG height=14 src="hua1.gif" width=14> </DIV>

<DIV id=Layer1><IMG height=25 src="hua.gif" width=25> </DIV>

<DIV id=Layer2><IMG height=25 src="hua.gif" width=25> </DIV>

<DIV id=Layer3><IMG height=14 src="hua2.gif" width=14> </DIV>

<DIV id=Layer4><IMG height=14 src="hua1.gif" width=14> </DIV>

<DIV id=Layer5><IMG height=14 src="hua2.gif" width=14> </DIV>

<DIV id=Layer6><IMG height=25 src="hua.gif" width=25> </DIV>

 

 

 

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

<body onload=doplay()>

0 Comments

Fri

27

Feb

2009

109、图片模糊变化

109、图片模糊变化

脚本说明:

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

<script language="JavaScript1.1">

<!--

var slidespeed=3000

var slideimages=new Array("200202261.jpg","200202262.jpg","200202263.jpg","200202264.jpg")

var slidelinks=new Array("http://www.7stk.com","http://www.7stk","http://www.jzzy.net")

 

var imageholder=new Array()

var ie55=window.createPopup

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

imageholder[i]=new Image()

imageholder[i].src=slideimages[i]

}

 

function gotoshow(){

window.location=slidelinks[whichlink]

}

//-->

</script>

<a href="javascript:gotoshow()"><img src="200202261.jpg" name="slide" border=0 style="filter:progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=15,Duration=1)"></a>

<script language="JavaScript1.1">

<!--

var whichlink=0

var whichimage=0

var pixeldelay=(ie55)? document.images.slide.filters[0].duration*1000 : 0

function slideit(){

if (!document.images) return

if (ie55) document.images.slide.filters[0].apply()

document.images.slide.src=imageholder[whichimage].src

if (ie55) document.images.slide.filters[0].play()

whichlink=whichimage

whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0

setTimeout("slideit()",slidespeed+pixeldelay)

}

slideit()

//-->

</script>

0 Comments

Fri

27

Feb

2009

107、点击后放大图片

107、点击后放大图片

脚本说明:

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

<script>

 

 

function enlarge(which,e){

//Render image code for IE 4+

if (document.all){

if (showimage.style.visibility=="hidden"){

showimage.style.left=document.body.scrollLeft+event.clientX

showimage.style.top=document.body.scrollTop+event.clientY

showimage.innerHTML='<img src="'+which+'">'

showimage.style.visibility="visible"

}

else

showimage.style.visibility="hidden"

return false

}

//Render image code for NS 4

else if (document.layers){

if (document.showimage.visibility=="hide"){

document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which+'" border=0></a>')

document.showimage.document.close()

document.showimage.left=e.x

document.showimage.top=e.y

document.showimage.visibility="show"

}

else

document.showimage.visibility="hide"

return false

}

//if NOT IE 4+ or NS 4, simply display image in full browser window

else

return true

}

 

 

</script>

 

 

<script language="JavaScript1.2">

 

 

var nsx

var nsy

var nstemp

 

function drag_dropns(name){

temp=eval(name)

temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)

temp.onmousedown=gons

temp.onmousemove=dragns

temp.onmouseup=stopns

}

 

function gons(e){

temp.captureEvents(Event.MOUSEMOVE)

nsx=e.x

nsy=e.y

}

function dragns(e){

temp.moveBy(e.x-nsx,e.y-nsy)

return false

}

 

function stopns(){

temp.releaseEvents(Event.MOUSEMOVE)

}

 

//drag drop function for IE 4+////

/////////////////////////////////

 

var dragapproved=false

 

function drag_dropie(){

if (dragapproved==true){

document.all.showimage.style.pixelLeft=tempx+event.clientX-iex

document.all.showimage.style.pixelTop=tempy+event.clientY-iey

return false

}

}

 

function initializedragie(){

if (event.srcElement.parentElement.id=="showimage"){

iex=event.clientX

iey=event.clientY

tempx=showimage.style.pixelLeft

tempy=showimage.style.pixelTop

dragapproved=true

document.onmousemove=drag_dropie

}

}

 

if (document.all){

document.onmousedown=initializedragie

document.onmouseup=new Function("dragapproved=false")

}

</script>

<div id="showimage" style="position:absolute;visibility:hidden"></div>

<a href="www.7stk.com" onClick="return enlarge('portrait23.jpg',event)"><img src="portrait22.jpg" border="0"></a>

0 Comments

Fri

27

Feb

2009

106、全屏漂浮的广告图片

106、全屏漂浮的广告图片

脚本说明:

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

<SCRIPT LANGUAGE="JavaScript1.2">

<!--

 

//1) specify path to image//图片的路径

var imagepath="exchangelogo.gif"

 

//2) specify image dimensions//图片的大小

var imagewidth=88

var imageheight=31

 

//3) change this to adjust speed (lower is slower)//速度

var speed=3;

 

//4) configure what should happen when user clicks on image

//A value of "dismiss" will dismiss it, while a URL will cause the browser to navigate to it

var imageclick="http://www.7stk.com"

 

//5) Finally, configure when the image should automatically disappear, in seconds (0=perpetual)

var hideafter=0

 

////No editing required beyond this point/////////////////

 

var isie=0;

if(window.navigator.appName=="Microsoft Internet Explorer"&&window.navigator.appVersion.substring(window.navigator.appVersion.indexOf("MSIE")+5,window.navigator.appVersion.indexOf("MSIE")+8)>=5.5) {

isie=1;

}

else {

isie=0;

}

 

if(isie){

var preloadit=new Image()

preloadit.src=imagepath

}

 

 

function pop() {

if(isie) {

x=x+dx;y=y+dy;

oPopup.show(x, y, imagewidth, imageheight);

if(x+imagewidth+5>screen.width) dx=-dx;

if(y+imageheight+5>screen.height) dy=-dy;

if(x<0) dx=-dx;

if(y<0) dy=-dy;

startani=setTimeout("pop();",50);

}

}

 

function dismisspopup(){

clearTimeout(startani)

oPopup.hide()

}

 

function dowhat(){

if (imageclick=="dismiss")

dismisspopup()

else

window.open(imageclick);

}

 

 

if(isie) {

var x=0,y=0,dx=speed,dy=speed;

var oPopup = window.createPopup();

var oPopupBody = oPopup.document.body;

oPopupBody.style.cursor="hand"

oPopupBody.innerHTML = '<IMG SRC="'+preloadit.src+'">';

oPopup.document.body.onmouseover=new Function("clearTimeout(startani)")

oPopup.document.body.onmouseout=pop

oPopup.document.body.onclick=dowhat

pop();

 

if (hideafter>0)

setTimeout("dismisspopup()",hideafter*1000)

}

 

 

// -->

</SCRIPT>

 

0 Comments

Fri

27

Feb

2009

105、下拉选择图片

105、下拉选择图片

脚本说明:

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

<!--建立表单-->

<form name="myform" method="post" action="">请选择图片:

<div id="imgBox"><!--这里是图片下拉选择器的位置--></div>

<input name="myhead" type="text" id="myface" size="10" value="">

</form>

<script language="JavaScript">

<!--

var imgWidth=40; //列表框中图片的宽度;

var imgHeight=40; //列表框中图片的高度;

var imgSrc="head/数字序号.gif"; //供选图片的路径。"数字序号"四字将在程序中替换为0,1,2...,不要手工更改为数字 ;

var selectedNo=7; //默认选定的图片序号;

var selecteSize=2; //下拉列表框中显示的图片数;

 

 

/* 以下把图片和层输出在"imgBox"的位置:

我们用变量"isin"记录鼠标是否在该控件上;用CSS定义下拉列表框的滚动条,"overflow-x:hidden;overflow-y:scroll;"指水平方向不滚动,竖直方面滚动;

for()循环依次把图片输出到下拉列表框。

*/

var myHTML='<SPAN onmouseover="isin=true" onmouseout="isin=false">';

myHTML+='<table width="1" onclick="showlist(this)" title="选择提示框" border="0" cellspacing="0" cellpadding="0"><tr><td><img name="imgselected" border=1 src="'+imgSrc.replace("数字序号",selectedNo)+'" WIDTH='+(imgWidth)+' HEIGHT='+imgHeight+'></td><td valign=top><img src="head/down.gif"></td></tr></table>';

myHTML+='<DIV onscroll="scrollud()" id="imgBox" \n';

myHTML+='style="position:absolute;left=-800;top=0;background-color:#FFFFFF;border: 1px solid #000000;overflow-x:hidden;overflow-y:scroll; width:'+(imgWidth+20)+'px; height: '+imgHeight*selecteSize+'px">';

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

myHTML+="<img listID="+i+" src='"+imgSrc.replace("数字序号",i)+"' alt='"+imgSrc.replace("数字序号",i)+"' width="+imgWidth+" height="+imgHeight+" onclick='selectme(this)' onload='if(init)init()'><BR>";

}

myHTML+= "</DIV></SPAN>";

imgBox.outerHTML=myHTML;

 

/* 以下控制下拉列表框的出现或隐藏 */

function showlist(obj){//这个函数将在选择提示框点击时激活

//如果列表框已经出现,这次点击则隐藏:

if(imgBox.style.pixelLeft!=-800){imgBox.style.pixelLeft=-800; return;}

 

//读取选择提示框在窗体中的绝对位置:

//在父容器中的相对位置:

var mytop=obj.offsetTop;

var myleft=obj.offsetLeft;

//依次读取父容器在更高一级父容器中的相对位置:

while(obj=obj.offsetParent){

myleft+=obj.offsetLeft;

mytop+=obj.offsetTop;

}

//现在已经得到选择提示框的绝对位置myleftmytop

//下拉列表拉就出现在这个绝对位置的正下方:

imgBox.style.left=myleft;

imgBox.style.top=mytop+imgHeight+2;

 

}

 

var isin=false;

function selectme(obj){ //这个函数将在窗体点击或选定图片时激活,窗体点击中传递的参数是null

if(!isin||obj){imgBox.style.pixelLeft=-800;} //隐藏列表框

if(obj){

//改变选择提示框中的图片和"myhead"输入框中的值:

//listID是对象的自定义属性,即在对象的标签中定义了这个属性值,现在就可以读取或改变。

myform.myhead.value=imgSrc.replace("数字序号",obj.listID);

document.images["imgselected"].src=imgSrc.replace("数字序号",obj.listID);

}

}

 

/* 以下控制下拉列表框的自动滚动 */

var mytime=setTimeout("",0);

var pre_X=0; //这个变量用来记录滚动前滚动条的位置

function scrollud(){ //本函数在下拉列表框滚动时被激活

var current_X=imgBox.scrollTop; //记录函数激活时滚动条的位置

//判断向上还是向下滚动,并自动滚动到"imgHeight"的整数倍。

//我们改变列表框的scrollTop值时,会自动激发其onscroll事件,循环激活本函数。

if(current_X>pre_X && imgBox.scrollTop< Math.ceil(imgBox.scrollTop/imgHeight)*imgHeight){

clearTimeout(mytime);

mytime=setTimeout("imgBox.scrollTop=Math.round(imgBox.scrollTop+1);",1);

}

else if(current_X<pre_X && imgBox.scrollTop> Math.floor(imgBox.scrollTop/imgHeight)*imgHeight){

clearTimeout(mytime);

mytime=setTimeout("imgBox.scrollTop=Math.round(imgBox.scrollTop-1);",1);

}

pre_X=current_X;

}

//使列表框自动滚动到默认选定的图片位置,并给"myhead"输入框以默认值

function init(){ //本函数在每个列表框中的图片加载时激活

imgBox.scrollTop=selectedNo*imgHeight;

myform.myhead.value=imgSrc.replace("数字序号",selectedNo);

}

 

/* 以下使窗体点击时selectme(obj)函数被激活: */

myActivation="selectme(null)";

if(document.body.onclick)

{

eval(document.body.onclick.toString().replace('anonymous()','bodyclick()'));

document.body.onclick=new Function("bodyclick();"+myActivation);

}

else document.body.onclick=new Function(myActivation);

-->

</script>

 

 

       

0 Comments

Fri

27

Feb

2009

104、向右飘浮的图片

104、向右飘浮的图片

脚本说明:

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

<script language="VBScript">

on error resume next

if parent.navButtonStatus <> 3 then

       if err.number <> 0 then

              call parent.ThereIsAnError

       end if

end if

</script>

<script language="JavaScript">

 

       var yend;

       var ystart;

       var ydiff;

       var xincrement;

       var yincrement;

       var screenwidth;

       var screenheight;

 

function Ypick(){

 

   if (!document.all)

   return

       screenwidth = screensize.offsetWidth;

       screenheight = screensize.offsetHeight;

       xincrement = (screenwidth/10);

       ystart = Math.round(Math.random()*(screenheight-92));

       yend = Math.round(Math.random()*(screenheight-92));

       document.all.ball.style.top=ystart;

       document.all.ball.style.left=-100;

       if (ystart > yend){

              ydiff = (ystart-yend);

              yincrement = (ydiff/xincrement);

              Moveneg();

       }

       else {

              ydiff = (yend-ystart);

              yincrement = (ydiff/xincrement);

              Movepos();

       }

}    

function Moveneg(){

       if (screenwidth > parseInt(document.all.ball.style.left)) {

        with (document.all.ball) {

              style.left = parseInt(style.pixelLeft + 10);

              style.top = parseInt(style.pixelTop - yincrement);

              }

        setTimeout('Moveneg()',20);

    }

       else {

              with (document.all.ball) {

              style.left = parseInt(style.pixelLeft - screenwidth);

              style.top = parseInt(style.pixelTop - yend);

              }

              Ypick();

       }

}

function Movepos(){

       if (screenwidth > parseInt(document.all.ball.style.left)) {

        with (document.all.ball) {

              style.left = parseInt(style.pixelLeft + 10);

              style.top = parseInt(style.pixelTop + yincrement);

              }

        setTimeout('Movepos()',60);

    }

       else {

              with (document.all.ball) {

              style.left = parseInt(style.pixelLeft - screenwidth);

              style.top = parseInt(style.pixelTop - yend);

              }

              Ypick();

       }

}

</script>

<div id="screensize" style="position: absolute; top: 0; left: 0; height: 100%; width: 100%"></div>

<p><img id="ball" SRC="image1.gif" style="container:in-flow;position:relative;left:-100;top:0;visibility:show">

 

 

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

<body onload="Ypick()">

 

0 Comments

Fri

27

Feb

2009

103、自制相册

103、自制相册

脚本说明:

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

<SCRIPT LANGUAGE="JavaScript"> var javascript_version = 1.0;</SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.1">  javascript_version = 1.1;</SCRIPT>

<script language=javascript>

self.name = "main"; // names current window as "main"

 

PicVar = 0;

 

// Object Fix

 

function Fix(DatVal, PicVal, TitVal, TxtVal) {

 

   this.DatVal = DatVal

 

   this.PicVal = PicVal

 

   this.TitVal = TitVal

 

   this.TxtVal = TxtVal

 

}

 

// Create new main array.

 

var SuzyArray = new Array()

 

// The following lines are the ONLY LINES in this whole script that you need to change!

 

// SuzyArray[PicVar++] = new Fix("date", "picname.jpg", "pic title", "pic description")

 

SuzyArray[PicVar++] = new Fix("2/25/2003", "2003-02-25-27.jpg", "Our house in the snow", "I took this beautiful picture this morning. The streets are <i>one solid sheet of ice</i> right now! It's insane. I don't think we'll be driving anywhere soon.")

 

SuzyArray[PicVar++] = new Fix("1/5/2003", "2003-01-05-03.jpg", "Rain in the trees", "I had taken <b>Rainlin</b> out for a walk in the stroller, and we saw these cute little trees and stopped for a picture.")

 

SuzyArray[PicVar++] = new Fix("1/31/2003", "2002-12-31-01.jpg", "Scott and Suzy", "I asked one of our friends to take this picture for us. Could my handsome hubby's eyes get any more <b>blue?</b> :)")

 

SuzyArray[PicVar++] = new Fix("12/7/2002", "2002-12-07-05.jpg", "on the hayride", "Daddy was having a wonderful time on the hayride. Dylan wasn't too sure about it!")

 

SuzyArray[PicVar++] = new Fix("11/9/2002", "2002-11-09-09.jpg", "Boys on wheels", "Daddy was holding Dylan up <i>with his knees!</i> Those skates sure are hard to stand up in, but once he got the knack for it Dylan didn't want to take them off.")

 

SuzyArray[PicVar++] = new Fix("10/30/2002", "2002-10-30-01.jpg", "Dylan the Builder", "Here's Dylan, all dressed up and ready for Halloween! Everything in his life is Bob-the-builder related.")

 

SuzyArray[PicVar++] = new Fix("6/19/2002", "2002-06-19-07.jpg", "Jabba's face", "It's hard, really hard, to get a picture of Jabba's face without him charging the camera.")

 

SuzyArray[PicVar++] = new Fix("6/11/2002", "2002-06-11-11.jpg", "Rain behind the house", "The brick that makes up the outside of the house proved to be really pretty for framing pictures of the kidlets.")

 

SuzyArray[PicVar++] = new Fix("6/9/2002", "2002-06-09-04.jpg", "Scott and Rainlin", "I just had to take some pictures of them before church.  They looked so nice!")

 

SuzyArray[PicVar++] = new Fix("6/9/2002", "2002-06-09-01.jpg", "Rainlin and Susan", "We both wore our pretty blue flower dresses that Sunday.")

 

SuzyArray[PicVar++] = new Fix("6/7/2002", "2002-06-07-24.jpg", "Kaytlyn and Rainlin playing dress-up", "Kaytlyn has a whole bunch of dress-up clothes, and Rain loves to go over to her house and play dress-up with her.")

 

SuzyArray[PicVar++] = new Fix("6/2/2002", "2002-06-02-13.jpg", "The Three Amigos", "Dylan, Daddy, and Rainlin were watching Castaway on the couch.  We just moved all the furniture into that 'great room,' and everyone seems to like it better in there.")

 

SuzyArray[PicVar++] = new Fix("6/1/2002", "2002-06-01-09.jpg", "Simon", "For those of you who have never met him, this is Simon.  He's the tatoo I have on my left leg.  I drew everything of the tattoo except for his head, which came from a greeting card my mother sent me while I was in the military.")

 

last = PicVar - 1;

 

current = 0;

 

function ShowSuzyPic(newpic) {

 

// (not working on some browsers)   document.playsound.play();

 

  current = newpic;

 

  SelectionBox = document.SuzyForm.SuzyDropdown;

 

  SelectionBox.options[current].selected = true;

 

  document.getElementById("SuzySpot").innerHTML = '<a href=javascript:SuzyPicRemote("' + SuzyArray[current].PicVal + '","last");><img name="PicShowing" src=' + SuzyArray[current].PicVal + ' height=200 border=0></a>';

 

  document.getElementById("Journal").outerHTML = '<div id=journal><br>' + SuzyArray[current].DatVal + '<p style="text-align:justify; text-indent:25px">' + SuzyArray[current].TxtVal + '</div>';

 

  if (document.SuzyForm.WhereView[1].checked) {

 

    timerID = setTimeout("SuzyPicRemote(SuzyArray[current].PicVal,'current')",1000)

 

  }

 

}

 

function RandomSuzyPic() {

 

  randompic = Math.floor(Math.random()*PicVar);

 

  last = current;

 

  ShowSuzyPic(randompic);

 

}

 

function PreviousSuzyPic() {

 

  last = current;

 

  current--;

 

  if(current<0) current = PicVar - 1;

 

  ShowSuzyPic(current);

 

}

 

function NextSuzyPic() {

 

  last = current;

 

  TotalImages = document.SuzyForm.SuzyDropdown.options.length;

 

  current++;

 

  if (current>=PicVar) current = 0;

 

  ShowSuzyPic(current);

 

}

 

function SuzyPicRemote(picName,whichPic) {

 

    ShowingImage = new Image();

 

    ShowingImage.src = picName;

 

    wid = ShowingImage.width + 50;

 

    hei = ShowingImage.height + 50;

 

  if (wid < 30 || hei < 30) {

 

    wid=650;

 

    hei=490;

 

  }

 

  if (screen.width < wid || screen.height < hei) {

 

    wid = screen.width - 50;

 

    hei = screen.height - 50;

 

  }

 

  OpenWindow = window.open("http://www.kitykity.com/photoalbum/clear.html", "remoteWin", "resizable=1, scrollbars=1, toolbar=0, left=15, top=10, width=" + wid + ", height=" + hei);

 

  OpenWindow.document.write('<html><body background=parchment.jpg><img src=' + picName + '></body></html>');

 

  OpenWindow.document.close();

 

}

 

function FindPic() {

 

  TotalFound = 0;

 

  SearchString = document.SuzyForm.SearchWord.value;

 

  SearchString = SearchString.toLowerCase();

 

  WriteResults = window.open("clear.html","resultwindow","height=300, width=300, toolbar=0, status=0, menubar=0, resizable=1, scrollbars=1");

 

  WriteResults.document.open();

 

  WriteResults.document.write('<div style="text-align:center; font:8pt verdana">'

 

    + 'You searched for:<br><i>' + SearchString + '</i><br><b>Results:</b><br>');

 

  for (loop=0; loop < PicVar ; loop++) {

 

    Keyword = SuzyArray[loop].TxtVal;

 

    Keyword = Keyword.toLowerCase();

 

    URL = SuzyArray[loop].PicVal;

 

    title = SuzyArray[loop].TitVal;

 

    title = title.toLowerCase();

 

    SearchResult = Keyword.indexOf(SearchString);

 

    SearchResult2 = title.indexOf(SearchString);

 

    if (SearchResult != "-1" || SearchResult2 != "-1") {

 

      last = current;

 

      WriteResults.document.write('<br><a href=javascript:ShowSuzyPic(' + loop + '); target="main">' + title + '</a>');

 

      TotalFound++;

 

    }

 

  }

 

  WriteResults.document.write('<p><b>Returned ' + TotalFound + ' results.</b>');

 

  WriteResults.document.close();

 

  if(javascript_version > 1.0)  {

 

    //delay a bit here because IE4 encounters errors

 

    //when trying to focus a recently opened window

 

    setTimeout('WriteResults.focus();',250);

 

  }

 

 

 

}

 

// -->

 

</script>

<form name="SuzyForm">

 

<table border=0><tr><td>

 

<table style="padding:0px; margin:0px" border=0 cellspacing=0><tr align=center>

 

<td bgcolor=f9f9f9 style="background:url(parchment.jpg); width:275px; border-top:2px groove #888888;border-left:4px groove #888888;border-bottom:4px groove #888888; padding:10px;  margin:0px">

 

<div id="SuzySpot">

 

<script language=javascript>

 

document.write('<a href=javascript:SuzyPicRemote("' + SuzyArray[current].PicVal + '","last");><img name="PicShowing" src=' + SuzyArray[current].PicVal + ' height=200 border=0></a>');

 

</script>

</div>

</td>

<td style="background:url(parchmentring.jpg); width:36px; border-top:2px groove #888888; border-bottom:4px groove #888888" border=0> </td>

<td style="background:url(parchment.jpg); border-top:2px groove #888888; border-right:4px groove #888888; border-bottom:4px groove #888888; padding:5px; padding-right:20px; width:225px; font:8pt verdana; color:#000044; margin-left:0px" valign=top>

<div id="Journal">

<script language=javascript>

document.write('<br>' + SuzyArray[current].DatVal + '<p style="text-align:justify; text-indent:25px">' + SuzyArray[current].TxtVal);

</script>

</div>

</td>

</tr></table>

<p>

<table border=0><tr align=center>

<td>

<input type=button value="<<" onClick="PreviousSuzyPic();" style="font:8pt verdana,helvetica,arial; text-align:center">

<input type=button value="随机" onClick="RandomSuzyPic();" style="font:8pt verdana,helvetica,arial">

<input type=button value=">>" onClick="NextSuzyPic();" style="font:8pt verdana,helvetica,arial; text-align:center">

<p>

<SELECT size=12 style='font:8pt verdana' name='SuzyDropdown' onChange='ShowSuzyPic(SuzyForm.SuzyDropdown.options.selectedIndex);'>

<script language=javascript>

  TotalImages = PicVar;

  for (loop=0; loop < TotalImages; loop++)

  {

  document.write("<option value=" + SuzyArray[loop].PicVal + ">" + SuzyArray[loop].TitVal + "</option>");

  }

</script>

</SELECT>

</td>

<td style="padding-left:25px; font:8pt verdana">

<p style="text-align:left"><input type=radio name="WhereView" value="chkLocal" CHECKED>- 在本页浏览图片

<br><input type=radio name="WhereView" value="chkRemote">- 在弹出窗口浏览图片</p>

<p>搜索图片:

  <br><input name="SearchWord" size=10 style="font:8pt verdana">

  <br><input type="button" value="查找" onClick="javascript:FindPic();" style="font:8pt verdana">

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

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

</FORM>

<p><SCRIPT Language="Javascript">

document.write("总共有  " + PicVar + "  张图片。最后更新:  " + document.lastModified +".");

</script>

 

0 Comments

Fri

27

Feb

2009

102、图片飞至左上角

102、图片飞至左上角

脚本说明:

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

<script LANGUAGE="JavaScript" FPTYPE="hdynamicanimation">

<!--

  dynamicanimAttr = "hdynamicanimation"

  animateElements = new Array()

  currentElement = 0

  speed = 0

  stepsZoom = 8

  stepsWord = 8

  stepsFly = 12

  stepsSpiral = 16

  steps = stepsZoom

  step = 0

  outString = ""

  function hdynAnimation()

  {

    var ms = navigator.appVersion.indexOf("MSIE")

    ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)

    if(!ie4)

    {

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

         (parseInt(navigator.appVersion.substring(0, 1)) >= 4))

      {

        for (index=document.layers.length-1; index >= 0; index--)

        {

            layer=document.layers[index]

            if (layer.left==10000)

                layer.left=0

        }

      }

      return

    }

    for (index=document.all.length-1; index >= document.body.sourceIndex; index--)

    {

      el = document.all[index]

      animation = el.getAttribute(dynamicanimAttr, false)

      if(null != animation)

      {

        if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")

        {

          ih = el.innerHTML

          outString = ""

          i1 = 0

          iend = ih.length

          while(true)

          {

            i2 = startWord(ih, i1)

            if(i2 == -1)

              i2 = iend

            outWord(ih, i1, i2, false, "")

            if(i2 == iend)

              break

            i1 = i2

            i2 = endWord(ih, i1)

            if(i2 == -1)

              i2 = iend

            outWord(ih, i1, i2, true, animation)

            if(i2 == iend)

              break

            i1 = i2

          }

          document.all[index].innerHTML = outString

          document.all[index].style.posLeft = 0

          document.all[index].setAttribute(dynamicanimAttr, null)

        }

        if(animation == "zoomIn" || animation == "zoomOut")

        {

          ih = el.innerHTML

          outString = "<SPAN " + dynamicanimAttr + "=\"" + animation + "\" style=\"position: relative; left: 10000;\">"

          outString += ih

          outString += "</SPAN>"

          document.all[index].innerHTML = outString

          document.all[index].style.posLeft = 0

          document.all[index].setAttribute(dynamicanimAttr, null)

        }

      }

    }

    i = 0

    for (index=document.body.sourceIndex; index < document.all.length; index++)

    {

      el = document.all[index]

      animation = el.getAttribute(dynamicanimAttr, false)

      if (null != animation)

      {

        if(animation == "flyLeft")

        {

          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth

          el.style.posTop = 0

        }

        else if(animation == "flyRight")

        {

          el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth

          el.style.posTop = 0

        }

        else if(animation == "flyTop" || animation == "dropWord")

        {

          el.style.posLeft = 0

          el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight

        }

        else if(animation == "flyBottom")

        {

          el.style.posLeft = 0

          el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight

        }

        else if(animation == "flyTopLeft")

        {

          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth

          el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight

        }

        else if(animation == "flyTopRight" || animation == "flyTopRightWord")

        {

          el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth

          el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight

        }

        else if(animation == "flyBottomLeft")

        {

          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth

          el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight

        }

        else if(animation == "flyBottomRight" || animation == "flyBottomRightWord")

        {

          el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth

          el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight

        }

        else if(animation == "spiral")

        {

          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth

          el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight

        }

        else if(animation == "zoomIn")

        {

          el.style.posLeft = 10000

          el.style.posTop = 0

        }

        else if(animation == "zoomOut")

        {

          el.style.posLeft = 10000

          el.style.posTop = 0

        }

        else

        {

          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth

          el.style.posTop = 0

        }

        el.initLeft = el.style.posLeft

        el.initTop = el.style.posTop

        animateElements[i++] = el

      }

    }

    window.setTimeout("animate();", speed)

  }

  function offsetLeft(el)

  {

    x = el.offsetLeft

    for (e = el.offsetParent; e; e = e.offsetParent)

      x += e.offsetLeft;

    return x

  }

  function offsetTop(el)

  {

    y = el.offsetTop

    for (e = el.offsetParent; e; e = e.offsetParent)

      y += e.offsetTop;

    return y

  }

  function startWord(ih, i)

  {

    for(tag = false; i < ih.length; i++)

    {

      c = ih.charAt(i)

      if(c == '<')

        tag = true

      if(!tag)

        return i

      if(c == '>')

        tag = false

    }

    return -1

  }

  function endWord(ih, i)

  {

    nonSpace = false

    space = false

    while(i < ih.length)

    {

      c = ih.charAt(i)

      if(c != ' ')

        nonSpace = true

      if(nonSpace && c == ' ')

        space = true

      if(c == '<')

        return i

      if(space && c != ' ')

        return i

      i++

    }

    return -1

  }

  function outWord(ih, i1, i2, dyn, anim)

  {

    if(dyn)

      outString += "<SPAN " + dynamicanimAttr + "=\"" + anim + "\" style=\"position: relative; left: 10000;\">"

    outString += ih.substring(i1, i2)

    if(dyn)

      outString += "</SPAN>"

  }

  function animate()

  {

    el = animateElements[currentElement]

    animation = el.getAttribute(dynamicanimAttr, false)

    step++

    if(animation == "spiral")

    {

      steps = stepsSpiral

      v = step/steps

      rf = 1.0 - v

      t = v * 2.0*Math.PI

      rx = Math.max(Math.abs(el.initLeft), 200)

      ry = Math.max(Math.abs(el.initTop),  200)

      el.style.posLeft = Math.ceil(-rf*Math.cos(t)*rx)

      el.style.posTop  = Math.ceil(-rf*Math.sin(t)*ry)

    }

    else if(animation == "zoomIn")

    {

      steps = stepsZoom

      el.style.fontSize = Math.ceil(50+50*step/steps) + "%"

      el.style.posLeft = 0

    }

    else if(animation == "zoomOut")

    {

      steps = stepsZoom

      el.style.fontSize = Math.ceil(100+200*(steps-step)/steps) + "%"

      el.style.posLeft = 0

    }

    else

    {

      steps = stepsFly

      if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")

        steps = stepsWord

      dl = el.initLeft / steps

      dt = el.initTop  / steps

      el.style.posLeft = el.style.posLeft - dl

      el.style.posTop = el.style.posTop - dt

    }

    if (step >= steps)

    {

      el.style.posLeft = 0

      el.style.posTop = 0

      currentElement++

      step = 0

    }

    if(currentElement < animateElements.length)

      window.setTimeout("animate();", speed)

  }

//-->

</script>

<p hdynamicanimation="flyRight"

style="position: relative !important; left: 10000 !important"><img

src="tvv.gif" width="75" height="94"></p>

 

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

<body onload="hdynAnimation()">

0 Comments

Fri

27

Feb

2009

101、最简单的图片变换

101、最简单的图片变换

脚本说明:

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

<SCRIPT LANGUAGE="JavaScript">

//Preload Kiss Images

IrishKiss=new Image(132,70)

IrishKiss.src="irishkiss.gif"

IrishKissAnim=new Image(132,70)

IrishKissAnim.src="irishkissanim.gif"

document.write('<a href="http://www.sina.com.cn" onMouseOver="document.Irish.src=IrishKissAnim.src" onMouseOut="document.Irish.src=IrishKiss.src"><img src="irishkiss.gif" name="Irish" width=125 height=125 border=0></a>')

</script>

 

0 Comments

Fri

27

Feb

2009

100、图片全景旋转的技巧

100、图片全景旋转的技巧

脚本说明:

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

  <table width="200" border="0" cellspacing="0" cellpadding="0" height="143" style="border:#333366 3 double">

    <tr>

      <td background="3d2.jpg" title="360全景图单击开始播放"><marquee style="cursor:hand" behavior=scroll direction=left width=200 height=143 scrollamount=2 scrolldelay=0 loop=1 onclick='this.start()' onmouseover='this.stop()' onmouseout='this.start()'><img src="3d2.jpg" width="811" height="143"><img src="3d2.jpg" width="811" height="143"><img src="3d2.jpg" width="811" height="143"><img src="3d2.jpg" width="811" height="143"></marquee></td>

    </tr>

  </table>

 

0 Comments

Fri

27

Feb

2009

99、图片的左右移动

99、图片的左右移动

脚本说明:

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

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

window.onerror = null;

 var bName = navigator.appName;

 var bVer = parseInt(navigator.appVersion);

 var NS4 = (bName == "Netscape" && bVer >= 4);

 var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);

 var NS3 = (bName == "Netscape" && bVer < 4);

 var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);

 

//------------------C U S T O M I S E------------------------

 

 var img_path="http://javascript.internet.com/img/headerlogo.gif";

 var time_length =50; //Scroll delay in milliseconds

 var begin_pos = 265; //Start position of scroll hint

 

//-----------------------------------------------------------

 

var i=begin_pos;

var j=i;

var scroll_length = 350; //The scroll length

var original_time=time_length;

 

if (NS4 || IE4) {

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

 layerStyleRef="layer.";

 layerRef="document.layers";

 styleSwitch="";

 }else{

 layerStyleRef="layer.style.";

 layerRef="document.all";

 styleSwitch=".style";

 }

}

 

//SCROLL RIGHT

function scroll_right(layerName)

{

 if (NS4 || IE4)

 {

   if(i<(begin_pos+scroll_length))

   {

    eval(layerRef+'["'+layerName+'"]'+

    styleSwitch+'.visibility="visible"');

    eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.left="'+(i)+'"');

    i++;

    j++;

   }

  if(i==j)

  {

   setTimeout("scroll_right('"+layerName+"')",time_length);

  }

 }

}

 

//SCROLL LEFT

function scroll_left(layerName)

{

 if (NS4 || IE4)

 {

   if(i>(begin_pos-scroll_length))

   {

    eval(layerRef+'["'+layerName+'"]'+

    styleSwitch+'.visibility="visible"');

    eval(layerRef+'["'+layerName+'"]'+ styleSwitch+'.left="'+(i)+'"');

    i--;

    j--;

   }

  if(i==j)

  {

   setTimeout("scroll_left('"+layerName+"')",time_length);

  }

 }

}

 

function scroll_out()

{

 time_length=10000000000000;

}

 

function reset()

{

 time_length=original_time;

}

 

document.write('<div id="prem_hint" style="position:relative; left:' + begin_pos + '" class="prem_hint"><img src="1334.gif"></div><center><a href="#" class="link" onmouseover="javascript:reset(); scroll_left(&#39;prem_hint&#39;);" onmouseout="javascript:scroll_out();"><b><< 向左移动</b></a> <b>|</b> <a href="#" class="link" onmouseover="javascript:reset(); scroll_right(&#39;prem_hint&#39;);" onmouseout="javascript:scroll_out();"><b>向右移动 >></b></a></center>');

//  End -->

</script>

 

0 Comments

Fri

27

Feb

2009

98、用按钮缩放图片

98、用按钮缩放图片

脚本说明:

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

<input type="button" value="缩小" onclick="small1()">

<input type="button" value="放大" onclick="big1()"><BR>

<img border="0"  name=images1 src="0005.jpg" width="74" height="125">

<script>

function small(){

var height1=images0.height

var width1=images0.width

images0.height=height1/1.5

images0.width=width1/1.5}

 

function big(){

var height1=images0.height

var width1=images0.width

images0.height=height1*1.5

images0.width=width1*1.5}

 

function small1(){

var height1=images1.height

var width1=images1.width

images1.height=height1/1.5

images1.width=width1/1.5}

 

function big1(){

var height1=images1.height

var width1=images1.width

images1.height=height1*1.5

images1.width=width1*1.5}

</script>

0 Comments

Fri

27

Feb

2009

97、有光源的图片效果

97、有光源的图片效果

脚本说明:

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

<STYLE>.aFilter{ filter:light();width:400}

</STYLE>

<SCRIPT LANGUAGE = Javascript TYPE="text/javascript">

function init(){

var ix2=myDiv.offsetWidth/2;

var iy2=myDiv.offsetHeight/2;

myDiv.filters[0].addCone(0,0,1,ix2,iy2,255,255,0,100,30)} //添加一个点光源

</SCRIPT>

<DIV CLASS="aFilter" ID="myDiv" onmousemove="myDiv.filters[0].moveLight( 0, window.event.x, window.event.y, 5, 1);">

<IMG src=1101.jpg></DIV>

 

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

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

0 Comments

Fri

27

Feb

2009

96、隐藏图片的展开

96、隐藏图片的展开

脚本说明:

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

<script language="JavaScript">

var b=0;

var c=true;

function fade(){

if(document.all);

if(c == true){b+=3}

if(b>380){c=false}

u.width=380

u.height=b; //运行后图片的大小

setTimeout("fade()",1)}//根据实际情况选择延时

</script>

<p align="center"><a href="javascript:"><img src="1101.jpg" name="u" width=0 height=0 border=0></a></p>

<p align="center"><a href="javascript:" onClick="fade()">展开图片</a></p>

 

0 Comments

Fri

27

Feb

2009

95、抖动的图片

95、抖动的图片

脚本说明:

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

<STYLE>.shakeimage {

       POSITION: relative

}

</STYLE>

<SCRIPT language=JavaScript1.2>

<!--

var rector=3

var stopit=0

var a=1

function init(which){

stopit=0

shake=which

shake.style.left=0

shake.style.top=0

}

function rattleimage(){

if ((!document.all&&!document.getElementById)||stopit==1)

return

if (a==1){

shake.style.top=parseInt(shake.style.top)+rector

}

else if (a==2){

shake.style.left=parseInt(shake.style.left)+rector

}

else if (a==3){

shake.style.top=parseInt(shake.style.top)-rector

}

else{

shake.style.left=parseInt(shake.style.left)-rector

}

if (a<4)

a++

else

a=1

setTimeout("rattleimage()",50)

}

function stoprattle(which){

stopit=1

which.style.left=0

which.style.top=0

}

//-->

</SCRIPT>

<IMG  class=shakeimage onmouseover=init(this);rattleimage() onmouseout=stoprattle(this) src="gywm.gif" border=0>

<IMG class=shakeimage onmouseover=init(this);rattleimage() onmouseout=stoprattle(this) src="lxwm.gif"  border=0>

<IMG  class=shakeimage onmouseover=init(this);rattleimage() onmouseout=stoprattle(this) src="kfzx.gif" border=0>

 

0 Comments

Fri

27

Feb

2009

94、放大图片的方法

94、放大图片的方法

脚本说明:

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

<img src="24.gif" onclick="this.width+=50;this.height+=50">

<img src=24.gif onclick="this.style.zoom='2'">

 

0 Comments

Fri

27

Feb

2009

93、变换的导航图片

93、变换的导航图片

脚本说明:

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

<script language=JavaScript>

<!-- // BannerAD

 

var bannerAD=new Array();

var bannerADlink=new Array();

var adNum=0;

 

bannerAD[0]="search_banner.gif";

bannerADlink[0]="http://www.china.net/";

bannerAD[1]="search_banner.gif";

bannerADlink[1]="http://www.7stk.com";

bannerAD[2]="hzbanner.gif";

bannerADlink[2]="http://www.7stk.com";

bannerAD[3]="search_banner.gif";

bannerADlink[3]="http://www.7stk.com";

bannerAD[4]="468.gif";

bannerADlink[4]="http://www.7stk.com/";

bannerAD[5]="email-banner";

bannerADlink[5]="http://www.7stk.com";

 

var preloadedimages=new Array();

for (i=1;i<bannerAD.length;i++){

preloadedimages[i]=new Image();

preloadedimages[i].src=bannerAD[i];

}

 

function setTransition(){

if (document.all){

bannerADrotator.filters.revealTrans.Transition=Math.floor(Math.random()*23);

bannerADrotator.filters.revealTrans.apply();

}

}

 

function playTransition(){

if (document.all)

bannerADrotator.filters.revealTrans.play()

}

 

function nextAd(){

if(adNum<bannerAD.length-1)adNum++ ;

else adNum=0;

setTransition();

document.images.bannerADrotator.src=bannerAD[adNum];

playTransition();

theTimer=setTimeout("nextAd()", 5000);

}

 

function jump2url(){

jumpUrl=bannerADlink[adNum];

jumpTarget='_blank';

if (jumpUrl != ''){

if (jumpTarget != '')window.open(jumpUrl,jumpTarget);

else location.href=jumpUrl;

}

}

function displayStatusMsg() {

status=bannerADlink[adNum];

document.returnValue = true;

}

 

//-->

</script>

 

<A onmouseover="displayStatusMsg();return document.returnValue"

href="javascript:jump2url()"><IMG

style="FILTER: revealTrans(duration=2,transition=20)" height=60

src="search_banner.gif" width=468 border=1

name=bannerADrotator>

</A>

<SCRIPT language=JavaScript>nextAd()</SCRIPT>

 

 

0 Comments

Fri

27

Feb

2009

92、图片轮回显示效果

92、图片轮回显示效果

脚本说明:

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

<script language=javaScript>

var i_strngth=1

var i_image=0

var imageurl = new Array()

imageurl[0] ="1840.gif"

imageurl[1] ="1841.gif"

imageurl[2] ="1842.gif"

function showimage() {

if(document.all) {

if (i_strngth<=110) {

testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";

i_strngth=i_strngth+10

var timer=setTimeout("showimage()",100)}

else {

clearTimeout(timer)

var timer=setTimeout("hideimage()",1000)}}

if(document.layers){

clearTimeout(timer)

document.testimage.document.write("<img src="+imageurl[i_image]+" border=0>")

document.close()

i_image++

if (i_image >= imageurl.length) {i_image=0}

var timer=setTimeout("showimage()",2000)}}

function hideimage() {

if (i_strngth >=-10) {

testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";

i_strngth=i_strngth-10

var timer=setTimeout("hideimage()",100)}

else {

clearTimeout(timer)

i_image++

if (i_image >= imageurl.length) {i_image=0}

i_strngth=1

var timer=setTimeout("showimage()",500)}}

</script>

<div id="testimage" style="position:absolute;visibility:visible;top:120px;left:240px"></div>

 

 

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

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

0 Comments

Fri

27

Feb

2009

91、特殊分割的图片

91、特殊分割的图片

脚本说明:

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

<html xmlns:v="urn:schemas-microsoft-com:vml"

xmlns:o="urn:schemas-microsoft-com:office:office"

xmlns="http://www.k688.com">

<head>

<style>

v\:* {behavior:url(#default#VML);}

.shape {behavior:url(#default#VML);}

</style>

</head>

<body>

<v:shape style='position:absolute;margin-left:17.85pt;margin-top:109pt;width:261pt;height:1in'

coordsize="21600,21600" path="m0,0l21600,0m0,21600l21600,21600e">

<v:path textpathok="t"/>

<v:textpath on="t" fitpath="t" fitshape="t" style='font-family:"webdings";' string="!"/>

<v:fill type="frame" src="2201.jpg" />

</v:shape>

<v:oval style='width:120pt;height:90pt;'>

<v:fill type="frame" src="2201.jpg" />

</v:oval>

 

0 Comments

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

 

图像特效代码4