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

 

图像特效代码3

Fri

27

Feb

2009

90、图片的分割与合并

90、图片的分割与合并

脚本说明:

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

<div style="position:absolute;clip:rect(0,150,135,0)"><img src=2201.jpg></div>

<div id=f style="position:absolute;clip:rect(0,300,135,150)"><img src=2201.jpg></div>

<script>

var left=0

function move(){

f.style.pixelLeft=++left}

setInterval(move,100)

</script>

</SCRIPT>

0 Comments

Fri

27

Feb

2009

89、整个页面的移动图片

89、整个页面的移动图片

脚本说明:

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

<SCRIPT language=JavaScript><!--

var ver = 3

bVer = parseInt(navigator.appVersion);

if(bVer >= 4)  ver = 4

 

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

var ie = navigator.appName == "MSIE";

 

//////////// ticker variables ////////////////////////////////////////

 

var pix = 1;           // number of pixels to move per frame

var rate = 70;         // frames per second

var ImgWidth = 1200;   // width of ticker image

 

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

 

var time = 1000/rate;

var again = - ImgWidth

 

 

function tick() {

 

if (ver ==3) return

 

if (ns){

        document.Layer1.offset(-pix,0);

 

        document.Layer2.offset(-pix,0);

 

        if (document.Layer1.left <= again) document.Layer1.left = ImgWidth;

 

        if (document.Layer2.left <= again) document.Layer2.left = ImgWidth;

        }

else {

        newpix = document.all["Layer1"].style.pixelLeft - pix;

        newpix2 = document.all["Layer2"].style.pixelLeft - pix;

 

        document.all["Layer1"].style.pixelLeft = newpix;

 

        document.all["Layer2"].style.pixelLeft = newpix2;

 

        if (document.all["Layer1"].style.pixelLeft <= again) document.all["Layer1"].style.pixelLeft = ImgWidth;

 

        if (document.all["Layer2"].style.pixelLeft <= again) document.all["Layer2"].style.pixelLeft = ImgWidth;

        }      

 

        setTimeout('tick()', time);

}

 

//-->

 

 

</SCRIPT>

<SPAN id=Layer1

 

      style="Z-INDEX: 2; LEFT: 0px; WIDTH: 1200px; POSITION: absolute; TOP: 0px; HEIGHT: 100px"><IMG

 

      height=100 src="scroll.gif" width=1200 border=0> </SPAN><SPAN

 

      id=Layer2

 

      style="Z-INDEX: 1; LEFT: 1200px; WIDTH: 1200px; POSITION: absolute; TOP: 0px; HEIGHT: 100px"><IMG

 

      height=100 src="scroll.gif" width=1200 border=0>

 

  </SPAN>

 

 

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

<body onload=tick()>

 

0 Comments

Fri

27

Feb

2009

88、图片连续滚动效果

88、图片连续滚动效果

脚本说明:

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

<script type="text/javascript">

//Generate transition CSS (transition=0 to 23)

document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=0.4,transition=12) }</STYLE>');

 

//Uncomment the next line for fading rollovers instead of dissolving:

//document.write('<STYLE TYPE="text/css">.imgTrans{ filter:blendTrans(duration=0.4) }</STYLE>');

 

var onImages=new Array();

function Rollover(imgName, imgSrc)

{

       onImages[imgName] = new Image();

       onImages[imgName].src = imgSrc;

}

 

function turnOn(imgName){

       if(document.images[imgName].filters != null)

              document.images[imgName].filters[0].apply();

       document.images[imgName].offSrc = document.images[imgName].src;

       document.images[imgName].src    = onImages[imgName].src;

       if(document.images[imgName].filters != null)

              document.images[imgName].filters[0].play();

}

 

function turnOff(imgName){

       if(document.images[imgName].filters != null)

              document.images[imgName].filters[0].stop();

       document.images[imgName].src = document.images[imgName].offSrc;

}

 

//Specify name of participating images, plus paths to their onMouseover replacements:

Rollover("home",  "home_on.gif");

Rollover("about", "about_on.gif");

Rollover("scripts", "scripts_on.gif");

 

</script>

<a href = "http://www.7stk.com"

onMouseOver="turnOn('home');"

onMouseOut="turnOff('home');"><img name="home" class="imgTrans"

src="home_off.gif" border="0"></a><br>

 

<a href = "http://www.7syg.com/"

onMouseOver="turnOn('about');"

onMouseOut="turnOff('about');"><img name="about" class="imgTrans"

src="about_off.gif" border="0"></a><br>

 

<a href = "http://www.dynamicdrive.com/new.htm"

onMouseOver="turnOn('scripts');"

onMouseOut="turnOff('scripts');"><img name="scripts" class="imgTrans"

src="scripts_off.gif" border="0"></a><br>

0 Comments

Fri

27

Feb

2009

87、最简单的图片变换

87、最简单的图片变换

脚本说明:

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

<script type="text/javascript">

function init() {

  if (!document.getElementById) return

  var imgOriginSrc;

  var imgTemp = new Array();

  var imgarr = document.getElementsByTagName('img');

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

    if (imgarr[i].getAttribute('hsrc')) {

        imgTemp[i] = new Image();

        imgTemp[i].src = imgarr[i].getAttribute('hsrc');

        imgarr[i].onmouseover = function() {

            imgOriginSrc = this.getAttribute('src');

            this.setAttribute('src',this.getAttribute('hsrc'))

        }

        imgarr[i].onmouseout = function() {

            this.setAttribute('src',imgOriginSrc)

        }

    }

  }

}

onload=init;

 

</script>

<img src="1840.gif" hsrc="1841.gif">

<img src="1841.gif" hsrc="1842.gif">

 

0 Comments

Fri

27

Feb

2009

86、图片显隐的简单方法

86、图片显隐的简单方法

脚本说明:

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

<script>

var speed = 50;        //速度

var max_opacity = 100;  //最大

var min_opacity = 10;    //最小

var do_step  =  5;      //变化的幅度

 

       function change_opacity(obj,do_option)

       {

              if(obj.doing)

                     clearInterval(obj.doing);

              obj.doing = setInterval(do_option+"_alpha("+obj.sourceIndex+")",speed);      

       }

      

 

       function down_alpha(obj_index)

       {

              var obj = document.all[obj_index];

             

              if(obj.filters.Alpha.Opacity > min_opacity )

              {

                     obj.filters.Alpha.Opacity += -do_step;

              }    

              else

              {    

                     clearInterval(obj.doing);

                     obj.filters.Alpha.Opacity = min_opacity;

                     obj.doing = false;

              }    

       }    

       function up_alpha(obj_index)

       {

              var obj = document.all[obj_index];

             

              if(obj.filters.Alpha.Opacity<max_opacity)

                     obj.filters.Alpha.Opacity += do_step;

              else

              {    

                     clearInterval(obj.doing);

                     obj.filters.Alpha.Opacity = max_opacity;

                     obj.doing = false;

              }    

       }

      

</script>

<img  src="200206041.jpg" style="filter:Alpha(Opacity=10)" onmouseover="change_opacity(this,'up')" onmouseout="change_opacity(this,'down')" width="160" height="120">

<img  src="200206042.jpg" style="filter:Alpha(Opacity=10)" onmouseover="change_opacity(this,'up')" onmouseout="change_opacity(this,'down')" width="160" height="120">      

<img  src="200206043.jpg" style="filter:Alpha(Opacity=10)" onmouseover="change_opacity(this,'up')" onmouseout="change_opacity(this,'down')" width="160" height="120">      

<img  src="200206044.jpg" style="filter:Alpha(Opacity=10)" onmouseover="change_opacity(this,'up')" onmouseout="change_opacity(this,'down')" width="160" height="120">      

<img  src="200206045.jpg" style="filter:Alpha(Opacity=10)" onmouseover="change_opacity(this,'up')" onmouseout="change_opacity(this,'down')" width="160" height="120">  

0 Comments

Fri

27

Feb

2009

85、点击显示图片路径

85、点击显示图片路径 

脚本说明:

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

<div onclick=alert(this.children(0).src)><img src='szdesign.gif' ></div>

 

0 Comments

Fri

27

Feb

2009

84、图片大小随页面变化

84、图片大小随页面变化

 脚本说明:

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

<script language="JavaScript">

<!--

function Is() {

    var agent   = navigator.userAgent.toLowerCase();

    this.major  = parseInt(navigator.appVersion);

    this.minor  = parseFloat(navigator.appVersion);

    this.ns     = ((agent.indexOf('mozilla')   != -1) &&

                  (agent.indexOf('spoofer')    == -1) &&

                  (agent.indexOf('compatible') == -1) &&

                  (agent.indexOf('opera')      == -1) &&

                  (agent.indexOf('webtv')      == -1));

    this.ns2    = (this.ns && (this.major      ==  2));

    this.ns3    = (this.ns && (this.major      ==  3));

    this.ns4    = (this.ns && (this.major      ==  4));

    this.ns6    = (this.ns && (this.major      >=  5));

    this.ie     = (agent.indexOf("msie")       != -1);

    this.ie3    = (this.ie && (this.major      <   4));

    this.ie4    = (this.ie && (this.major      ==  4) &&

                  (agent.indexOf("msie 5.0")   == -1));

    this.ie5    = (this.ie && (this.major      ==  4) &&

                  (agent.indexOf("msie 5.0")   != -1));

    this.ieX    = (this.ie && !this.ie3 && !this.ie4);

}

 

var is = new Is();

//-->

</script>

<script langauge="javascript">

           if(is.ns4||is.ns6) {

               available_width=innerWidth;

               available_height=innerHeight;

           } else if(is.ie4||is.ie5) {

               available_width=document.body.clientWidth;

               available_height=document.body.clientHeight;

           }

           if(is.ie4 ||is.ie5||is.ns6|| is.ns4) {

              image1_width = (available_width*1.00);

              image1_height = (available_height*1.00);

              var image1 =   '<IMG SRC="20020801on.gif" WIDTH="' + image1_width + '" HEIGHT="' + image1_height + '">';

              document.write(image1);

              }

             

       </script>

 

 

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

<body onResize="history.go(0)">

0 Comments

Fri

27

Feb

2009

83、input按钮改变图片

83input按钮改变图片

脚本说明:

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

<img src="200202038.gif" id="oImg">

<input type="button" value="1" onclick="oImg.src='200202037.gif'">

<input type="button" value="2" onclick="oImg.src='200202036.gif'">

 

0 Comments

Fri

27

Feb

2009

82、幻影图片

82、幻影图片

脚本说明:

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

<style>

#test{

filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=30,Direction=90)

}

</style>

 

<img src="mouse0128.gif" id="test">

 

0 Comments

Fri

27

Feb

2009

81、图片的轮换显示

81、图片的轮换显示

脚本说明:

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

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

 

var Onerotate_delay = 2000; // delay in milliseconds (5000 = 5 secs)

Onecurrent = 0;

var OneLinks = new Array(3);

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

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

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

function Onenext() {

if (document.Oneslideform.Oneslide[Onecurrent+1]) {

document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent+1].value;

document.Oneslideform.Oneslide.selectedIndex = ++Onecurrent;

   }

else Onefirst();

}

function Oneprevious() {

if (Onecurrent-1 >= 0) {

document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent-1].value;

document.Oneslideform.Oneslide.selectedIndex = --Onecurrent;

   }

else Onelast();

}

function Onefirst() {

Onecurrent = 0;

document.images.Oneshow.src = document.Oneslideform.Oneslide[0].value;

document.Oneslideform.Oneslide.selectedIndex = 0;

}

function Onelast() {

Onecurrent = document.Oneslideform.Oneslide.length-1;

document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;

document.Oneslideform.Oneslide.selectedIndex = Onecurrent;

}

function Oneap(text) {

document.Oneslideform.Oneslidebutton.value = (text == "Stop") ? "Start" : "Stop";

Onerotate();

}

function Onechange() {

Onecurrent = document.Oneslideform.Oneslide.selectedIndex;

document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;

}

function Onerotate() {

if (document.Oneslideform.Oneslidebutton.value == "Stop") {

Onecurrent = (Onecurrent == document.Oneslideform.Oneslide.length-1) ? 0 : Onecurrent+1;

document.images.Oneshow.src = document.Oneslideform.Oneslide[Onecurrent].value;

document.Oneslideform.Oneslide.selectedIndex = Onecurrent;

window.setTimeout("Onerotate()", Onerotate_delay);

}

}

function Onetransport(){

window.location=OneLinks[Onecurrent]

}

//  End -->

</SCRIPT>

<TABLE border="0" cellspacing="0" cellpadding="0">

  <TR>

    <TD>

      <form name="Oneslideform" >

        <DIV align="center">

          <TABLE width="150" border="1" cellspacing="0" cellpadding="4" bordercolor="#330099">

            <TR>

              <TD bgcolor="#330099">

                <DIV align="center"><B><FONT color="#FFFFFF">自动显示图片</FONT></B></DIV>

              </TD>

            </TR>

            <TR>

              <TD bgcolor="#FFFFFF">

                <DIV align="center"><A href="javascript:Onetransport()"><IMG src="slideimage1.gif" width="90" height="90" name="Oneshow" border="0"></A></DIV>

              </TD>

            </TR>

            <TR>

              <TD bgcolor="#330099">

                <DIV align="center">

                  <SELECT name="Oneslide" onChange="Onechange();">

                    <OPTION value="slideimage1.gif"  selected>图片 1</OPTION>

                    <OPTION value="slideimage2.gif">图片 2</OPTION>

                    <OPTION value="slideimage3.gif">图片 3</OPTION>

                  </SELECT>

      </DIV>

              </TD>

            </TR>

            <TR>

              <TD bgcolor="#330099">

                <DIV align="center">

                  <INPUT type=button onClick="Oneprevious();" value="<<" title="上一个">

                  <INPUT type=button name="Oneslidebutton" onClick="Oneap(this.value);" value="开始循环" title="自动显示">

                  <INPUT type=button onClick="Onenext();" value=">>" title="下一个">

          </DIV>

              </TD>

            </TR>

          </TABLE>

        </DIV>

      </form>

    </TD>

  </TR>

</TABLE>

 

0 Comments

Fri

27

Feb

2009

80、半透明图片的显示

80、半透明图片的显示

脚本说明:

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

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

if ((navigator.appName.indexOf('Microsoft')+1)) {

document.write('<style type="text/css"> .opacity1 {filter:alpha(opacity=50)} .opacity2 {filter:alpha(opacity=100)} </style>'); }

if ((navigator.appName.indexOf('Netscape')+1)) {

document.write('<style type="text/css"> .opacity1 {-moz-opacity:0.5} .opacity2 {-moz-opacity:1} </style>'); }

else {

document.write(''); }

//  End -->

</script>

<table align="center" cellpadding="10">

<tr><td>

<a href="http://www.7stk.com"><img src="headerlogo1230.gif" border="0" class="opacity1" onmouseover="this.className='opacity2'" onmouseout="this.className='opacity1'"></a>

</td><td>

<a href="http://www.7stk.com"><img src="javascriptlogo-sm1230.gif" border="0" class="opacity1" onmouseover="this.className='opacity2'" onmouseout="this.className='opacity1'"></a>

</td></tr>

</table>

0 Comments

Fri

27

Feb

2009

79、跟随鼠标的图片

79、跟随鼠标的图片

脚本说明:

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

<SCRIPT>

<!-- Beginning of JavaScript -

 

// width and height of your image

var imgwidth=238

var imgheight=291

 

// number of slices the image is cut

var imgslices=12

 

// URL of your image

var imgurl="lady.jpg"

 

var width_slice=Math.ceil(imgwidth/imgslices)

var cliptop=0

var clipbottom=imgheight

var clipleft=0

var clipright=width_slice

 

var postop=0

var thispos=0

 

var x,y

var flag=0

var box

 

function handlerMM(e){

       x = event.clientX

       y = event.clientY

       flag=1

}

 

if (document.all) {

       document.onmousemove = handlerMM;

}

 

var xpos=new Array()

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

       xpos[i]=-imgwidth

}

 

var ypos=new Array()

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

       ypos[i]=-imgheight

}

 

function initiateworm() {

       if (document.all) {makeworm()}

}

 

function makeworm() {

       if (flag==1) {

           for (i=imgslices; i>=0; i--) {

                     thispos=width_slice

                   xpos[i]=xpos[i-1]-thispos

                     ypos[i]=ypos[i-1]

           }

              xpos[0]=x

              ypos[0]=y

              thispos=0

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

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

                  thisspan.posLeft=xpos[i]

                     thisspan.posTop=ypos[i]

           }

       }

       var timer=setTimeout("makeworm()",10)

}

 

document.write('<body bgcolor=#33CC33 onLoad=initiateworm()>')

 

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

    document.write("<span id='span"+i+"' style='position:absolute;visibility:visible;left:"+(-imgheight)+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")

       document.write("<img src="+imgurl+">")

    document.write("</span>")

       clipleft+=width_slice

       clipright+=width_slice

}

 

// - End of JavaScript - -->

 

</SCRIPT>

 

 

0 Comments

Fri

27

Feb

2009

78、最简单的图片变换

78、最简单的图片变换

脚本说明:

把如下代码加入<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

77、飞出边框的图片

77、飞出边框的图片

脚本说明:

把如下代码加入<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

76、上下跳动的宣传图片

76、上下跳动的宣传图片

脚本说明:

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

<script language="javascript">

var brOK=false;

var mie=false;

var aver=parseInt(navigator.appVersion.substring(0,1));

var aname=navigator.appName;

var mystop=0;

var step=0.2;

function checkbrOK()

{if(aname.indexOf("Internet Explorer")!=-1)

{if(aver>=4) brOK=navigator.javaEnabled();

mie=true;

}

if(aname.indexOf("Netscape")!=-1) 

{if(aver>=4) brOK=navigator.javaEnabled();}

}

var vmin=1.5;

var vmax=3;

var vr=2;

var timer1;

function Chip(chipname,width,height)

{this.named=chipname;

this.vx=vmin+vmin;

this.vy=0;

this.w=width;

this.h=height;

this.xx=0;

this.yy=0;

this.timer1=null;

}

function movechip(chipname)

{

if(brOK && mystop==0)

{eval("chip="+chipname);

if(!mie)

{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-4;

}

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

chip.vy=chip.vy+step;

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

if(chip.xx<=pageX)

{chip.xx=pageX;

chip.vx=vmin;

}

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

{

chip.xx=pageX;

chip.vx=vmin;

chip.yy=pageY;

chip.vy=vmin+vmax;

}

 

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

{

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

chip.vy=-chip.vy*0.65;

}

 

if(!mie)

{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+"')",40);

}

}

 

function stopme(flag)

{

brOk=true;

mystop=flag;

movechip("tome");

}

 

var tome;

var chip;

function tome()

{checkbrOK();

tome=new Chip("tome",80,80);

if(brOK && mystop==0)

{

movechip("tome");

}

}

 

ns4=(document.layers)?true:false;

ie4=(document.all)?true:false;

 

function cncover()

{

if(ns4){

       document.cnc.left=window.innerWidth/2-400;

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

       document.cnc.visibility="show";

       stopme(1);

       mytime=setTimeout("cncout()",3000);

       }else if(ie4)

       {

       document.all.cnc.style.left=window.document.body.offsetWidth/2-200;

       document.all.cnc.style.top=parseInt(document.all.tome.style.top);

       document.all.cnc.style.visibility="visible";

       stopme(1);

       mytime=setTimeout("cncout()",3000);

       }

}

 

function cncout()

{

clearTimeout(mytime);

if(ns4){

       document.cnc.visibility="hide";

       stopme(0);

       }else if(ie4)

       {

       document.all.cnc.style.visibility="hidden";

       stopme(0);

       }

}

onload=tome

</script>

<div id="tome" style="position:absolute;"><a href=www.tencent.com target="_blank"><img src=fudong_qq.gif border=0 width="119" height="89"></a></div>

 

0 Comments

Fri

27

Feb

2009

75、键盘移动图片

75、键盘移动图片

脚本说明:

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

<script language="JavaScript">

<!--

var key=0

var xx

 

function setOB(){

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

X = (n)? document.ppkoabcd : ppkoabcd.style

Xpos = parseInt(X.left);

Ypos = parseInt(X.top);

document.onkeydown = keyDown;

document.onkeyup = keyUp;

if (n) document.captureEvents(Event.keydown | Event.keyup);

}

 

function keyDown(e) {

key = (n)? e.which : event.keyCode

if (key == 108 || key == 76) m(1,2);

if (key == 114 || key == 82) m(1,3);

if (key == 100 || key == 68) m(1,4);

if (key == 117 || key == 85) m(1,5);

}

 

function keyUp(e) {

key=0;clearTimeout(xx);

}

 

function m(t,u) {

clearTimeout(xx)

if (t==1){

if (u==2){X.left = Xpos-=5;xx = setTimeout("m(1,2)", 40);}

if (u==3){X.left = Xpos+=5;xx = setTimeout("m(1,3)", 40);}

if (u==4){X.top = Ypos+=5;xx = setTimeout("m(1,4)", 40);}

if (u==5){X.top = Ypos-=5;xx = setTimeout("m(1,5)", 40);}

 

   }

}

//-->

</script>

<div id="ppkoabcd" style="position:absolute; left:340px; top:80px;">

  <img src="webcrawler.gif" width="88" height="31">

</div>

 

 

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

<body bgcolor="#fef4d9" OnLoad="setOB();focus()">

 

0 Comments

Fri

27

Feb

2009

74、照片扫描程序

74、照片扫描程序

脚本说明:

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

<DIV id=Layer1

style="BACKGROUND-COLOR: #000000; BORDER-BOTTOM: #000000 1px; BORDER-LEFT: #000000 1px; BORDER-RIGHT: #000000 1px; BORDER-TOP: #000000 1px; HEIGHT: 100%; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 778px; layer-background-color: #000000">

<TABLE border=0 cellPadding=0 cellSpacing=0 height="100%" width="100%">

 <TBODY>

 <TR>

  <TD height=44>

    <table border=0 cellpadding=0 cellspacing=0 width="100%" hspace="0"

   vspace="0">

     <tbody>

     <tr>

      <td valign="top" width="130" colspan="3">

       <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#000000">

        <tbody>

        <tr bgcolor=#000000>

         <td colspan="2" height="20" valign="top">

          <div align=center></div>

          <table bgcolor=#000000 border=0 cellpadding=0 cellspacing=0

         width="100%">

           <tbody>

           <tr align=middle bgcolor=#ffff99>

            <td id=flttgt style="FILTER: light(enabled=1)"><img height="278" src="06131.jpg" width="472" align="top"></td>

           </tr>

           <tr>

            <td height="3"><span id=holder

            style="COLOR: #000000; FONT-SIZE: 14pt"></span></td>

           </tr>

           </tbody>

          </table>

          <p> </p>

         </td>

        </tr>

        </tbody>

       </table>

       <table border=0 cellpadding=0 cellspacing=0 width="100%">

        <tbody>

        <tr>

         <td height=27></td>

        </tr>

        </tbody>

       </table>

      </td>

     </tr>

     </tbody>

    </table>

   </TD></TR>

 <TR>

   <TD height=0>  </TD>

  </TR>

 <TR hight="14">

  <TD> </TD></TR></TBODY></TABLE></DIV>

<SCRIPT language=javascript>

<!--

var g_numlights=0;

var blurbs=new Array("");

window.onload=setlights;

document.onclick=keyhandler;

flttgt.onmousemove=mousehandler;

 

function setlights(){

flttgt.filters[0].clear();

flttgt.filters[0].addcone(0,0,5,100,100,255,128,0,60,15);

if(g_numlights>0){

flttgt.filters[0].addcone(0,200,5,100,100,255,0,0,60,15);

if(g_numlights>1){

flttgt.filters[0].addcone(500,200,5,100,100,0,0,255,60,15);

if(g_numlights>2){

flttgt.filters[0].addcone(500,0,5,100,100,255,0,255,60,15);

}

}

}

}

 

function keyhandler(){

g_numlights=(g_numlights+=1)%4;

holder.innerHTML=blurbs[g_numlights];

setlights();

}

 

function mousehandler(){

x=(window.event.x-80);

y=(window.event.y-80);

flttgt.filters[0].movelight(0,x,y,5,1);

if(g_numlights>0){

flttgt.filters[0].movelight(1,x,y,5,1);

if(g_numlights>1){

flttgt.filters[0].movelight(2,x,y,5,1);

if(g_numlights>2){

flttgt.filters[0].movelight(3,x,y,5,1);

}

}

}

}

-->

</SCRIPT>

 

0 Comments

Fri

27

Feb

2009

73、鼠标点亮图片

73、鼠标点亮图片

脚本说明:

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

<style>

<!--

 

#myimage{

filter:light

}

 

-->

</style>

<img id="myimage" src="photo3.jpg">

<script language="JavaScript1.2">

 

s = 50; // the size of the spotlight

vp = 10; // the visibility percent of the picture

startx = 0; // the top position of your sportlight into the image (on start)

starty = 0; // the left position of your spotlight into the image (on start)

 

 

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

//            No need to edit below this line                    //

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

 

var IE = document.all?true:false

 

function moveL()

{

xv = tempX;

yv = tempY;

myimage.filters.light.MoveLight(1,xv,yv,s,true);

}

 

if (IE&&myimage.filters)

document.all.myimage.onmousemove = getMouseXY;

var tempX = 0

var tempY = 0

 

 

function getMouseXY(e) {

tempX = event.offsetX

tempY = event.offsetY

 

  if (tempX < 0){tempX = 0}

  if (tempY < 0){tempY = 0}

  if (t)

  { 

   moveL();

  }

 

  return true

}

 

var xv = startx;

var yv = starty;

var t= true;

if (IE&&myimage.filters){

myimage.style.cursor="hand";

myimage.filters.light.addAmbient(255,255,255,vp)

myimage.filters.light.addPoint(startx,starty,s,255,255,255,255)

}

 

</script>

 

0 Comments

Fri

27

Feb

2009

72、按钮直接放大图片

72、按钮直接放大图片

脚本说明:

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

<script language="JavaScript">

<!--

function MM_showHideLayers() { //v3.0

  var i,p,v,obj,args=MM_showHideLayers.arguments;

  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];

    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }

    obj.visibility=v; }

}

 

function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}

//-->

</script>

<a href="" onClick="return false"><img name="small" border="0" src="display.jpg" width="100" height="135" onClick="MM_showHideLayers('layer2','','show');MM_showHideLayers('layer','','hide');MM_showHideLayers('layer1','','hide');"></a>

<div id="layer2" style="position: absolute; left: 14px; top: 3px; width: 765; height: 202; z-index: 1; visibility: hidden">

  <table border="0" width="761" height="216" cellspacing="0" cellpadding="0">

    <tr bordercolor="#FFFFFF">

      <td width="624" valign="top" align="left">  

        <div align="center">

          <center>

            <table border="0" width="122%" height="181" cellspacing="0" cellpadding="0">

              <tr>

                <td width="100%" height="151" valign="top" align="center"><a href="http://www.7stk.com" onclick="return false" ><img name="big" src="display.jpg" onclick="MM_showHideLayers('layer2','','hide');MM_showHideLayers('layer','','show');MM_showHideLayers('layer1','','show');return false;" border="0"></a>

                </td>

              </tr>

              <tr>

                <td width="100%" height="12" valign="top" align="center"> </td>

              </tr>

            </table>

          </center>

        </div>

      </td>

    </tr>

  </table>

</div>

 

1 Comments

Fri

27

Feb

2009

71、图片轮换效果

71、图片轮换效果

脚本说明:

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

<script language="JavaScript1.2">

 

var slideshow_width=140 //SET IMAGE WIDTH

var slideshow_height=225 //SET IMAGE HEIGHT

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

 

var fadeimages=new Array()

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

fadeimages[0]="photo1.jpg"

fadeimages[1]="photo2.jpg"

fadeimages[2]="photo3.jpg"

 

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

 

var preloadedimages=new Array()

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

preloadedimages[p]=new Image()

preloadedimages[p].src=fadeimages[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:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>')

else

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

 

var curpos=10

var degree=10

var curcanvas="canvas0"

var curimageindex=0

var nextimageindex=1

 

 

function fadepic(){

if (curpos<100){

curpos+=10

if (tempobj.filters)

tempobj.filters.alpha.opacity=curpos

else if (tempobj.style.MozOpacity)

tempobj.style.MozOpacity=curpos/100

}

else{

clearInterval(dropslide)

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

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

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

nextimageindex=(nextimageindex<fadeimages.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("fadepic()",50)'

dropslide=eval(temp)

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

}

else

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

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

}

 

function resetit(what){

curpos=10

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

if (crossobj.filters)

crossobj.filters.alpha.opacity=curpos

else if (crossobj.style.MozOpacity)

crossobj.style.MozOpacity=curpos/100

}

 

function startit(){

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

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

rotateimage()

}

 

if (ie4||dom)

window.onload=startit

else

setInterval("rotateimage()",pause)

 

</script>

 

0 Comments

Fri

27

Feb

2009

70、图片的拉伸翻转

70、图片的拉伸翻转

脚本说明:

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

<SCRIPT language="JavaScript" type="text/javascript">

 

<!--hide

 

 

 

               //STEP 1: PUT THIS CODE INTO THE HEAD OF YOUR DOCUMENT

 

 

 

var wdmax=120;          //set maximum width of square image (px)

 

var wdmin=0;            //set minimum thickness of edge-on image (px)

 

var inc=5;              //set step change in px (wdmax-wdmin must be a multiple) )These two variables

 

var rate = 50;          //pause between steps (in millisec)                      )determine flip-flop speed

 

var pause = 1000;       //pause between flip and flop (in millisec)

 

var ff="flip";          //initialise whether movement starts with a "flip" (sideways) or "flop" (vertical) change.

 

                       

 

function flipflop() {

 

 if (ff=="flip") {

 

  var wd = document.getElementById("pic").getAttribute("width");

 

  wd = wd - inc;

 

  document.getElementById("pic").setAttribute("width",wd);

 

  if (wd==wdmin) {

 

   document.getElementById("pic").setAttribute("src","pic2.gif"); //substitute name of your second picture

 

   inc=-inc;

 

   }

 

  if (wd==wdmax) {

 

   ff="flop";

 

   inc=-inc;

 

   setTimeout("flipflop()",pause);

 

   }

 

   else {

 

   setTimeout("flipflop()",rate);

 

   }

 

  }

 

 else {

 

  var ht = document.getElementById("pic").getAttribute("height");

 

  ht = ht - inc;

 

  document.getElementById("pic").setAttribute("height",ht);

 

  if (ht==wdmin) {

 

   document.getElementById("pic").setAttribute("src","pic1.gif"); //substitute name of your first picture

 

   inc=-inc;

 

   }

 

  if (ht==wdmax) {

 

   ff="flip";

 

   inc=-inc;

 

   setTimeout("flipflop()",pause);

 

   }

 

   else {

 

   setTimeout("flipflop()",rate);

 

   }

 

  }

 

}

 

 

 

-->

 

</SCRIPT>

<center>

 

<TABLE border="0">

 

<th width="160" height="160">

 

<IMG src="pic1.gif" width="120" height="120" ID="pic">

 

</th></TABLE>

 

 

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

<body  onLoad="javascript:flipflop()">

0 Comments

Fri

27

Feb

2009

69、固定的图片广告

69、固定的图片广告

脚本说明:

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

<SCRIPT FOR=window EVENT=onload LANGUAGE="JavaScript">

initAd();//载入页面后,调用函数initAd()

</SCRIPT>

<script language="JavaScript">

<!--

function initAd() {

document.all.AdLayer.style.posTop = -200;

//设置onLoad事件激发以后,广告层相对于固定后的y方向位置

document.all.AdLayer.style.visibility = 'visible'//设置层为可见

MoveLayer('AdLayer');//调用函数MoveLayer()

}

function MoveLayer(layerName) {

var x = 600;//浮动广告层固定于浏览器的x方向位置

var y = 300;//浮动广告层固定于浏览器的y方向位置

var diff = (document.body.scrollTop + y - document.all.AdLayer.style.posTop)*.40;

var y = document.body.scrollTop + y - diff;

eval("document.all." + layerName + ".style.posTop = y");

eval("document.all." + layerName + ".style.posLeft = x");//移动广告层

setTimeout("MoveLayer('AdLayer');", 20);//设置20毫秒后再调用函数MoveLayer()

}

//-->

</script>

<!--下面为一个IDAdLayer的层(ID名不为AdLayer

上面MoveLayer()内的AdLayer也要作相应修改)包括一张带链接的图片-->

<div id=AdLayer style='position:absolute; width:61px; height:59px; z-index:20; visibility:hidden;; left: 600px; top: 300px'>

<a href="www.7stk.com"><img src='jzzylogo.gif' border="0" height="31" width="88"></a>

</div>

 

0 Comments

Thu

26

Feb

2009

68、超酷广告图片轮换

68、超酷广告图片轮换

脚本说明:

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

<style type=text/css>

#divScroller1 {      HEIGHT: 278px; OVERFLOW: hidden; POSITION: absolute; WIDTH: 438px; Z-INDEX: 9; visbility: visible}

.dynPage {     COLOR: black; FONT-FAMILY: arial,helvetica,sans-serif; FONT-SIZE: 12px; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; Z-INDEX: 10}

</style>

<script language=JavaScript type=text/javascript>

function lib_bwcheck(){ //Browsercheck (needed)

       this.ver=navigator.appVersion

       this.agent=navigator.userAgent

       this.dom=document.getElementById?1:0

       this.opera5=this.agent.indexOf("Opera 5")>-1

       this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;

       this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;

       this.ie4=(document.all && !this.dom && !this.opera5)?1:0;

       this.ie=this.ie4||this.ie5||this.ie6

       this.mac=this.agent.indexOf("Mac")>-1

       this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;

       this.ns4=(document.layers && !this.dom)?1:0;

       this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)

       return this

}

var bw=new lib_bwcheck()

 

/*** variables to configure... ***/

 

var numScrollPages = 4         //Set the number of pages (layers) here.

var transitionOut = 1;         //The 'out' effect... 0= no effect, 1= fade

var transitionIn = 1;          //The 'in' effect... 0= no effect, 1= fade, 2= slide

var slideAcceleration = 0.2;   //If you use the slide animation, set this somewhere between 0 and 1.

 

if(document.layers){ //NS4 resize fix...

       scrX= innerWidth; scrY= innerHeight;

       onresize= function(){if(scrX!= innerWidth || scrY!= innerHeight){history.go(0)} }

}

function scrollerobj(obj,nest){

       nest = (!nest)?"":'document.'+nest+'.'

       this.elm = bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):document.getElementById(obj)

       this.css = bw.ns4?this.elm:this.elm.style

       this.doc = bw.ns4?this.elm.document:document

       this.obj = obj+'scrollerobj'; eval(this.obj+'=this')

       this.x = (bw.ns4||bw.opera5)?this.css.left:this.elm.offsetLeft

       this.y = (bw.ns4||bw.opera5)?this.css.top:this.elm.offsetTop

       this.w = (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetWidth:bw.ns4?this.elm.clip.width:bw.opera5?this.css.pixelWidth:0

       this.h = (bw.ie4||bw.ie5||bw.ie6||bw.ns6)?this.elm.offsetHeight:bw.ns4?this.elm.clip.height:bw.opera5?this.css.pixelHeight:0

}

//object methods...

scrollerobj.prototype.moveTo = function(x,y){

       if(x!=null){this.x=x; this.css.left=x}

       if(y!=null){this.y=y; this.css.top=y}

}

scrollerobj.prototype.moveBy = function(x,y){this.moveTo(this.x+x,this.y+y)}

scrollerobj.prototype.hideIt = function(){this.css.visibility='hidden'}

scrollerobj.prototype.showIt = function(){this.css.visibility='visible'}

 

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

 

var onlineormyefile = 1;

var activePage = null;

var busy = 0;

function activate(num){

       if (activePage!=pages[num] && !busy){

              busy = 1;

              if (transitionOut==0 || !bw.opacity){ activePage.hideIt(); activateContinue(num); }

              else if (transitionOut==1) activePage.blend('hidden', 'activateContinue('+num+')');

       }

}

function activateContinue(num){

       busy = 1;

       activePage = pages[num];

       activePage.moveTo(0,0);

       if (transitionIn==0 || !bw.opacity){ activePage.showIt(); busy=0; }

       else if (transitionIn==1) {

              activePage.blend('visible', 'busy=0');

       }

       else if (transitionIn==3) { activePage.slide(0, slideAcceleration, 40, 'busy=0'); }

       //==== 调用变换过程====

       startshow(num)

}

 

//============ 变换设置 ==========

function startshow(num){

       if (num == 1) 

              { num = 2; }

       else

              if (num == 2)

                     { num = 3; }

              else

                     if (num == 3)

                            { num = 4; }

                     else

                            if (num == 4)

                                   { num = 1; }

       setTimeout('activate('+num+')',1000);

}

 

scrollerobj.prototype.blend= function(vis, fn){

       if (bw.ie5||bw.ie6 && !bw.mac) {

              if (vis=='visible') this.css.filter= 'blendTrans(duration=0.9)';

              else this.css.filter= 'blendTrans(duration=0.6)';

              this.elm.onfilterchange = function(){ eval(fn); };

              this.elm.filters.blendTrans.apply();

              this.css.visibility= vis;

              this.elm.filters.blendTrans.play();

       }

       else if (bw.ns6 || bw.ie&&!bw.mac){

              this.css.visibility= 'visible';

              vis=='visible' ? this.fadeTo(100, 7, 40, fn) : this.fadeTo(0, 9, 40, fn);

       }

       else {

              this.css.visibility= vis;

              eval(fn);

       }

};

 

 

var pageslidefadeLoaded = 0;

function initPageSlideFade(){

       scroller1 = new scrollerobj('divScroller1');

      

       pages = new Array();

       pages[0] = null;

       for (var i=1; i<=numScrollPages; i++){

              pages[i] = new scrollerobj('dynPage'+i, 'divScroller1');

              pages[i].moveTo(0,0);

       }

       bw.opacity = ( bw.ie && !bw.ie4 && navigator.userAgent.indexOf('Windows')>-1 ) || bw.ns6

       if (bw.ie5||bw.ie6 && !bw.mac) pages[1].css.filter= 'blendTrans(duration=0.6)'; // Loads the windows 9.x filters module.

       activateContinue(1);

 

       //if (bw.ie) for(var i=0;i<document.links.length;i++) document.links[i].onfocus=document.links[i].blur;

       pageslidefadeLoaded = 1;

}

//if the browser is ok, the script is started onload..

if(bw.bw && !pageslidefadeLoaded) onload = initPageSlideFade;

</script>

      <div id=divScroller1>

        <div class=dynPage id=dynPage1><img src="120021114.gif" width="438" height="278"></div>

        <div class=dynPage id=dynPage2><img src="220021114.gif" width="438" height="278"></div>

        <div class=dynPage id=dynPage3><img src="320021114.gif" width="438" height="278"></div>

        <div class=dynPage id=dynPage4><img src="420021114.gif" width="438" height="278"></div>

      </div>

 

0 Comments

Thu

26

Feb

2009

67、连续滚动的图片

67、连续滚动的图片

脚本说明:

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

<script language="JavaScript1.2">

 

//Specify the slider's width (in pixels)

var sliderwidth=300

//Specify the slider's height

var sliderheight=150

//Specify the slider's slide speed (larger is faster 1-10)

var slidespeed=3

//configure background color:

slidebgcolor="#EAEAEA"

 

//Specify the slider's images

var leftrightslide=new Array()

var finalslide=''

leftrightslide[0]='<a href="www.7stk.com"><img src="dynamicbook200211061.gif" border=1></a>'

leftrightslide[1]='<a href="www.7stk.com"><img src="dynamicbook200211062.gif" border=1></a>'

leftrightslide[2]='<a href="www.7stk.com"><img src="dynamicbook200211063.gif" border=1></a>'

leftrightslide[3]='<a href="www.7stk.com"><img src="dynamicbook200211064.gif" border=1></a>'

leftrightslide[4]='<a href="www.7stk.com"><img src="dynamicbook200211065.gif" border=1></a>'

 

 

////NO NEED TO EDIT BELOW THIS LINE////////////

 

var copyspeed=slidespeed

leftrightslide='<nobr>'+leftrightslide.join(" ")+'</nobr>'

var iedom=document.all||document.getElementById

if (iedom)

document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-3000">'+leftrightslide+'</span>')

var actualwidth=''

var cross_slide, ns_slide

 

function fillup(){

if (iedom){

cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2

cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3

cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide

actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth

cross_slide2.style.left=actualwidth+20

}

else if (document.layers){

ns_slide=document.ns_slidemenu.document.ns_slidemenu2

ns_slide2=document.ns_slidemenu.document.ns_slidemenu3

ns_slide.document.write(leftrightslide)

ns_slide.document.close()

actualwidth=ns_slide.document.width

ns_slide2.left=actualwidth+20

ns_slide2.document.write(leftrightslide)

ns_slide2.document.close()

}

lefttime=setInterval("slideleft()",30)

}

window.onload=fillup

 

function slideleft(){

if (iedom){

if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))

cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed

else

cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+30

 

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))

cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed

else

cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+30

 

}

else if (document.layers){

if (ns_slide.left>(actualwidth*(-1)+8))

ns_slide.left-=copyspeed

else

ns_slide.left=ns_slide2.left+actualwidth+30

 

if (ns_slide2.left>(actualwidth*(-1)+8))

ns_slide2.left-=copyspeed

else

ns_slide2.left=ns_slide.left+actualwidth+30

}

}

 

 

if (iedom||document.layers){

with (document){

document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')

if (iedom){

write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')

write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')

write('<div id="test2" style="position:absolute;left:0;top:0"></div>')

write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>')

write('</div></div>')

}

else if (document.layers){

write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')

write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')

write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')

write('</ilayer>')

}

document.write('</td></table>')

}

}

</script>

 

0 Comments

Thu

26

Feb

2009

66、星球内部的变化

66、星球内部的变化

脚本说明:

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

<STYLE>

body{

       font-family:"Georgia";

       font-size:16px;

       font-style:"italic";

       color:white;

       margin-top:330px;

       margin-left:30px;

       margin-right:30px

}

</STYLE>

<span id="sm" style="position:absolute;width:200;left:0;top:0;color:white;font-size:12;font-family:verdana;font-style:normal;">Loading...Please wait</span>

 

<div style="position:absolute;width:480;left:30;top:340">

</div>

<img id=sphereTextureImage src="dianesdaisiesbk1.jpg" style="display:none">

<img id=t1image src="frax3.gif" style="display:none">

<img id=t2image src="frax2.gif" style="display:none">

<img id=t3image src="frax3.gif" style="display:none">

<img id=t4image src="frax2.gif" style="display:none">

<img id=t5image src="frax3.gif" style="display:none">

<img id=t6image src="frax2.gif" style="display:none">

 

<OBJECT classid=CLSID:B6FFC24C-7E13-11D0-9B47-00C04FC2F51D

id=DAControl

style="height:300;position:absolute;left:20;top:20;width:500;BORDER-BOTTOM:#ffffff 2px ridge;BORDER-LEFT: #ffffff 2px ridge;BORDER-RIGHT: #ffffff 2px ridge;BORDER-TOP: #ffffff 2px ridge;">

<PARAM NAME="OpaqueForHitDetect" VALUE="1">

<PARAM NAME="UpdateInterval" VALUE="0.033">

</OBJECT>

 

<SCRIPT>

//Spinning the sphere in the changing box

//An original idea by Jilly September 2000

//Cobbled from some of my old scripts

//Phil Richards evolve@p-richards.demon.co.uk

function go(){

 

 

m = DAControl.MeterLibrary;

 

//Alter the cube and sphere sizes here:

sphereSize=0.022;

//cubeSize=0.013;

cubeSize=0.023;

 

//number of rings - control the number of elements in the sphere here

nr=9;

 

//This controls the maximum opacity of the cube - reduce it to make the cube always have some transparency

maxOpacity=0.8;

 

//Images for cube

//numberOfImages must be set to the correct value

numberOfImages=6;

holdTime=3;

changeTime=5;

 

//make sure there is one line here for each image:

t1img=m.ImportImage(t1image.src).MapToUnitSquare();

t2img=m.ImportImage(t2image.src).MapToUnitSquare();

t3img=m.ImportImage(t3image.src).MapToUnitSquare();

t4img=m.ImportImage(t4image.src).MapToUnitSquare();

t5img=m.ImportImage(t5image.src).MapToUnitSquare();

t6img=m.ImportImage(t6image.src).MapToUnitSquare();

 

//make sure there is one entry for each image in this line:

picsa=new Array(t1img,t2img,t3img,t4img,t5img,t6img);

pics=m.Array(picsa);

 

//texture for sphere

sphereTexture=m.ImportImage(sphereTextureImage.src).MapToUnitSquare()

 

//this next line causes the texture size to vary in time

//comment out the whole line for a static texture

sphereTexture=sphereTexture.Transform(m.Scale2UniformAnim(sdan(1,2,1,0)));

 

ind1=m.Mod(m.Add(m.Floor(m.Div(m.Localtime,da(holdTime+changeTime))),da(0)),da(numberOfImages));

ind2=m.Mod(m.Add(m.Floor(m.Div(m.Localtime,da(holdTime+changeTime))),da(1)),da(numberOfImages));

 

pics1=pics.NthAnim(ind1);

pics2=pics.NthAnim(ind2);

 

//=========================================================================

//Perforated sphere geo====================================================

//=========================================================================

 

//number of points in each ring

np=2*(nr-1);

 

//Generate point positions

//array to hold each unique Point3 for geometry

p=new Array();

//array to hold each unique Point2 for texture coordinates

u=new Array();

 

//create points

n=0;

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

       {

       theta=(i*Math.PI)/(nr-1);

       z=Math.cos(theta);

       r=Math.sin(theta);

       for(j=0;j<np;j++)

              {

              a=j*2*Math.PI/np;

              x=r*Math.cos(a);

              y=r*Math.sin(a);

              u[n]=m.Point2(j/np,i/(nr-1));

              p[n++]=m.Point3(x,y,z);

       }

}

 

//create face definitions and texture coords

//array to hold the Point3 triples for each face

pos=new Array();

//array to hold the texture coordinates

surf=new Array();

 

n=0;

for(i=0;i<nr-1;i++)

       {

       sc=i*np;

       sn=sc+np;

       for(j=0;j<np;j++)

       {

              surf[n]=u[sc+j];

              pos[n++]=p[sc+j];

              surf[n]=u[sn+j];

              pos[n++]=p[sn+j];

              if(j==np-1)

                     {

                     surf[n]=m.Point2(1.0,i/(nr-1));

                     pos[n++]=p[sn];

                     surf[n]=m.Point2(1.0,i/(nr-1));

                     pos[n++]=p[sn];

                     }

              else

                     {

                     surf[n]=u[sn+j+1];

                     pos[n++]=p[sn+j+1];

                     surf[n]=u[sn+j+1];

                     pos[n++]=p[sn+j+1];

              }

              surf[n]=u[sc+j];

              pos[n++]=p[sc+j];

              if(j==np-1)

                     {

                     surf[n]=m.Point2(1.0,i/(nr-1));

                     pos[n++]=p[sc];

                     }

              else

                     {

                     surf[n]=u[sc+j+1];

                     pos[n++]=p[sc+j+1];

                     }

              }

       }

 

//create face normals

norm=new Array()

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

       {

       v=m.Vector3(pos[i].X.Extract(),pos[i].Y.Extract(),pos[i].Z.Extract());

       norm[i]=v;

       }

 

//indices are null since we are using Point3, Vector3 definitions rather than doubles

sphereGeo=m.TriMesh(pos.length/3,pos,norm,surf,null);

 

//opacity value can be altered 0 to 1

sphereGeo=sphereGeo.TextureImage(sphereTexture).Opacity(0.5);

 

//these control the size of the sphere and the speed of rotation

sphereGeo=sphereGeo.Transform(

       m.Compose3Array(

              new Array(

                     m.Scale3Uniform(sphereSize),

                     m.Rotate3Rate(m.XVector3, 0.4),

                     m.Rotate3Rate(m.YVector3, 0.22),

                     m.Rotate3Rate(m.ZVector3, 0.51)

              )

       )              

);

 

//=========================================================================

// Cube geo ===============================================================

//=========================================================================

 

//Define a double-sided plane that behaves like a Shapes transform sheet

p0=m.point3( 1, 1,0);

p1=m.point3(-1, 1,0);

p2=m.point3(-1,-1,0);

p3=m.point3( 1,-1,0);

 

n0=m.vector3(0,0,1);

n1=m.vector3(0,0,-1);

 

u0 =m.point2(1.0, 1.0);

u1 =m.point2(0.0, 1.0);

u2 =m.point2(0.0, 0.0);

u3 =m.point2(1.0, 0.0);

 

pos=new Array(

       p0,p1,p2,

       p0,p2,p3,

       p0,p2,p1,

       p0,p3,p2

);

 

norm=new Array(

       n0,n0,n0,

       n0,n0,n0,

       n1,n1,n1,

       n1,n1,n1

);

 

surf=new Array(

       u0, u1, u2,

       u0, u2, u3,

       u0, u2, u1,

       u0, u3, u2

);

 

faceRad=m.SequenceArray(

       new Array(

              da(5).Duration(holdTime),

              m.SlowInSlowOut(5,1,changeTime,12)

       )

).RepeatForever();

 

faceOpac1=m.SequenceArray(

       new Array(

              da(maxOpacity).Duration(holdTime),

              m.SlowInSlowOut(maxOpacity,0,changeTime,12)

       )

).RepeatForever();

 

faceOpac2=m.SequenceArray(

       new Array(

              da(0).Duration(holdTime),

              m.SlowInSlowOut(0,maxOpacity,changeTime,12)

       )

).RepeatForever();

 

fc=m.TriMesh (4, pos, norm, surf, null);

fc1=fc.TextureImage(pics1);

fc2=fc.TextureImage(pics2);

 

cube1=cubey(fc1,da(1)).OpacityAnim(faceOpac1);

cube2=cubey(fc2,faceRad).OpacityAnim(faceOpac2);

 

//=========================================================================

// Lights, camera, action =================================================

//=========================================================================

 

 

light = m.UnionGeometry(

              m.AmbientLight.LightColor(m.colorRgb(.5,.5,.5)),

              m.PointLight.Transform(m.Translate3(0,0.3,0.3))

)

light1=m.AmbientLight;

 

camera=m.PerspectiveCamera(.2,.19);

scene=m.UnionGeometryArray(new Array(cube1,cube2,sphereGeo,light)).Render(camera);

DAControl.Image=scene;

sm.style.visibility="hidden";

 

DAControl.Start();

}

//=========================================================================

// Support functions ======================================================

//=========================================================================

 

//returns a cube sans top & bottom, rotating, and with bouncing faces

function cubey(face,frad)

{

       facef=face.Transform(m.Translate3Anim(da(0),da(0),frad));

       facefb=m.UnionGeometryArray(

              new Array(

                     facef,

                     facef.Transform(m.Rotate3(m.YVector3, Math.PI))

              )

       );

 

       facelr=facefb.Transform(m.Rotate3(m.YVector3,Math.PI/2));

       cube=m.UnionGeometryArray(new Array(facefb,facelr));

 

       cube=cube.Transform(

              m.Compose3Array(

                     new Array(

                            m.Scale3Uniform(cubeSize),

                            m.Rotate3(m.XVector3, 0.2),

                            m.Rotate3Rate(m.YVector3, 0.5)

                     )

              )

       );

 

       return(cube);

}

 

//returns a DANumber that varies between min and max rate times per second.

function sdan(min,max,rate,phase)

{

       a=(max-min)/2;

       b=a+min;

       return(m.Add(m.DANumber(b),m.Mul(m.DANumber(a),m.Sin(m.Mul(m.Add(m.Localtime,m.DANumber(phase)),m.DANumber(rate))))));

}

 

 

function da(n)

{

       return(m.DANumber(n));

}

 

</SCRIPT>

 

 

 

 

第二步:把<body>中的代码改为:

<body  onload="go();">

 

0 Comments

Thu

26

Feb

2009

65、点击图片获得信息

65、点击图片获得信息

脚本说明:

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

<img src="ps.gif" width=200 height=80

  onclick=alert('图片原始宽度为:'+GetImageWidth(this)+'\n图片原始高度为:'+GetImageHeight(this))>

<script>

var OriginImage=new Image();

function GetImageWidth(oImage)

{

  if(OriginImage.src!=oImage.src)OriginImage.src=oImage.src;

  return OriginImage.width;

}

function GetImageHeight(oImage)

{

  if(OriginImage.src!=oImage.src)OriginImage.src=oImage.src;

  return OriginImage.height;

}

</script>

 

0 Comments

Thu

26

Feb

2009

64、图片边框的变幻

64、图片边框的变幻

脚本说明:

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

<style>

body img{border:1px solid white}

</style>

<script language="JavaScript">

var color;

var i

function change(i){

var a=Math.random()*255;

var b=Math.random()*255;

var c=Math.random()*255;

color="rgb("+a+","+b+","+c+")";

var source=event.srcElement;

if (source.tagName=="IMG")

source.style.border="1px solid "+i+""

}

</script>

<a href="http://www.7stk.com/fine/ny/n1.htm"><img src="lttp.jpg"  border="0" width="59" height="59"></a>

 

 

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

<body bgcolor="#FFFFFF" text="#000000" onmouseover="change(color)" onmouseout="change('white')">

 

0 Comments

Thu

26

Feb

2009

63、上下左右滚动图片

63、上下左右滚动图片

<!--下面是向上滚动代码-->

 

<div id=butong_net_top style=overflow:hidden;height:100;width:90;>

<div id=butong_net_top1>

<img src="http://www.7stk.com/images/logo88.gif">

<img src="http://www.7stk.com/images/logo88.gif">

<img src="http://www.7stk.com/images/logo88.gif">

<img src="http://www.7stk.com/images/logo88.gif">

<img src="http://www.7stk.com/images/logo88.gif">

<img src="http://www.7stk.com/images/logo88.gif">

<img src="http://www.7stk.com/images/logo88.gif">

<img src="http://www.7stk.com/images/logo88.gif">

<img src="http://www.7stk.com/images/logo88.gif">

</div>

<div id=butong_net_top2></div>

</div>

<script>

var speed=30

butong_net_top2.innerHTML=butong_net_top1.innerHTML //克隆butong_net_top1butong_net_top2

function Marquee1(){

//当滚动至butong_net_top1butong_net_top2交界时

if(butong_net_top2.offsetTop-butong_net_top.scrollTop<=0)  

butong_net_top.scrollTop-=butong_net_top1.offsetHeight //butong_net_top跳到最顶端

else{

butong_net_top.scrollTop++;

}

}

var MyMar1=setInterval(Marquee1,speed)//设置定时器

//鼠标移上时清除定时器达到滚动停止的目的

butong_net_top.onmouseover=function() {clearInterval(MyMar1)}

//鼠标移开时重设定时器

butong_net_top.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}

</script>

 

<!--向上滚动代码结束-->

 

<br>

 

<!--下面是向下滚动代码-->

 

<div id=butong_net_bottom style=overflow:hidden;height:100;width:90;>

<div id=butong_net_bottom1>

<img src="http://www.7stk.com/images/logo88.gif">

<img src="http://www.7stk.com/images/logo88.gif">

<img src="http://www.7stk.com/images/logo88.gif">

<img src="http://www.7stk.com/images/logo88.gif">

<img src="http://www.7stk.com/images/logo88.gif">

<img src="http://www.7stk.com/images/logo88.gif">

<img src="http://www.7stk.com/images/logo88.gif">

<img src="http://www.7stk.com/images/logo88.gif">

<img src="http://www.7stk.com/images/logo88.gif">

</div>

<div id=butong_net_bottom2></div>

</div>

<script>

var speed=30

butong_net_bottom2.innerHTML=butong_net_bottom1.innerHTML

butong_net_bottom.scrollTop=butong_net_bottom.scrollHeight

function Marquee2(){

if(butong_net_bottom1.offsetTop-butong_net_bottom.scrollTop>=0)

butong_net_bottom.scrollTop+=butong_net_bottom2.offsetHeight

else{

butong_net_bottom.scrollTop--

}

}

var MyMar2=setInterval(Marquee2,speed)

butong_net_bottom.onmouseover=function() {clearInterval(MyMar2)}

butong_net_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}

</script>

 

<!--向下滚动代码结束-->

 

<br>

 

<!--下面是向左滚动代码-->

 

<div id="butong_net_left" style="overflow:hidden;width:500px;">

<table cellpadding="0" cellspacing="0" border="0">

<tr><td id="butong_net_left1" valign="top" align="center">

<table cellpadding="2" cellspacing="0" border="0">

<tr align="center">

<td><img src="http://www.7stk.com/images/logo88.gif"></td>

<td><img src="http://www.7stk.com/images/logo88.gif"></td>

<td><img src="http://www.7stk.com/images/logo88.gif"></td>

<td><img src="http://www.7stk.com/images/logo88.gif"></td>

<td><img src="http://www.7stk.com/images/logo88.gif"></td><td><img src="http://www.7stk.com/images/logo88.gif" width="88"></td>

<td><img src="http://www.7stk.com/images/logo88.gif"></td>

</tr>

</table>

</td>

<td id="butong_net_left2" valign="top"></td>

</tr>

</table>

</div>

<script>

var speed=30//速度数值越大速度越慢

butong_net_left2.innerHTML=butong_net_left1.innerHTML

function Marquee3(){

if(butong_net_left2.offsetWidth-butong_net_left.scrollLeft<=0)

butong_net_left.scrollLeft-=butong_net_left1.offsetWidth

else{

butong_net_left.scrollLeft++

}

}

var MyMar3=setInterval(Marquee3,speed)

butong_net_left.onmouseover=function() {clearInterval(MyMar3)}

butong_net_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}

</script>

 

<!--向左滚动代码结束-->

 

<br>

 

<!--下面是向右滚动代码-->

 

<div id="butong_net_right" style="overflow:hidden;width:500px;">

<table cellpadding="0" cellspacing="0" border="0">

<tr><td id="butong_net_right1" valign="top" align="center">

<table cellpadding="2" cellspacing="0" border="0">

<tr align="center">

<td><img src="http://www.7stk.com/images/logo88.gif"></td>

<td><img src="http://www.7stk.com/images/logo88.gif"></td>

<td><img src="http://www.7stk.com/images/logo88.gif"></td>

<td><img src="http://www.7stk.com/images/logo88.gif"></td>

<td><img src="http://www.7stk.com/images/logo88.gif"></td>

</tr>

</table>

</td>

<td id="butong_net_right2" valign="top"></td>

</tr>

</table>

</div>

<script>

var speed=30//速度数值越大速度越慢

butong_net_right2.innerHTML=butong_net_right1.innerHTML

function Marquee4(){

if(butong_net_right.scrollLeft<=0)

butong_net_right.scrollLeft+=butong_net_right2.offsetWidth

else{

butong_net_right.scrollLeft--

}

}

var MyMar4=setInterval(Marquee4,speed)

butong_net_right.onmouseover=function() {clearInterval(MyMar4)}

butong_net_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}

</script>

 

<!--向右滚动代码结束-->

 

0 Comments

Thu

26

Feb

2009

62、图片显隐变幻

62、图片显隐变幻

脚本说明:

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

<script type="text/javascript">

//Generate transition CSS (transition=0 to 23)

document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=0.4,transition=12) }</STYLE>');

 

//Uncomment the next line for fading rollovers instead of dissolving:

//document.write('<STYLE TYPE="text/css">.imgTrans{ filter:blendTrans(duration=0.4) }</STYLE>');

 

var onImages=new Array();

function Rollover(imgName, imgSrc)

{

       onImages[imgName] = new Image();

       onImages[imgName].src = imgSrc;

}

 

function turnOn(imgName){

       if(document.images[imgName].filters != null)

              document.images[imgName].filters[0].apply();

       document.images[imgName].offSrc = document.images[imgName].src;

       document.images[imgName].src    = onImages[imgName].src;

       if(document.images[imgName].filters != null)

              document.images[imgName].filters[0].play();

}

 

function turnOff(imgName){

       if(document.images[imgName].filters != null)

              document.images[imgName].filters[0].stop();

       document.images[imgName].src = document.images[imgName].offSrc;

}

 

//Specify name of participating images, plus paths to their onMouseover replacements:

Rollover("home",  "home_on.gif");

Rollover("about", "about_on.gif");

Rollover("scripts", "scripts_on.gif");

 

</script>

<a href = "http://www.7stk.com"

onMouseOver="turnOn('home');"

onMouseOut="turnOff('home');"><img name="home" class="imgTrans"

src="home_off.gif" border="0"></a><br>

 

<a href = "http://www.7stk.com/fine"

onMouseOver="turnOn('about');"

onMouseOut="turnOff('about');"><img name="about" class="imgTrans"

src="about_off.gif" border="0"></a><br>

 

<a href = "http://www.7stk.com/music"

onMouseOver="turnOn('scripts');"

onMouseOut="turnOff('scripts');"><img name="scripts" class="imgTrans"

src="scripts_off.gif" border="0"></a><br>

 

0 Comments

Thu

26

Feb

2009

61、图片的大小变换

61、图片的大小变换

脚本说明:

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

<input type=button value='慢慢变大' onclick=max()>

<input type=button value='慢慢变小' onclick=min()><br>

<img id=MainImg src=049.gif>

<script>

 

var i=0

 

//变大

function max(){

MImg=MainImg.style.pixelWidth+=i++

MainImg.style.pixelHeight=MImg*aaa

if(i<20)setTimeout('max()',100)

}

 

//变小

function min(){

MImg=MainImg.style.pixelWidth-=i--

MainImg.style.pixelHeight=MImg*aaa

if(i>0)setTimeout('min()',100)

}

 

function init(){

aaa=MainImg.height/MainImg.width

MainImg.style.pixelWidth=0

MainImg.style.pixelHeight=0

}

 

onload=init

</script>

 

0 Comments