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

 

图像特效代码7

Sat

28

Feb

2009

210、图片展示效果 代码

210、图片展示效果  代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>超酷超绚精美图片展示效果代码</title>

<style type="text/css">

       html {

              overflow: hidden;

       }

 

       body {

              margin: 0px;

              padding: 0px;

              background: #000;

              position: absolute;

              width: 100%;

              height: 100%;

              cursor: crosshair;

       }

 

       #diapoContainer {

              position: absolute;

              left: 10%;

              top: 10%;

              width: 80%;

              height: 80%;

              background: #222;

              overflow: hidden;

       }

 

       .imgDC {

              position: absolute;

              cursor: pointer;

              border: #000 solid 2px;

              filter: alpha(opacity=90);

              opacity: 0.9;

              visibility: hidden;

       }

 

       .spaDC {

              position: absolute;

              filter: alpha(opacity=20);

              opacity: 0.2;

              background: #000;

              visibility: hidden;

       }

 

       .imgsrc {

              position: absolute;

              width: 120px;

              height: 67px;

              visibility: hidden;

              margin: 4%;

       }

 

       #bkgcaption {

              position: absolute;

              bottom: 0px;

              left: 0px;

              width: 100%;

              height: 6%;

              background:#1a1a1a;

       }

       #caption {

              position: absolute;

              font-family: arial, helvetica, verdana, sans-serif;

              white-space: nowrap;

              color: #fff;

              bottom: 0px;

              width: 100%;

              left: -10000px;

              text-align: center;

       }

 

</style>

<script type="text/javascript">

var xm;

var ym;

 

/* ==== onmousemove event ==== */

document.onmousemove = function(e){

       if(window.event) e=window.event;

       xm = (e.x || e.clientX);

       ym = (e.y || e.clientY);

}

 

/* ==== window resize ==== */

function resize() {

       if(diapo)diapo.resize();

}

onresize = resize;

 

/* ==== opacity ==== */

setOpacity = function(o, alpha){

       if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;

}

 

 

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

/* ===== encapsulate script ==== */

diapo = {

       O : [],

       DC : 0,

       img : 0,

       txt : 0,

       N : 0,

       xm : 0,

       ym : 0,

       nx : 0,

       ny : 0,

       nw : 0,

       nh : 0,

       rs : 0,

       rsB : 0,

       zo : 0,

       tx_pos : 0,

       tx_var : 0,

       tx_target : 0,

 

       /////// script parameters ////////

       attraction : 2,

       acceleration : .9,

       dampening : .1,

       zoomOver : 2,

       zoomClick : 6,

       transparency : .8,

       font_size: 18,

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

 

       /* ==== diapo resize ==== */

       resize : function(){

              with(this){

                     nx = DC.offsetLeft;

                     ny = DC.offsetTop;

                     nw = DC.offsetWidth;

                     nh = DC.offsetHeight;

                     txt.style.fontSize = Math.round(nh / font_size) + "px";

                     if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();

                     rsB = rs;

              }

       },

 

       /* ==== create diapo ==== */

       CDiapo : function(o){

              /* ==== init variables ==== */

              this.o        = o;

              this.x_pos    = this.y_pos    = 0;

              this.x_origin = this.y_origin = 0;

              this.x_var    = this.y_var    = 0;

              this.x_target = this.y_target = 0;

              this.w_pos    = this.h_pos    = 0;

              this.w_origin = this.h_origin = 0;

              this.w_var    = this.h_var    = 0;

              this.w_target = this.h_target = 0;

              this.over     = false;

              this.click    = false;

 

              /* ==== create shadow ==== */

              this.spa = document.createElement("span");

              this.spa.className = "spaDC";

              diapo.DC.appendChild(this.spa);

 

              /* ==== create thumbnail image ==== */

              this.img = document.createElement("img");

              this.img.className = "imgDC";

              this.img.src = o.src;

              this.img.O = this;

              diapo.DC.appendChild(this.img);

              setOpacity(this.img, diapo.transparency);

 

              /* ==== mouse events ==== */

              this.img.onselectstart = new Function("return false;");

              this.img.ondrag = new Function("return false;");

              this.img.onmouseover = function(){

                     diapo.tx_target=0;

                     diapo.txt.innerHTML=this.O.o.alt;

                     this.O.over=true;

                     setOpacity(this,this.O.click?diapo.transparency:1);

              }

              this.img.onmouseout = function(){

                     diapo.tx_target=-diapo.nw;

                     this.O.over=false;

                     setOpacity(this,diapo.transparency);

              }

              this.img.onclick = function() {

                     if(!this.O.click){

                            if(diapo.zo && diapo.zo != this) diapo.zo.onclick();

                            this.O.click = true;

                            this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;

                            this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;

                            diapo.zo = this;

                            setOpacity(this,diapo.transparency);

                     } else {

                            this.O.click = false;

                            this.O.over = false;

                            this.O.resize();

                            diapo.zo = 0;

                     }

              }

 

              /* ==== rearrange thumbnails based on "imgsrc" images position ==== */

              this.resize = function (){

                     with (this) {

                            x_origin = o.offsetLeft;

                            y_origin = o.offsetTop;

                            w_origin = o.offsetWidth;

                            h_origin = o.offsetHeight;

                     }

              }

 

              /* ==== animation function ==== */

              this.position = function (){

                     with (this) {

                            /* ==== set target position ==== */

                            w_target = w_origin;

                            h_target = h_origin;

                            if(over){

                                   /* ==== mouse over ==== */

                                   w_target = w_origin * diapo.zoomOver;

                                   h_target = h_origin * diapo.zoomOver;

                                   x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));

                                   y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));

                            } else {

                                   /* ==== mouse out ==== */

                                   x_target = x_origin;

                                   y_target = y_origin;

                            }

                            if(click){

                                   /* ==== clicked ==== */

                                   w_target = w_origin * diapo.zoomClick;

                                   h_target = h_origin * diapo.zoomClick;

                            }

 

                            /* ==== magic spring equations ==== */

                            x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;

                            y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;

                            w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);

                            h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);

                            diapo.rs += (Math.abs(x_var) + Math.abs(y_var));

 

                            /* ==== html animation ==== */

                            with(img.style){

                                   left   = Math.round(x_pos) + "px";

                                   top    = Math.round(y_pos) + "px";

                                   width  = Math.round(Math.max(0, w_pos)) + "px";

                                   height = Math.round(Math.max(0, h_pos)) + "px";

                                   zIndex = Math.round(w_pos);

                            }

                            with(spa.style){

                                   left   = Math.round(x_pos + w_pos * .1) + "px";

                                   top    = Math.round(y_pos + h_pos * .1) + "px";

                                   width  = Math.round(Math.max(0, w_pos * 1.1)) + "px";

                                   height = Math.round(Math.max(0, h_pos * 1.1)) + "px";

                                   zIndex = Math.round(w_pos);

                            }

                     }

              }

       },

 

       /* ==== main loop ==== */

       run : function(){

              diapo.xm = xm - diapo.nx;

              diapo.ym = ym - diapo.ny;

              /* ==== caption anim ==== */

              diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;

              diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";

              /* ==== images anim ==== */

              for(var i in diapo.O) diapo.O[i].position();

              /* ==== loop ==== */

              setTimeout("diapo.run();", 16);

       },

 

       /* ==== load images ==== */

       images_load : function(){

              // ===== loop until all images are loaded =====

              var M = 0;

              for(var i=0; i<diapo.N; i++) {

                     if(diapo.img[i].complete) {

                            diapo.img[i].style.position = "relative";

                            diapo.O[i].img.style.visibility = "visible";

                            diapo.O[i].spa.style.visibility = "visible";

                            M++;

                     }

                     resize();

              }

              if(M<diapo.N) setTimeout("diapo.images_load();", 128);

       },

 

       /* ==== init script ==== */

       init : function() {

              diapo.DC = document.getElementById("diapoContainer");

              diapo.img = diapo.DC.getElementsByTagName("img");

              diapo.txt = document.getElementById("caption");

              diapo.N = diapo.img.length;

              for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));

              diapo.resize();

              diapo.tx_pos = -diapo.nw;

              diapo.tx_target = -diapo.nw;

              diapo.images_load();

              diapo.run();

       }

}

 

</script>

</head>

 

<body>

 

<div id="diapoContainer">

       <img class="imgsrc" src="sto/1001.jpg" alt="Reconsider your Existence">

       <img class="imgsrc" src="sto/1004.jpg" alt="Something Needs to be Discovered">

       <img class="imgsrc" src="sto/1005.jpg" alt="They Said Very Little">

       <img class="imgsrc" src="sto/1006.jpg" alt="Only in Your Mind">

       <img class="imgsrc" src="sto/001.jpg" alt="The Power of Imagination">

       <img class="imgsrc" src="sto/002.jpg" alt="Objectivity is Impossible">

       <img class="imgsrc" src="sto/003.jpg" alt="Cleaning Up Operation">

       <img class="imgsrc" src="sto/004.jpg" alt="Arbitrary Contents">

       <div id="bkgcaption">

       </div>

       <div id="caption">

       </div>

</div>

<script type="text/javascript">

/* ==== start script ==== */

function dom_onload() {

       if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);

}

dom_onload();

</script>

 

</body>

 

</html>

 

0 Comments

Sat

28

Feb

2009

209、精美图片效果 代码

209、精美图片效果  代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>超酷超绚精美图片展示效果代码() </title>

<meta http-equiv="imagetoolbar" content="no">

<style type="text/css">

       html {

              overflow: hidden;

       }

       body {

              background: #222;

              width: 100%;

              height: 100%;

              cursor: crosshair;

       }

       .spanSlide {

              position: absolute;

              background: #000;

              font-size: 1px;

              overflow: hidden;

       }

       .imgSlide {

              position: absolute;

              left: 5%;

              top: 5%;

              width: 90%;

              height: 90%;

              overflow: hidden;

       }

       .txtSlide {

              position: absolute;

              top: 5%;

              left: 50px;

              width:100%;

              color:#FFF;

              font-family: arial, helvetica, verdana, sans-serif;

              font-weight: bold;

              font-size:96px;

              letter-spacing:12px;

              filter: alpha(opacity=70);

              -moz-opacity:0.7;

              opacity:0.7;

       }

</style>

 

<script type="text/javascript">

 

var ym=0;

var ny=0;

 

createElement = function(container, type, param){

       o=document.createElement(type);

       for(var i in param)o[i]=param[i];

       container.appendChild(o);

       return o;

}

 

mooz = {

       O:[],

       /////////

       mult:6,

       nbI:5,

       /////////

       rwh:0,

       imgsrc:0,

       W:0,

       H:0,

 

       Xoom:function(N){

              this.o = createElement(document.getElementById("screen"), "span", {

                     'className':'spanSlide'

              });

              img = createElement(this.o, "img", {

                     'className':"imgSlide",

                     'src':mooz.imgsrc[N%mooz.imgsrc.length].src

              });

              spa = createElement(this.o, "span", {

                     'className':"imgSlide"

              });

              txt = createElement(spa, "span", {

                     'className':"txtSlide",

                     'innerHTML':mooz.imgsrc[N%mooz.imgsrc.length].title

              });

              this.N = 10000+N;

       },

 

       mainloop:function(){

              with(this){

                     for(i=0; i<mooz.nbI; i++) {

                            O[i].N += (ym-ny)/8000;

                            N = O[i].N%nbI;

                            ti = Math.pow(mult,N);

                            with(O[i].o.style){

                                   left   = Math.round((W-(ti*rwh))/(W+ti)*(W*.5))+"px";

                                   top    = Math.round((H-ti)/(H+ti)*(H*.5))+"px";

                                   zIndex = Math.round(10000-ti*.1);

                                   width  = Math.round(ti*rwh)+"px";

                                   height = Math.round(ti)+"px";

                            }

                     }

              }

              setTimeout("mooz.mainloop();", 16);

       },

 

       oigres:function(){

              with(this){

                     W = parseInt(document.getElementById("screen").style.width);

                     H = parseInt(document.getElementById("screen").style.height);

                     imgsrc = document.getElementById("images").getElementsByTagName("img");

                     rwh = imgsrc[0].width/imgsrc[0].height;

                     for(var i=0;i<nbI;i++) O[i] = new Xoom(i);

                     mainloop();

              }

       }

}

 

document.onmousemove = function(e){

       if(window.event) e=window.event;

       ym = (e.y || e.clientY);

       if(ym/2>ny)ny=ym/2;

}

 

window.onload = function(){

       ym = ny+50;

       mooz.oigres();

}

 

</script>

</head>

 

<body>

<div style="position:absolute;left:50%;top:50%">

       <div style="position:absolute;width:720px;height:560px;left:-360px;top:-280px;background:#fff"></div>

       <div style="position:absolute;left:-40px;top:-6px;color:#000;font-family:arial;font-size:0.9em">Loading...</div>

       <div id="screen" style="position:absolute;width:640px;height:480px;left:-320px;top:-240px;overflow:hidden"></div>

</div>

 

<div id="images" style="visibility:hidden">

       <img title="infinite" src="sto/1001.jpg">

       <img title="yellow" src="sto/1004.jpg">

       <img title="earth" src="sto/1005.jpg">

       <img title="dream" src="sto/1003.jpg">

       <img title="flowers" src="sto/002.jpg">

</div>

 

</body>

 

</html>

 

0 Comments

Sat

28

Feb

2009

208、精美图片展示效果

208、精美图片展示效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

 

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>超酷超绚精美图片展示效果代码()</title>

<meta http-equiv="imagetoolbar" content="no">

<style type="text/css">

       html {

              overflow: hidden;

       }

       body {

              margin: 0px;

              padding: 0px;

              background: #000;

              width: 100%;

              height: 100%;

       }

       #imageFlow {

              position: absolute;

              width: 100%;

              height: 80%;

              left: 0%;

              top: 10%;

              background: #000;

       }

       #imageFlow .diapo {

              position: absolute;

              left: -1000px;

              cursor: pointer;

              -ms-interpolation-mode: nearest-neighbor;

       }

       #imageFlow .link {

              border: dotted #fff 1px;

              margin-left: -1px;

              margin-bottom: -1px;

       }

       #imageFlow .bank {

              visibility: hidden;

       }

       #imageFlow .top {

              position: absolute;

              width: 100%;

              height: 40%;

              background: #181818;

       }

       #imageFlow .text {

              position: absolute;

              left: 0px;

              width: 100%;

              bottom: 16%;

              text-align: center;

              color: #FFF;

              font-family: verdana, arial, Helvetica, sans-serif;

              z-index: 1000;

       }

       #imageFlow .title {

              font-size: 0.9em;

              font-weight: bold;

       }

       #imageFlow .legend {

              font-size: 0.8em;

       }

       #imageFlow .scrollbar {

              position: absolute;

              left: 10%;

              bottom: 10%;

              width: 80%;

              height: 16px;

              z-index: 1000;

       }

       #imageFlow .track {

              position: absolute;

              left: 1%;

              width: 98%;

              height: 16px;

              filter: alpha(opacity=30);

              opacity: 0.3;

       }

       #imageFlow .arrow-left {

              position: absolute;

       }

       #imageFlow .arrow-right {

              position: absolute;

              right: 0px;

       }

       #imageFlow .bar {

              position: absolute;

              height: 16px;

              left: 25px;

       }

</style>

<script type="text/javascript">

 

var imf = function () {

       var lf = 0;

       var instances = [];

       function getElementsByClass (object, tag, className) {

              var o = object.getElementsByTagName(tag);

              for ( var i = 0, n = o.length, ret = []; i < n; i++)

                     if (o[i].className == className) ret.push(o[i]);

              if (ret.length == 1) ret = ret[0];

              return ret;

       }

       function addEvent (o, e, f) {

              if (window.addEventListener) o.addEventListener(e, f, false);

              else if (window.attachEvent) r = o.attachEvent('on' + e, f);

       }

       function createReflexion (cont, img) {

              var flx = false;

              if (document.createElement("canvas").getContext) {

                     flx = document.createElement("canvas");

                     flx.width = img.width;

                     flx.height = img.height;

                     var context = flx.getContext("2d");

                     context.translate(0, img.height);

                     context.scale(1, -1);

                     context.drawImage(img, 0, 0, img.width, img.height);

                     context.globalCompositeOperation = "destination-out";

                     var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);

                     gradient.addColorStop(1, "rgba(255, 255, 255, 0)");

                     gradient.addColorStop(0, "rgba(255, 255, 255, 1)");

                     context.fillStyle = gradient;

                     context.fillRect(0, 0, img.width, img.height * 2);

              } else {

                     /* ---- DXImageTransform ---- */

                     flx     = document.createElement('img');

                     flx.src = img.src;

                     flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +

                                        'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +

                                                    (img.height * .25) + ')';

              }

              /* ---- insert Reflexion ---- */

              flx.style.position = 'absolute';

              flx.style.left     = '-1000px';

              cont.appendChild(flx);

              return flx;

       }

       /* //////////// ==== ImageFlow Constructor ==== //////////// */

       function ImageFlow(oCont, size, zoom, border) {

              this.diapos     = [];

              this.scr        = false;

              this.size       = size;

              this.zoom       = zoom;

              this.bdw        = border;

              this.oCont      = oCont;

              this.oc         = document.getElementById(oCont);

              this.scrollbar  = getElementsByClass(this.oc,   'div', 'scrollbar');

              this.text       = getElementsByClass(this.oc,   'div', 'text');

              this.title      = getElementsByClass(this.text, 'div', 'title');

              this.legend     = getElementsByClass(this.text, 'div', 'legend');

              this.bar        = getElementsByClass(this.oc,   'img', 'bar');

              this.arL        = getElementsByClass(this.oc,   'img', 'arrow-left');

              this.arR        = getElementsByClass(this.oc,   'img', 'arrow-right');

              this.bw         = this.bar.width;

              this.alw        = this.arL.width - 5;

              this.arw        = this.arR.width - 5;

              this.bar.parent = this.oc.parent  = this;

              this.arL.parent = this.arR.parent = this;

              this.view       = this.back       = -1;

              this.resize();

              this.oc.onselectstart = function () { return false; }

              /* ---- create sto ---- */

              var img   = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');

              this.NF = img.length;

              for (var i = 0, o; o = img[i]; i++) {

                     this.diapos[i] = new Diapo(this, i,

                                                                      o.rel,

                                                                      o.title || '- ' + i + ' -',

                                                                      o.innerHTML || o.rel,

                                                                      o.href || '',

                                                                      o.target || '_self'

                     );

              }

              /* ==== add mouse wheel events ==== */

              if (window.addEventListener)

                     this.oc.addEventListener('DOMMouseScroll', function(e) {

                            this.parent.scroll(-e.detail);

                     }, false);

              else this.oc.onmousewheel = function () {

                     this.parent.scroll(event.wheelDelta);

              }

              /* ==== scrollbar drag N drop ==== */

              this.bar.onmousedown = function (e) {

                     if (!e) e = window.event;

                     var scl = e.screenX - this.offsetLeft;

                     var self = this.parent;

                     /* ---- move bar ---- */

                     this.parent.oc.onmousemove = function (e) {

                            if (!e) e = window.event;

                            self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';

                            self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);

                            if (self.view != self.back) self.calc();

                            return false;

                     }

                     /* ---- release scrollbar ---- */

                     this.parent.oc.onmouseup = function (e) {

                            self.oc.onmousemove = null;

                            return false;

                     }

                     return false;

              }

              /* ==== right arrow ==== */

              this.arR.onclick = this.arR.ondblclick = function () {

                     if (this.parent.view < this.parent.NF - 1)

                            this.parent.calc(1);

              }

              /* ==== Left arrow ==== */

              this.arL.onclick = this.arL.ondblclick = function () {

                     if (this.parent.view > 0)

                            this.parent.calc(-1);

              }

       }

       /* //////////// ==== ImageFlow prototype ==== //////////// */

       ImageFlow.prototype = {

              /* ==== targets ==== */

              calc : function (inc) {

                     if (inc) this.view += inc;

                     var tw = 0;

                     var lw = 0;

                     var o = this.diapos[this.view];

                     if (o && o.loaded) {

                            /* ---- reset ---- */

                            var ob = this.diapos[this.back];

                            if (ob && ob != o) {

                                   ob.img.className = 'diapo';

                                   ob.z1 = 1;

                            }

                            /* ---- update legend ---- */

                            this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);

                            this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);

                            /* ---- update hyperlink ---- */

                            if (o.url) {

                                   o.img.className = 'diapo link';

                                   window.status = 'hyperlink: ' + o.url;

                            } else {

                                   o.img.className = 'diapo';

                                   window.status = '';

                            }

                            /* ---- calculate target sizes & positions ---- */

                            o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;

                            var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);

                            var x = x0 + o.w1 + this.bdw;

                            for (var i = this.view + 1, o; o = this.diapos[i]; i++) {

                                   if (o.loaded) {

                                          o.x1 = x;

                                          o.w1 = (this.ht / o.r) * this.size;

                                          x   += o.w1 + this.bdw;

                                          tw  += o.w1 + this.bdw;

                                   }

                            }

                            x = x0 - this.bdw;

                            for (var i = this.view - 1, o; o = this.diapos[i]; i--) {

                                   if (o.loaded) {

                                          o.w1 = (this.ht / o.r) * this.size;

                                          o.x1 = x - o.w1;

                                          x   -= o.w1 + this.bdw;

                                          tw  += o.w1 + this.bdw;

                                          lw  += o.w1 + this.bdw;

                                   }

                            }

                            /* ---- move scrollbar ---- */

                            if (!this.scr && tw) {

                                   var r = (this.ws - this.alw - this.arw - this.bw) / tw;

                                   this.bar.style.left = Math.round(this.alw + lw * r) + 'px';

                            }

                            /* ---- save preview view ---- */

                            this.back = this.view;

                     }

              },

              /* ==== mousewheel scrolling ==== */

              scroll : function (sc) {

                     if (sc < 0) {

                            if (this.view < this.NF - 1) this.calc(1);

                     } else {

                            if (this.view > 0) this.calc(-1);

                     }

              },

              /* ==== resize  ==== */

              resize : function () {

                     this.wh = this.oc.clientWidth;

                     this.ht = this.oc.clientHeight;

                     this.ws = this.scrollbar.offsetWidth;

                     this.calc();

                     this.run(true);

              },

              /* ==== move all sto  ==== */

              run : function (res) {

                     var i = this.NF;

                     while (i--) this.diapos[i].move(res);

              }

       }

       /* //////////// ==== Diapo Constructor ==== //////////// */

       Diapo = function (parent, N, src, title, text, url, target) {

              this.parent        = parent;

              this.loaded        = false;

              this.title         = title;

              this.text          = text;

              this.url           = url;

              this.target        = target;

              this.N             = N;

              this.img           = document.createElement('img');

              this.img.src       = src;

              this.img.parent    = this;

              this.img.className = 'diapo';

              this.x0            = this.parent.oc.clientWidth;

              this.x1            = this.x0;

              this.w0            = 0;

              this.w1            = 0;

              this.z1            = 1;

              this.img.parent    = this;

              this.img.onclick   = function() { this.parent.click(); }

              this.parent.oc.appendChild(this.img);

              /* ---- display external link ---- */

              if (url) {

                     this.img.onmouseover = function () { this.className = 'diapo link';   }

                     this.img.onmouseout  = function () { this.className = 'diapo'; }

              }

       }

       /* //////////// ==== Diapo prototype ==== //////////// */

       Diapo.prototype = {

              /* ==== HTML rendering ==== */

              move : function (res) {

                     if (this.loaded) {

                            var sx = this.x1 - this.x0;

                            var sw = this.w1 - this.w0;

                            if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {

                                   /* ---- paint only when moving ---- */

                                   this.x0 += sx * .1;

                                   this.w0 += sw * .1;

                                   if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {

                                          /* ---- paint only visible sto ---- */

                                          this.visible = true;

                                          var o = this.img.style;

                                          var h = this.w0 * this.r;

                                          /* ---- diapo ---- */

                                          o.left   = Math.round(this.x0) + 'px';

                                          o.bottom = Math.floor(this.parent.ht * .25) + 'px';

                                          o.width  = Math.round(this.w0) + 'px';

                                          o.height = Math.round(h) + 'px';

                                          /* ---- reflexion ---- */

                                          if (this.flx) {

                                                 var o = this.flx.style;

                                                 o.left   = Math.round(this.x0) + 'px';

                                                 o.top    = Math.ceil(this.parent.ht * .75 + 1) + 'px';

                                                 o.width  = Math.round(this.w0) + 'px';

                                                 o.height = Math.round(h) + 'px';

                                          }

                                   } else {

                                          /* ---- disable invisible sto ---- */

                                          if (this.visible) {

                                                 this.visible = false;

                                                 this.img.style.width = '0px';

                                                 if (this.flx) this.flx.style.width = '0px';

                                          }

                                   }

                            }

                     } else {

                            /* ==== image onload ==== */

                            if (this.img.complete && this.img.width) {

                                   /* ---- get size image ---- */

                                   this.iw     = this.img.width;

                                   this.ih     = this.img.height;

                                   this.r      = this.ih / this.iw;

                                   this.loaded = true;

                                   /* ---- create reflexion ---- */

                                   this.flx    = createReflexion(this.parent.oc, this.img);

                                   if (this.parent.view < 0) this.parent.view = this.N;

                                   this.parent.calc();

                            }

                     }

              },

              /* ==== diapo onclick ==== */

              click : function () {

                     if (this.parent.view == this.N) {

                            /* ---- click on zoomed diapo ---- */

                            if (this.url) {

                                   /* ---- open hyperlink ---- */

                                   window.open(this.url, this.target);

                            } else {

                                   /* ---- zoom in/out ---- */

                                   this.z1 = this.z1 == 1 ? this.parent.zoom : 1;

                                   this.parent.calc();

                            }

                     } else {

                            /* ---- select diapo ---- */

                            this.parent.view = this.N;

                            this.parent.calc();

                     }

                     return false;

              }

       }

       /* //////////// ==== public methods ==== //////////// */

       return {

              /* ==== initialize script ==== */

              create : function (div, size, zoom, border) {

                     /* ---- instanciate imageFlow ---- */

                     var load = function () {

                            var loaded = false;

                            var i = instances.length;

                            while (i--) if (instances[i].oCont == div) loaded = true;

                            if (!loaded) {

                                   /* ---- push new imageFlow instance ---- */

                                   instances.push(

                                          new ImageFlow(div, size, zoom, border)

                                   );

                                   /* ---- init script (once) ---- */

                                   if (!imf.initialized) {

                                          imf.initialized = true;

                                          /* ---- window resize event ---- */

                                          addEvent(window, 'resize', function () {

                                                 var i = instances.length;

                                                 while (i--) instances[i].resize();

                                          });

                                          /* ---- stop drag N drop ---- */

                                          addEvent(document.getElementById(div), 'mouseout', function (e) {

                                                 if (!e) e = window.event;

                                                 var tg = e.relatedTarget || e.toElement;

                                                 if (tg && tg.tagName == 'HTML') {

                                                        var i = instances.length;

                                                        while (i--) instances[i].oc.onmousemove = null;

                                                 }

                                                 return false;

                                          });

                                          /* ---- set interval loop ---- */

                                          setInterval(function () {

                                                 var i = instances.length;

                                                 while (i--) instances[i].run();

                                          }, 16);

                                   }

                            }

                     }

                     /* ---- window onload event ---- */

                     addEvent(window, 'load', function () { load(); });

              }

       }

}();

 

/* ==== create imageFlow ==== */

//          div ID    , size, zoom, border

imf.create("imageFlow", 0.15, 1.5, 10);

 

</script>

</head>

 

<body>

 

<div id="imageFlow">

       <div class="top">

       </div>

       <div class="bank">

              <a rel="sto/1001.jpg" title="Myselves" href="http://www.7stk.com/">

              My identity lies in not knowing who I am</a>

              <a rel="sto/1002.jpg" title="Discoveries" href="http://www.7stk.com/">

              ...are made by not following instructions</a>

              <a rel="sto/1003.jpg" title="Nothing" href="http://www.7stk.com/">

              ...can come between us</a>

              <a rel="sto/1004.jpg" title="New life" href="http://www.7stk.com/">

              Here you come!</a>

              <a rel="sto/1005.jpg" title="Optimists" href="http://www.7stk.com/">

              They don't know all the facts yet</a>

              <a rel="sto/006.jpg" title="Empathy" href="http://www.7stk.com/">

              Emotional intimacy</a>

              <a rel="sto/007.jpg" title="Much work" href="http://www.7stk.com/">

              ...remains to be done before we can announce our total failure to make any

              progress</a>

              <a rel="sto/008.jpg" title="System error" href="http://www.7stk.com/">

              Errare Programma Est</a>

              <a rel="sto/009.jpg" title="Nonexistance" href="http://www.7stk.com/">

              There's no such thing</a>

              <a rel="sto/010.jpg" title="Inside" href="http://www.7stk.com/">

              I now trapped, without hope of escape or rescue</a>

              <a rel="sto/011.jpg" title="E-Slaves" href="http://www.7stk.com/">

              The World is flat</a>

              <a rel="sto/012.jpg" title="l0v3" href="http://www.7stk.com/">

              1 l0v3 j00 - f0r3v3r</a>

              <a rel="sto/08081201013.jpg" title="T minus zero" href="http://www.7stk.com/">

              111 111 111 x 111 111 111 = 12345678987654321</a>

              <a rel="sto/014.jpg" title="The End" href="http://www.7stk.com/">

              ...has not been written yet</a> </div>

       <div class="text">

              <div class="title">

                     Loading</div>

              <div class="legend">

                     Please wait...</div>

       </div>

       <div class="scrollbar">

              <img class="track" src="sto/sb.gif" alt="">

              <img class="arrow-left" src="sto/sl.gif" alt="">

              <img class="arrow-right" src="sto/sr.gif" alt="">

              <img class="bar" src="sto/sc.gif" alt=""> </div>

</div>

 

</body>

 

</html>

 

0 Comments

Sat

28

Feb

2009

206、图片渐变效果

206、图片渐变效果

 

0 Comments

Sat

28

Feb

2009

204、飞碟攻击鼠标

204、飞碟攻击鼠标

<script language = "JavaScript">

function bbimg(o){

var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;

if(zoom>0) o.style.zoom=zoom+'%';

return false;}

</script>

 

 

<img src="http://www.7stk.com/image/logo.GIF" border=0 onmousewheel="return bbimg(this)" onload="javascript:if(this.width>screen.width-600) this.style.width=screen.width-600;">

0 Comments

Sat

28

Feb

2009

203、鼠标滚轮控制图片大小

203、鼠标滚轮控制图片大小

<script language = "JavaScript">

function bbimg(o){

var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/12;

if(zoom>0) o.style.zoom=zoom+'%';

return false;}

</script>

 

 

<img src="http://www.7stk.com/image/logo.GIF" border=0 onmousewheel="return bbimg(this)" onload="javascript:if(this.width>screen.width-600) this.style.width=screen.width-600;">

0 Comments

Sat

28

Feb

2009

202、最简单的全景展示效果

202、最简单的全景展示效果

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

    <tr>

      <td background="sto/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="sto/3d2.jpg" width="811" height="143"><img src="sto/3d2.jpg" width="811" height="143"><img src="sto/3d2.jpg" width="811" height="143"><img src="sto/3d2.jpg" width="811" height="143"></marquee></td>

    </tr>

  </table>

0 Comments

Sat

28

Feb

2009

201、一 水波纹溶解效果

201、一 水波纹溶解效果

<SCRIPT LANGUAGE="JavaScript">

<!-- Beginning of JavaScript -

 

var imgsname = new Array()

imgsname[0]="rjxg/1.jpg"

imgsname[1]="rjxg/2.jpg"

imgsname[2]="rjxg/3.jpg"

 

// the the links of your images

var imgsurl = new Array()

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

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

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

 

// the target of your links. Accepted values: '_blank', '_self', '_top'

// '_parent' or the name of your window

var linktarget="_blank"

 

// standstill of each image(seconds)

var pause=3

 

// horizontal position of the slideshow (distance to the left margin of the browser-window, pixels)

var posleft=5

 

// vertical position of the slideshow (distance to the top margin of the browser-window, pixels)

var postop=5

 

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

// C O N F I G U R A T I O N   E N D S   H E R E

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

 

// do not edit the code below

var contentimage=""

var i_image=0

var i_stepwave=0

var i_maxstepwave=40

var imgpreload=new Array()

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

       imgpreload[i]=new Image()

       imgpreload[i].src=imgsname[i]

}

pause=pause*1000

 

function initiate() {

      contentimage="<a href='"+imgsurl[i_image]+"' target='"+linktarget+"'><img src='"+imgsname[i_image]+"' border='0'></a>"

    if (document.all) {

              waveimage.innerHTML=contentimage

              waveimage.style.posLeft=posleft

              waveimage.style.posTop=postop

              enlargewave()

    }

    if (document.layers) {

        document.waveimage.left=posleft

              document.waveimage.top=postop

        changeimage()

    }

}

 

function enlargewave() {

    if (i_stepwave<=i_maxstepwave) {

           waveimage.filters.wave.phase=i_stepwave

           waveimage.filters.wave.strength=i_stepwave

        waveimage.filters.wave.lightstrength=i_stepwave

           waveimage.filters.wave.freq=i_stepwave

        i_stepwave++

           var timer=setTimeout("enlargewave()",50)

    }

    else {

        clearTimeout(timer)

        changeimage()

    }

}

 

function reducewave() {

    if (i_stepwave>0) {

           waveimage.filters.wave.phase=i_stepwave

           waveimage.filters.wave.strength=i_stepwave

           waveimage.filters.wave.lightstrength=i_stepwave

           waveimage.filters.wave.freq=i_stepwave

        i_stepwave--

           var timer=setTimeout("reducewave()",50)

    }

    else {

        clearTimeout(timer)

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

    }

}

 

function changeimage() {

    i_image++

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

    contentimage="<a href='"+imgsurl[i_image]+"' target='"+linktarget+"'><img src='"+imgsname[i_image]+"' border='0'></a>"

 

    if (document.all) {

        waveimage.innerHTML=contentimage

        reducewave()

    }

   

    if (document.layers) {

        document.waveimage.document.write(contentimage)

        document.waveimage.document.close()

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

    }

   

}

 

if (document.all) {

       document.write('<DIV ID="waveimage" style="position:absolute; filter:wave();"> </DIV>')

}

if (document.layers) {

       document.write('<LAYER NAME="waveimage"></LAYER>')

       document.close()

}

window.onload=initiate

 

// - End of JavaScript - -->

</SCRIPT>

0 Comments

Sat

28

Feb

2009

200、翻页效果代码

200、翻页效果代码

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

 

<script type="text/javascript">

 

       var Book_Image_Width=140; //此处为图片的宽度,默认为140,可修改为你需要的数值

       var Book_Image_Height=225; //此处为图片的高度,默认为225,可修改为你需要的数值

       var Book_Border=true;

       var Book_Border_Color="gray";

       var Book_Speed=15;

       var Book_NextPage_Delay=1500; //1 second=1000 //此处为图片翻转的相隔时间,可修改为你需要的数值

       var Book_Vertical_Turn=0;  

 

       Book_Image_Sources=new Array(

//下面四行是翻转图片和图片链接的代码,每行为一个图片及链接,增加或减少图片只需按下面的样式增加或减少一行代码即可,图片顺序可自由调整,注意除最后其余每行尾部都需要有一个,

//下面左边引号中为图片的地址,右边引号中为链接地址,如不需要链接可将右边引号中的链接去掉,但要保留引号

              "image1.jpg","http://code.xinnew.com/",

              "image2.jpg","http://code.xinnew.com/",

              "image3.jpg","http://code.xinnew.com/tool/",

              "image4.jpg","http://code.xinnew.com/tool/"

       );

 

       var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;

       var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

 

       function ImageBook(){

              if(document.getElementById){

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

                            B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}

                     Book_Div=document.getElementById("Book");

                     B_LI=document.createElement("img");Book_Div.appendChild(B_LI);    

                     B_RI=document.createElement("img");Book_Div.appendChild(B_RI);

                     B_MI=document.createElement("img");Book_Div.appendChild(B_MI);  

                     B_LI.style.position=B_MI.style.position=B_RI.style.position="absolute";

                     B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.zIndex=1;

                     B_LI.style.top=(Book_Vertical_Turn?Book_Image_Height+1:0)+"px";

                     B_LI.style.left=0+"px";

                     B_MI.style.top=0+"px";

                     B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";

                     B_RI.style.top=0+"px";

                     B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_Width+1)+"px";

                     B_LI.style.height=Book_Image_Height+"px";

                     B_MI.style.height=Book_Image_Height+"px";

                     B_RI.style.height=Book_Image_Height+"px";

                     B_LI.style.width=Book_Image_Width+"px";

                     B_MI.style.width=Book_Image_Width+"px";

                     B_RI.style.width=Book_Image_Width+"px";

                     if(Book_Border){

                            B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI.style.borderStyle="solid";

                            B_LI.style.borderWidth=1+"px";

                            B_MI.style.borderWidth=1+"px";

                            B_RI.style.borderWidth=1+"px";

                            B_LI.style.borderColor=B_MI.style.borderColor=B_RI.style.borderColor=Book_Border_Color}

                     B_LI.src=B_Pre_Img[0].src;

                     B_LI.lnk=Book_Image_Sources[1];

                     B_MI.src=B_Pre_Img[2].src;

                     B_MI.lnk=Book_Image_Sources[3];

                     B_RI.src=B_Pre_Img[4].src;

                     B_RI.lnk=Book_Image_Sources[5];

                     B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;

                     B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover=B_Stp;

                     B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_Rstrt;

                     BookImages()}}

 

       function BookImages(){

              if(!B_Stppd){

                     if(Book_Vertical_Turn){

                            B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Height));

                            MidOffset=!B_Direction?Book_Image_Height+1:Book_Image_Height-B_MSz;

                            B_MI.style.top=MidOffset+"px";

                            B_MI.style.height=B_MSz+"px"}

                     else{       B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_Image_Width));

                            MidOffset=B_Direction?Book_Image_Width+1:Book_Image_Width-B_MSz;

                            B_MI.style.left=MidOffset+"px";

                            B_MI.style.width=B_MSz+"px"}

                     B_Angle+=Book_Speed/720*Math.PI;

                     if(B_Angle>=Math.PI/2&&B_Direction){

                            B_Direction=0;

                            if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;

                            B_MI.src=B_Pre_Img[B_CrImg].src;

                            B_MI.lnk=Book_Image_Sources[B_CrImg+1];

                            B_CrImg+=2}

                     if(B_Angle>=Math.PI){

                            B_Direction=1;

                            B_TI=B_LI;

                            B_LI=B_MI;

                            B_MI=B_TI;

                            if(Book_Vertical_Turn)B_MI.style.top=0+"px";

                            else B_MI.style.left=Book_Image_Width+1+"px";                   

                            B_MI.src=B_RI.src;

                            B_MI.lnk=B_RI.lnk;

 

                            setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}

                     else setTimeout("BookImages()",50)}

              else setTimeout("BookImages()",50)}

 

       function Book_Next_Delay(){

                     if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;

                     B_RI.src=B_Pre_Img[B_CrImg].src;

                     B_RI.lnk=Book_Image_Sources[B_CrImg+1];

                     B_MI.style.zIndex=2;

                     B_LI.style.zIndex=1;

                     B_Angle=0;

                     B_CrImg+=2;

              setTimeout("BookImages()",50)}

 

       function B_LdLnk(){if(this.lnk)window.location.href=this.lnk}

       function B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"pointer":"default"}

       function B_Rstrt(){B_Stppd=false}

</script>

 

 

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

 

 

 

<div id="Book" style="position:relative">

<img src="butong_net.jpg" width="144" height="227">

</div>

 

 

3修改<body>标签为

 

<body onload="ImageBook()">

 

0 Comments

Sat

28

Feb

2009

199、仿ACDsee图象浏览器

199、仿ACDsee图象浏览器

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

 

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

<script language="JavaScript">

<!--

var width0;

var height0;

function initsize() {

width0=sample.offsetWidth;

height0=sample.offsetHeight;

recalcposition();

sample.style.visibility='visible';

}

function recalcposition()

{

       if ((document.body.offsetWidth-sample.offsetWidth)/2<0) {imglayer.style.left=0;}

       else {imglayer.style.left=(document.body.offsetWidth-sample.offsetWidth)/2;}

       if ((document.body.offsetHeight-sample.offsetHeight)/2<0) {imglayer.style.top=0;}

       else {imglayer.style.top=(document.body.offsetHeight-sample.offsetHeight)/2;}

       window.scrollTo(0,0);

}

 

var curzoom=1;

function down() {

if (event.button==1 && zoomvalue!=1) {

       curzoom*=zoomvalue;

       sample.width=width0*curzoom;

       recalcposition();

       }

}

 

function showtool() {

tool.style.visibility='visible';

if (document.body.scrollLeft+event.clientX+tool.offsetWidth<document.body.offsetWidth)

       tool.style.left=document.body.scrollLeft+event.clientX;

else

       tool.style.left=document.body.scrollLeft+event.clientX-tool.offsetWidth;

if (document.body.scrollTop+event.clientY+tool.offsetHeight<document.body.offsetHeight)

       tool.style.top=document.body.scrollTop+event.clientY;

else

       tool.style.top=document.body.scrollTop+event.clientY-tool.offsetHeight;

}

 

var toolid=new Array;

toolid[0]='fitmode';

toolid[1]='filtermode';

toolid[2]='url';

toolid[3]='extend';

toolid[4]='home';

toolid[5]='previous';

toolid[6]='next';

toolid[7]='end';

toolid[8]='alpha1';

toolid[9]='alpha2';

toolid[10]='alpha3';

toolid[11]='blur1';

toolid[12]='blur2';

toolid[13]='light1';

toolid[14]='light2';

toolid[15]='light3';

toolid[16]='light4';

toolid[17]='wave1';

toolid[18]='wave2';

toolid[19]='wave3';

toolid[20]='favourl';

toolid[21]='importicon';

 

function hidetool() {

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

       if (event.srcElement.id==toolid[i]) return false;

       }

       tool.style.visibility='hidden';

       tool.style.left=0;

       tool.style.top=0;

}

 

var zoomvalue=2;

function zoomin() {

sample.style.cursor='url("images/zoom-in.cur")';

zoomvalue=2;

}

 

function zoomout() {

sample.style.cursor='url("images/zoom-out.cur")';

zoomvalue=1/2;

}

 

function move() {

sample.style.cursor='url("images/move-up.cur")';

zoomvalue=1;

}

 

var scrollcount=0;

var dragx;

var dragy;

 

var scrollarrowtop;

 

function initdrag() {

scrollcount=1;

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

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

}

 

function startdrag() {

if (scrollcount==1 && zoomvalue==1) {

window.scrollBy(dragx-(document.body.scrollLeft+event.clientX),dragy-(document.body.scrollTop+event.clientY));

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

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

}

}

 

function enddrag() {

scrollcount=0;

}

 

var scrollcount2=0;

var handledx;

var width0;

function initdrag2() {

scrollcount2=1;

handledx=document.body.scrollLeft+event.clientX-tool.offsetLeft-zoomhandle.offsetLeft;

       sample.width=width0;

       recalcposition();

       curzoom=1;

}

function startdrag2() {

if (scrollcount2==1) {

       if ((document.body.scrollLeft+event.clientX-handledx)>(73+tool.offsetLeft) && (document.body.scrollLeft+event.clientX-handledx)<(175+tool.offsetLeft)) {zoomhandle.style.left=document.body.scrollLeft+event.clientX-handledx-tool.offsetLeft;}

       if ((document.body.scrollLeft+event.clientX-handledx)<(74+tool.offsetLeft)) {zoomhandle.style.left=74+tool.offsetLeft-tool.offsetLeft;}

       if ((document.body.scrollLeft+event.clientX-handledx)>(174+tool.offsetLeft)) {zoomhandle.style.left=174+tool.offsetLeft-tool.offsetLeft;}

//recalc curzoom

if (zoomhandle.offsetLeft-124>-1) {

       curzoom=Math.floor(((zoomhandle.offsetLeft-124)/10+1)*100)/100;

       sample.width=width0*curzoom;

       recalcposition();

       showzoomvalue.innerHTML=Math.floor(((zoomhandle.offsetLeft-124)/10+1)*100)+'%';

       }

else {

       curzoom=Math.floor(((zoomhandle.offsetLeft-124)*9/500+1)*100)/100;

       sample.width=width0*curzoom;

       recalcposition();

       showzoomvalue.innerHTML=Math.floor(((zoomhandle.offsetLeft-124)*9/500+1)*100)+'%';

       }

}

}

function enddrag2() {

scrollcount2=0;

}

 

function autofit(selObj) {

fitcount=selObj.options[selObj.selectedIndex].value;

if (fitcount=="1") {

       curzoom2=document.body.offsetWidth/width0;

       curzoom=document.body.offsetHeight/height0;

       if (curzoom2<curzoom) curzoom=curzoom2;

       sample.width=width0*curzoom;

}

 

if (fitcount=="2") {sample.width=width0;curzoom=1;}

 

if (fitcount=="3") {

       curzoom=document.body.offsetWidth/width0;

       sample.width=width0*curzoom;}

 

if (fitcount=="4") {

       curzoom=document.body.offsetHeight/height0;

       sample.width=width0*curzoom;}

 

if (fitcount=="0") return false;

 

       recalcposition();

       selObj.selectedIndex=0;

       tool.style.visibility='hidden';tool.style.left=0;tool.style.top=0;

}

 

function changeimg(selObj) {

if (event.keyCode==13) {

       imgid=imglist.length;

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

              if (selObj.value==imglist[i]) return false;

              }

              imglist[imgid]=selObj.value;

       showimg();

       tool.style.visibility='hidden';

       }

}

 

function showimg() {

if (imgid>-1 && imgid<imglist.length && sample.src!=imglist[imgid]) {

       sample.outerHTML='<img src="'+imglist[imgid]+'" id=sample onmousedown="down();initdrag()" style="cursor:url(images/zoom-in.cur);visibility:hidden" onmousemove="startdrag()" onmouseup="enddrag()" onreadystatechange="initsize()">';

       showzoomvalue.innerHTML='100%';

       zoomhandle.style.left=124;

       curzoom=1;

       filterparam.innerHTML=' ';

       }

if (imgid<0) {imgid=0;return false;}

if (imgid>imglist.length-1) {imgid=imglist.length-1;return false;}

}

 

function extendit() {

if (extendparam.style.display=='none') {extend.style.filter='flipv()';extendparam.style.display='block';}

else {extend.style.filter='';extendparam.style.display='none';}

}

 

function extendit2() {

if (slide.style.display=='none') {extend2.style.filter='flipv()';slide.style.display='block';}

else {extend2.style.filter='';slide.style.display='none';}

}

 

var imgid=0;

var imglist=new Array;

 

function addfilter(selObj) {

if (selObj.options[selObj.selectedIndex].value=='alpha(') {

              filterparam.innerHTML='Opacity <input id=alpha1 type=text value=80 size=3 onkeypress="filter_alpha()" onmouseover="this.focus();this.select()"> - <input id=alpha2 type=text value=0 size=3 onkeypress="filter_alpha()" onmouseover="this.focus();this.select()"> Style <input id=alpha3 type=text value=2 size=1 onkeypress="filter_alpha()" onmouseover="this.focus();this.select()">';

              sample.style.filter='alpha('+'opacity='+alpha1.value+',finishopacity='+alpha2.value+',style='+alpha3.value+')';

              }

if (selObj.options[selObj.selectedIndex].value=='blur(') {

              filterparam.innerHTML='Direction <input id=blur1 type=text value=45 size=3 onkeypress="filter_blur()" onmouseover="this.focus();this.select()"> Strength <input id=blur2 type=text value=5 size=3 onkeypress="filter_blur()" onmouseover="this.focus();this.select()">';

              sample.style.filter='blur('+'add=0,direction='+blur1.value+',strength='+blur2.value+')';

              }

if (selObj.options[selObj.selectedIndex].value=='light(') {

              filterparam.innerHTML='RGB <input id=light1 type=text value=255 size=2 onkeypress="filter_light()" onmouseover="this.focus();this.select()"> <input id=light2 type=text value=0 size=2 onkeypress="filter_light()" onmouseover="this.focus();this.select()"> <input id=light3 type=text value=0 size=2 onkeypress="filter_light()" onmouseover="this.focus();this.select()"> Strength <input id=light4 type=text value=20 size=3 onkeypress="filter_light()" onmouseover="this.focus();this.select()">';

              sample.style.filter='light()';

              sample.filters[0].addCone(0,0,1,sample.offsetWidth,sample.offsetHeight,light1.value,light2.value,light3.value,light4.value,90);

              }

if (selObj.options[selObj.selectedIndex].value=='wave(') {

              filterparam.innerHTML='Phase <input id=wave1 type=text value=4 size=2 onkeypress="filter_wave()" onmouseover="this.focus();this.select()"> Freq <input id=wave2 type=text value=5 size=2 onkeypress="filter_wave()" onmouseover="this.focus();this.select()"> Strength <input id=wave3 type=text value=2 size=3 onkeypress="filter_wave()" onmouseover="this.focus();this.select()">';

              sample.style.filter='wave(Add=0, Phase='+wave1.value+',Freq='+wave2.value+',LightStrength="5",Strength='+wave3.value+')';

              }

if (selObj.options[selObj.selectedIndex].value=='fliph(' || selObj.options[selObj.selectedIndex].value=='flipv(' || selObj.options[selObj.selectedIndex].value=='invert(' || selObj.options[selObj.selectedIndex].value=='gray(' || selObj.options[selObj.selectedIndex].value=='xray(') {

              filterparam.innerHTML=' ';

              sample.style.filter=selObj.options[selObj.selectedIndex].value+')';

              }

if (selObj.options[selObj.selectedIndex].value=='none') {

       sample.style.filter='';

       filterparam.innerHTML=' ';}

selObj.selectedIndex=0;

}

 

function filter_alpha() {

if (event.keyCode==13) {

       sample.style.filter='alpha('+'opacity='+alpha1.value+',finishopacity='+alpha2.value+',style='+alpha3.value+')';

       }

}

 

function filter_blur() {

if (event.keyCode==13) {

       sample.style.filter='blur('+'add=0,direction='+blur1.value+',strength='+blur2.value+')';

       }

}

 

function filter_light() {

if (event.keyCode==13) {

       sample.filters[0].clear();

       sample.filters[0].addCone(0,0,1,sample.offsetWidth,sample.offsetHeight,light1.value,light2.value,light3.value,light4.value,90);

       }

}

 

function filter_wave() {

if (event.keyCode==13) {

       sample.style.filter='wave(Add=0, Phase='+wave1.value+',Freq='+wave2.value+',LightStrength="5",Strength='+wave3.value+')';

       }

}

 

function exportit() {

var newwin=window.open('','YourFavo','width=300,height=100,left=0,top=0');

var favorite='<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style>span {  font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 10px}</style><OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT><body>';

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

              favorite+='<span id=imglist'+i+'>'+imglist[i]+'</span><br>';

              }

favorite+='</body>';

newwin.document.write(favorite);

newwin.document.all.WebBrowser.ExecWB(4,1);

newwin.window.close();

}

 

function importit() {

filterparam.innerHTML=' Favo. URL  <input id=favourl type=text size=24 onkeypress="readfavo()" onmouseover="this.focus();this.select()">';

}

 

function readfavo() {

if (event.keyCode==13) {

var newwin=window.open(favourl.value,'YourFavo','width=300,height=100,left=0,top=0');

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

              imglist[i]=newwin.document.all.tags("span")[i].innerHTML;

              }

newwin.window.close();

imgid=0;

tool.style.visibility='hidden';tool.style.left=0;tool.style.top=0;

}

}

// -->

</script>

<style>

.button { border:1px solid menu; behavior:url(images/button.htc);}

input,select,td {  font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 10px}

</style>

<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>

 

 

2<div id="imglayer" style="position:absolute; width:1px; height:1px; z-index:-1; left:0; top:0"><img src="images/sample.jpg" id=sample onmousedown="down();initdrag()" style="cursor:url(images/zoom-in.cur);visibility:hidden" onmousemove="startdrag()" onmouseup="enddrag()" onreadystatechange="initsize();imglist[0]=this.src;"></div>

 

<div id="tool" style="position:absolute; width:353px; height:10px; z-index:2; left: 0px; top: 0px; visibility: hidden">

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

<tbody>

<tr>

<td valign="top" style="border:2px outset #ffffff;background-color:menu">

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

       <tbody>

       <tr>

       <td width="20" align="center"><img src="images/zoom-in.gif" width="16" height="16" class="button" onclick="zoomin()"></td>

       <td width="20" align="center"><img src="images/zoom-out.gif" width="16" height="16" class="button" onclick="zoomout()"></td>

       <td width="20" align="center"><img src="images/move-up.gif" width="16" height="16" class="button" onclick="move()"></td>

       <td width="110" background="images/bk-guide.gif">

       <div id="zoomhandle" style="position:absolute; width:10px; height:16px; z-index:3;; left: 124px;top:4px"><img src="images/spacer.gif" width="6" height="14" style="border:2px outset #ffffff;background-color:menu" onmousedown="initdrag2()" onmousemove="startdrag2()" onmouseup="enddrag2()"></div>

       </td>

       <td id=showzoomvalue width="35">100%</td>

       <td width="95">

       <select id="fitmode" onChange="autofit(this)">

       <option value="0" selected>Fit Mode</option>

       <option value="1">Fit on Screen</option>

       <option value="2">Actual Size</option>

       <option value="3">Fit in Width</option>

       <option value="4">Fit in Height</option>

       </select>

       </td>

       <td width="20" align="center"><img src="images/print.gif" width="16" height="16" class="button" onclick="window.print()"></td>

       </tr>

       </tbody>

       <tbody>

       <tr>

       <td colspan="6">

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

              <tbody>

              <tr>

              <td width="23"><img id="home" src="images/arrow3b.gif" width="16" height="16" class="button" onclick="imgid=0;showimg()" alt="Home" hspace="1"></td>

              <td width="23"><img id="previous" src="images/arrow2b.gif" width="16" height="16" class="button" onclick="imgid-=1;showimg()" alt="Previous" hspace="1"></td>

              <td width="23"><img id="next" src="images/arrow2.gif" width="16" height="16" class="button" onclick="imgid+=1;showimg()" alt="Next" hspace="1"></td>

              <td width="23"><img id="end" src="images/arrow3.gif" width="16" height="16" class="button" onclick="imgid=imglist.length-1;showimg()" alt="End" hspace="1"></td>

              <td align="right"> URL  <input type="text" id="url" style="width:188px" onmouseover="this.focus();this.select()" onkeypress=changeimg(this) value="http://">

              </td>

              </tr>

              </tbody>

              </table>

       </td>

       <td align="center" valign="bottom"><img src="images/arrow.gif" width="9" height="10" id="extend" onclick="extendit()"></td>

       </tr>

       </tbody>

       </table>

       <table width="100%" border="0" cellspacing="3" cellpadding="0" id=extendparam style="display:none">

       <tbody>

       <tr>

       <td width="60" height="20"><select id="filtermode" onChange="addfilter(this)">

       <option value="" selected>Effect</option>

       <option value="none">None</option>

       <option value="alpha(">Alpha</option>

       <option value="fliph(">Flip-H</option>

       <option value="flipv(">Flip-V</option>

       <option value="invert(">Invert</option>

       <option value="gray(">Gray</option>

       <option value="xray(">Xray</option>

       <option value="blur(">Blur</option>

       <option value="light(">Light</option>

       <option value="wave(">Wave</option>

       </select></td>

       <td id=filterparam align="left"> </td>

       <td width="20" align="center"><img src="images/import.gif" width="16" height="16" class="button" onclick="importit()" id="importicon" alt="Please input the URL of your favorite list file that you have ever Exported"></td>

       <td width="20" align="center"><img src="images/export.gif" width="16" height="16" class="button" onclick="exportit()" alt="Please choose the Type of Saving:Only HTML"></td>

       <td width="20" align="center"><img src="images/save.gif" width="16" height="16" class="button" onclick="document.all.WebBrowser.ExecWB(4,1)"></td>

       </tr>

       </tbody>

       </table>

</td>

</tr>

</tbody>

</table>

</div>

 

 

3修改<body>标签为

 

 

<body bgcolor="#FFFFFF" text="#000000" background="images/bk-pattern.gif" leftmargin="0" topmargin="0" scroll="no" oncontextmenu="showtool();return false;" ondragstart="return false;" onclick="hidetool()" onresize="recalcposition()">

 

0 Comments

Sat

28

Feb

2009

198、图片洋葱皮效果代码

198、图片洋葱皮效果代码

<SCRIPT language=javascript>

<!--

//----------------------- Start Customizable Variables -----------------------//

//=== Positioning ===// 

var left = 100;        // Starting left position

var top = 20;          // Starting left position

 

//=== Curve and Distance ===//

var topInc = 5;              // Incriment of top position

var leftInc = 5;              // Incriment of left position

 

/* Make both the horizontal curve and the vertical curve the same to..

.. get an increasing gap with no curve. */

var hor_curve = 20;              // Horizontal curve - 0 for no curve

var ver_curve = -20;             // Vertical curve - 0 for no curve   

 

//=== Timing and Other ===//

var noTimes = 50;         // Number of times the picture is shown

var waitTime = 1;          // Time delay

 

var layer = 2;         // Layer level

var picture = 'sto/0003.gif';           // Picture to display (Smaller images work better)

 

var start_retracted= true;              // Start the image retracted (true / false)

var retract= true;           // Retract from behind after expanding (true / false)

 

//=== Fade options (Only IEusers see fade) ===//

var fade = true;             // Gradual Fade (true / false) - Only works if retract =true

var fd_destop = 0;         // Destination transparency level (ie 80, for mostly solid)

var fd_rate = 10;           // Time in milliseconds between trasparency changes (best under 100)

var fd_delta = 5;           // Amount of change each time (ie 5, for 5% change in transparency)

 

var event_init = 'onClick';             // Event at which the script is initiated

var left_formula = '(left + leftInc) + ((count/100) * hor_curve)';              // Left position formula

var top_formula = '(top + topInc) + ((count/100) * ver_curve)';        // Top position formula

//----------------------- End Customizable Variables -----------------------//

//--------------------- DO NOT EDIT BEYOND THIS POINT! ---------------------//

 

var count = 0;

var count2 = 0;

var timeOutVal = waitTime * 10;

var txt;

var image;

var imageName;

var lay = new Array;

 

function addLayer(){

  left = eval(left_formula);

  top = eval(top_formula);

 

  txt = "<div id='Layer" + count + "' style='position:absolute; visibility:hidden; left:" + left + "; top:" + top + ";   z-index:" + layer + "'>";

  txt += "<a href='#' " + event_init + "='replay()'><img src='" + picture + "' border=0 style='filter:alpha(opacity=100)' name = 'Image" + count + "'></a>";

  txt += "</div>";

 

  document.write(txt);

 

  lay[count]=new lib_obj("Layer"+count);

}

 

function logoCurveInit(){

  while (count < noTimes) {

    addLayer();

    count++;

  }

  count = 0;

 

  lay[0].showIt();

 

  if (!start_retracted)

    animate();

}

 

function animate(){

  if (start_retracted) {

    if (!retract){

      if (count > 0){

        setTimeout('animate()',timeOutVal);

 

        lay[count].hideIt();

 

        count--;

      }

    }

    else{

      if (count >= 0){

        setTimeout('animate()',timeOutVal);

 

        lay[count].showIt();

 

        if (count != 0)

          fadeImage();

 

        count--;

      }

    }

 

    if (retract){

      if(count==0)

        retractIt();

    }

  }

  else{   

      if (count < noTimes){

        setTimeout('animate()',timeOutVal);

 

        lay[count].showIt();

 

        if (count != noTimes-1 && retract)

          fadeImage();

 

        count++;

      }

 

      if (retract){

        if (count == noTimes)

          retractIt();

 

      }

  } 

}

 

function replay(){

  if ((count == noTimes || (count == 0 || count == -1)) &&(count2 == noTimes-1 || count2 == 0)){

    start_retracted = !start_retracted;    // Make the value opposite of what it is

 

    make_all_visible();

 

    if (start_retracted){

      count = noTimes-1;

    }

    else {

      count = 0;

    }

 

    animate();

  }

}

 

function retractIt(){

    if (start_retracted) {  // If the logo is not retracted (showing all the layers)

      if (count2 > 0){

        setTimeout('retractIt()',timeOutVal);

        lay[count2].hideIt();

        count2--;

      }

    }

    else{            // If the logo is retracted (Only showing the first layer)

      if (count2 < noTimes-1){

        setTimeout('retractIt()',timeOutVal);

        lay[count2].hideIt();

        count2++;

      }

    }

}

 

function fadeImage(){

  if (fade){

    if (count >= 0 && count <= noTimes){

      image = document.images['Image' + count];

      nereidFade(image,fd_destop,fd_rate,fd_delta);

    }

  }

}

 

function make_all_visible(){

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

    if (document.images['Image' + i].style.MozOpacity){

      document.images['Image' + i].style.MozOpacity=100;

    }

    else if (document.images['Image' + i].filters) {

      document.images['Image' + i].filters.alpha.opacity = 100;

    }

  }

}

////***************(DHTMLCentral.com)****************////

function check_browser(){

  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

}

bw=new check_browser()

function show_message(txt){alert(txt); return false}

function lib_obj(obj,nest){

  if(!bw.bw) return show_message('Old browser')

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

  this.evnt=bw.dom? document.getElementById(obj):

    bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;  

   if(!this.evnt) return show_message('The layer does not exist ('+obj+')'

    +'- If your using Netscape please check the nesting of your tags!')

  this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt;

  this.ref=bw.dom||bw.ie4?document:this.css.document;

  this.x=parseInt(this.css.left)||this.css.pixelLeft||this.evnt.offsetLeft||0;

  this.y=parseInt(this.css.top)||this.css.pixelTop||this.evnt.offsetTop||0

  this.w=this.evnt.offsetWidth||this.css.clip.width|| this.ref.width||this.css.pixelWidth||0;

  this.h=this.evnt.offsetHeight||this.css.clip.height|| this.ref.height||this.css.pixelHeight||0

  this.c=0

  if((bw.dom || bw.ie4) && this.css.clip) {

  this.c=this.css.clip; this.c=this.c.slice(5,this.c.length-1);

  this.c=this.c.split(' ');

  for(var i=0;i<4;i++){this.c[i]=parseInt(this.c[i])}

  }

  this.ct=this.css.clip.top||this.c[0]||0;

  this.cr=this.css.clip.right||this.c[1]||this.w||0

  this.cb=this.css.clip.bottom||this.c[2]||this.h||0;

  this.cl=this.css.clip.left||this.c[3]||0

  this.obj = obj + "Object"; eval(this.obj + "=this")

  return this

}

lib_obj.prototype.showIt = function(){this.css.visibility="visible"}

lib_obj.prototype.hideIt = function(){this.css.visibility="hidden"}

lib_obj.prototype.writeIt = function(text,startHTML,endHTML){

    if(bw.ns4){

    if(!startHTML){startHTML=""; endHTML=""} this.ref.open("text/html");

    this.ref.write(startHTML+text+endHTML);

    this.ref.close()

    }else this.evnt.innerHTML=text

}

////***************(DHTMLCentral.com)****************////

/* Code taken from DynamicDrive.com (Start)-->

Gradual-Highlight Image Script II-

By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca)

For full source to script, visit http://dynamicdrive.com */

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);

       }

}

// <-- Code taken from DynamicDrive.com (End)

window.onload=new logoCurveInit();

//--> End Hide

</SCRIPT>

0 Comments

Sat

28

Feb

2009

197、点击动态展开图片

197、点击动态展开图片

<script language="JavaScript">

var b = 0;

var c = true;

function fade(){

if(document.all);

if(c == true) {

b+=50;

}

if(b == 200) {

c = false;

}

u.width= 165;

u.height=b; //运行后图片的大小为165*200

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

}

</script>

<a href="http://www.7stk.com"><img src="sto/001.jpg" name="u" width=0 height=0 border=0></a>

<a href="#" onClick="fade()">显示图片(带链接)</a>

 

0 Comments

Sat

28

Feb

2009

196、自由浮动图像特效

196、自由浮动图像特效

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

 

<script type="text/javascript">/***********************************************

* Floating image script- By Virtual_Max (http://www.geocities.com/siliconvalley/lakes/8620)

* Modified by Dynamic Drive for various improvements

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

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

 

 

var vmin=2;

var vmax=5;

var vr=2;

var timer1;

 

function iecompattest(){

return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

}

 

function Chip(chipname,width,height){

 this.named=chipname;

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

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

 this.w=width+20;

 this.h=height;

 this.xx=0;

 this.yy=0;

 this.timer1=null;

}

 

function movechip(chipname){

if (document.getElementById){

eval("chip="+chipname);

   if (window.innerWidth || window.opera){

               pageX=window.pageXOffset;

     pageW=window.innerWidth-40;

     pageY=window.pageYOffset;

     pageH=window.innerHeight-20;

    }

   else if (document.body){

               pageX=iecompattest().scrollLeft;

     pageW=iecompattest().offsetWidth-40;

     pageY=iecompattest().scrollTop;

     pageH=iecompattest().offsetHeight-20;

    }

 

   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();

     }

 

document.getElementById(chip.named).style.left=chip.xx+"px";

document.getElementById(chip.named).style.top=chip.yy+"px";

 

 

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

  }

}

</script>

<script type="text/javascript">

 

 

//Step 1: Define unique variable names depending on number of flying images (ie:3):

var flyimage1, flyimage2, flyimage3

 

function pagestart(){

//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):

 flyimage1=new Chip("flyimage1",47,68);

 flyimage2=new Chip("flyimage2",47,68);

 flyimage3=new Chip("flyimage3",47,68);

 

 

//Step 3: Using the same variable names as 1), add or delete more of the below lines:

movechip("flyimage1");

movechip("flyimage2");

movechip("flyimage3");

 

}

 

if (window.addEventListener)

window.addEventListener("load", pagestart, false)

else if (window.attachEvent)

window.attachEvent("onload", pagestart)

else if (document.getElementById)

window.onload=pagestart

 

</script>

 

2

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

 

<!-- Step 4: Define your flying images. For each image's ID tag, use the same variable names as 1) above -->

<DIV ID="flyimage1" STYLE="position:absolute; left: -500px; width:47; height:68;">

<A HREF="http://www.7stk.com"><IMG SRC="float/ballon2.gif" BORDER=0></a>

</DIV>

 

<DIV ID="flyimage2" STYLE="position:absolute; left: -500px; width:47; height:68;">

<A HREF="http://www.7stk.com"><IMG SRC="float/ballon3.gif" BORDER=0></a>

</DIV>

 

<DIV ID="flyimage3" STYLE="position:absolute; left: -500px; width:47; height:68;">

<A HREF="http://www.7stk.com"><IMG SRC="float/ballon4.gif" BORDER=0></a>

</DIV>

 

0 Comments

Sat

28

Feb

2009

195、飘动的多个图片

195、飘动的多个图片

1

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

 

 

<SCRIPT language=JavaScript>

function LoadCookie(Key)

{

  var CookieString = document.cookie

  var CookieSet = CookieString.split(';')

  var SetSize = CookieSet.length

  var CookiePieces

  var ReturnValue = ""

  var x = 0

  for (x = 0; ((x < SetSize) && (ReturnValue == "")); x ++)

  {

    CookiePieces = CookieSet[x].split ('=')

    if (CookiePieces[0].substring (0,1) == ' ')

      CookiePieces[0] = CookiePieces[0].substring (1, CookiePieces[0].length)

    if (CookiePieces[0] == Key)

    {

      ReturnValue = CookiePieces[1]

      break

    }

  }

  return ReturnValue

}

 

if ("" == LoadCookie("etangWHAD"))

{

  document.cookie = "etangWHAD=done; path=/"

var popV='width='+myWidth+',height='+myHeight+',titlebar=0,toolbar=0,location=0,menubar=0,scrollbars=no,resizable=no';

popV+='scrollbars=0,resizable=0,channelmode=0,directories=0,status=0'; var dz=document;

if(parseFloat(navigator.appVersion)>=4){var myTI=screen.height/2-myHeight/2;

var myLI=screen.width/2-myWidth/2;popV+=',top='+myTI+',left='+myLI;}

if(dz.cookie.indexOf('e=llo')<=0){self.focus();fastClickpopWindow();dz.cookie='he=llo';}

function fastClickpopWindow(){window.open(myURL,'etangWHAD',popV);self.focus();}

}

</SCRIPT>

<SCRIPT>

 <!--

 var Light_X=20

 var Light_Y=20

 var Light_Z=40

 var xInc=10;

 var yInc=10;

 var r=125;

 var deg=0;

 var deg1;

 var rad;

 var conversion=(2*3.1415926)/360

 function movefilt()

 {

 Light_X=r+r*Math.cos(deg*conversion);

 Light_Y=r+r*Math.sin(deg*conversion);

 deg+=10;

 if(deg==360)

 deg=0;

 Body1.filters[0].moveLight(0,Light_X,Light_Y,Light_Z,1);

 mytimeout=setTimeout('movefilt()',100);

 }

 function go(){

 Body1.filters.light.addCone(125,125,0,Light_X,Light_Y,0,255,0,150,20);          Body1.filters.light.addAmbient(0,255,0,30)

 var x=0;

 movefilt();

 }

 </SCRIPT>

<IMG height=250 id=Body1 src="../../../image/logo.jpg"

style="FILTER: light(); HEIGHT: 250px; WIDTH: 250px" width=250>

 

2修改<body>标签为

 

<body onload=go()>

 

0 Comments

Sat

28

Feb

2009

194、非常酷3D漂浮图像

194、非常酷3D漂浮图像

1

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

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>

<style>

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

</style>

 

 

2

 

 

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

 

 

<SCRIPT>

// 3D-Slideshow

// more javascript from http://www.smallrain.net

var slideurl=new Array()

slideurl[0]="pic/blender.png"

slideurl[1]="pic/aim.png"

slideurl[2]="pic/babelfish.png"

 

// add a corresponding link for each image

// if you don't wont to link an image, enter "#"

var slidelink=new Array()

slidelink[0]="http://code.xinnew.com"

slidelink[1]="http://bz.code.xinnew.com"

slidelink[2]="http://code.xinnew.com/it/index.htm"

 

// add a corresponding target for each link

// acceptable values "_blank" or "_top" or "_parent" or "_self"

var slidetarget=new Array()

slidetarget[0]="_blank"

slidetarget[1]="_self"

slidetarget[2]="_top"

 

// set the width of the 3D-border (pixels)

var backdepth=6

 

// set thecolorof the 3D-border (HTML-values required)

var fillcolor="#666666"

 

// set the standstill (seconds) for the images (required for Netscape Navigator)

var standstill=3

 

// set the form of the imageframe

// acceptable values are "oval" or "rect"

var imageform="oval"

 

// do not edit below this line

var slidewidth=1

var slideheight=1

 

var ns6=document.getElementById&&!document.all?1:0

var opera=navigator.userAgent.match(/Opera/)

var ie5=document.getElementById&&document.all&&!opera?1:0

 

standstill*=1000

var floatingspeed=1

var tempo=20

var numberofimages=slideurl.length-1

var stepx=new Array()

var stepy=new Array()

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

       stepx[i]=randommakerNS(floatingspeed)

       stepy[i]=randommakerNS(floatingspeed)

}

var imgwidth=new Array()

var imgheight=new Array()

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

       imgwidth[i]=10

       imgheight[i]=10

}

var x,y

var marginbottom

var marginleft=0

var margintop=0

var marginright

var timer

var i_fadestrength=new Array()

var i_fadestep=new Array()

var i_fadenow=new Array()

var i_fadenowmax=new Array()

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

       i_fadenowmax[i]=2

       i_fadestrength[i]=randommakerNS(99)

       i_fadestep[i]=1

       i_fadenow[i]=0

}

 

var spancontent=new Array()

var i_spancontent=0

var imgpreload=new Array()

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

       imgpreload[i]=new Image()

       imgpreload[i].src=slideurl[i]

}

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

       spancontent[i]="<a href='"+slidelink[i]+"' target='"+slidetarget[i]+"'><img src='"+slideurl[i]+"' border='0'></a>"

}

 

var i_angle1=0

var i_size=1

var i_pic=0

var posleft=0

var postop=0

var x_extrusionangle=0

var y_extrusionangle=0

var x_rotationcenter=0

var y_rotationcenter=0

var pagewidth

var pageheight

 

function initNS() {

    marginbottom=window.innerHeight-11

    marginright=window.innerWidth-11          

       var thisspan=document.getElementById('span0')

       thisspan.innerHTML=spancontent[0]

       var thisspan=document.getElementById('span0')

       imgwidth[0]=parseInt(thisspan.offsetWidth)

       imgheight[0]=parseInt(thisspan.offsetHeight)

       var maxleftstart=marginright-imgwidth[0]

       var maxtopstart=marginbottom-imgheight[0]

       var thisspan=document.getElementById('span0').style

    thisspan.left=parseInt(thisspan.left)+randommakerNS(maxleftstart)

       thisspan.top=parseInt(thisspan.top)+randommakerNS(maxtopstart)

       thisspan.visibility="visible"

    checkmovementNS()

}

 

function randommakerNS(range) {            

       rand=Math.floor(range*Math.random())

       if (rand==0) {rand=Math.ceil(range/2)}

    return rand

}

 

function checkmovementNS() {

       checkpositionNS()

       movepicturesNS()

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

}

 

function movepicturesNS() {

    var thisspan=document.getElementById('span0').style

    thisspan.left=parseInt(thisspan.left)+stepx[0]

       thisspan.top=parseInt(thisspan.top)+stepy[0]      

       i_fadenow[0]++

       if (i_fadenow[0]>=i_fadenowmax[0]) {

              i_fadenow[0]=0

              if (i_fadestrength[0]>=100) {i_fadestep[0]=i_fadestep[0]*-1}

              else if (i_fadestrength[0]<=0) {

                     i_fadestep[0]=i_fadestep[0]*-1

                     i_spancontent++

                     if (i_spancontent>=spancontent.length) {i_spancontent=0}

                     document.getElementById('span0').innerHTML=spancontent[i_spancontent]

              }

       }    

       i_fadestrength[0]+=i_fadestep[0]

       document.getElementById('span0').style.MozOpacity=Math.round(i_fadestrength[0])/100

}

 

function checkpositionNS() {

       imgwidth[0]=parseInt(document.getElementById('span0').offsetWidth)

       imgheight[0]=parseInt(document.getElementById('span0').offsetHeight)        

       var thisspan=document.getElementById('span0').style

       var leftx=parseInt(thisspan.left)

       var topy=parseInt(thisspan.top)

       if (leftx>marginright-imgwidth[0]-floatingspeed) {

              thisspan.left=leftx-Math.abs(stepx[0]+1)

              stepx[0]=randommakerNS(floatingspeed)*-1      

       }

       if (leftx<marginleft) {

              thisspan.left=leftx+Math.abs(stepx[0])

              stepx[0]=randommakerNS(floatingspeed)                 

       }    

       if (topy>marginbottom-imgheight[0]-floatingspeed) {

              thisspan.top=topy-Math.abs(stepy[0])

              stepy[0]=randommakerNS(floatingspeed)*-1

       }

       if (topy<margintop) {

              thisspan.top=topy+Math.abs(stepy[0])

              stepy[0]=randommakerNS(floatingspeed)

       }

}

 

function initIE() {

       var i_preload=0

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

              var imgref=eval("document.n"+i)

              if (imgref.complete) {i_preload++}

       }

       if (i_preload>=slideurl.length-1) {

              slidewidth=document.getElementById('spn1').offsetWidth

              slideheight=document.getElementById('spn1').offsetHeight

              pagewidth=document.body.clientWidth

              pageheight=document.body.clientHeight

              document.getElementById('rectid').style.width=slidewidth

              document.getElementById('rectid').style.height=slideheight

              posleft=(pagewidth-slidewidth)/2

              postop=(pageheight-slideheight)/2

              x_rotationcenter=(posleft/slidewidth)/2

              y_rotationcenter=(postop/slideheight)/2

              var rotationcenter=0+","+y_rotationcenter+","+x_rotationcenter

              document.getElementById('rectid').style.left=posleft

              document.getElementById('rectid').style.top=postop

              document.getElementById('extrusionid').rotationcenter=rotationcenter

              rotateIE()

       }

       else {

              var timer=setTimeout("initIE()",200)

       }

}

 

function rotateIE() {

       i_angle1+=1

       if (i_angle1>=360) {

              i_angle1=0

       }

       if (i_angle1==127) {

              i_pic++

              if (i_pic>=slideurl.length) {i_pic=0}

              document.getElementById('fillid').src=slideurl[i_pic]

       }

       document.getElementById('rectid').style.rotation=i_angle1

       document.getElementById('extrusionid').rotationangle=i_angle1+","+i_angle1

       var timer=setTimeout("rotateIE()",30)

}

 

function openpageIE() {

       if (slidetarget[i_pic]=="_blank") {

              window.open(slidelink[i_pic])

       }

       else if (slidetarget[i_pic]=="_self") {

              document.location.href(slidelink[i_pic])

       }

       else if (slidetarget[i_pic]=="_top" || slidetarget[i_pic]=="_parent") {

              top.location.href(slidelink[i_pic])

       }

}

 

if (ns6) {

       document.write("<span id='span0' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=0);-moz-opacity:0'></span>")

    document.close()

       window.onload=initNS

}

if (ie5) {

       document.write('<div id="preloadimages" style="position:absolute;left:0px;top:-5px;visibility:hidden">')

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

              document.write('<span id="spn'+i+'" style="position:absolute;width:2px;left:0px;top:0px;">')

              document.write('<img src="'+slideurl[i]+'" name="n'+i+'">')

              document.write('</span>')

       }

       document.write('</div>')

     document.write('<v:'+imageform+' id="rectid"  style="position:absolute;top:0;left:0;width:'+slidewidth+';height:'+slideheight+'" onClick="openpageIE()">')

     document.write('<v:extrusion id="extrusionid" on="true" type="perspective" color="'+fillcolor+'" rotationcenter="0,0,0" backdepth="'+backdepth+'" diffusity="2.5" metal="true">')

      document.write('</v:extrusion>')

document.write('<v:fill id="fillid" opacity="100%" color="'+fillcolor+'" type="frame" src="'+slideurl[0]+'"/>')

   document.write('</v:'+imageform+'>')

       window.onload=initIE

   }

</script>

 

0 Comments

Sat

28

Feb

2009

193、旋转灯笼式图片展示

193、旋转灯笼式图片展示

1

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

 

 

<script type='text/javascript'>

//more javascript from http://www.smallrain.net

function carousel(params){

  if(!(params.width>0 && isFinite(params.width)))params.width=100;

  if(!(params.height>0 && isFinite(params.height)))params.height=100;

  if(!(params.sides>2 && isFinite(params.sides)))params.sides=4;

  if(!(params.steps>0 && params.steps<100 && isFinite(params.steps)))params.steps=20;

  if(!(params.speed>0 && isFinite(params.speed)))params.speed=8;

  if(!(params.image_border_width>=0 && isFinite(params.image_border_width)))params.image_border_width=0;

  if(isFinite(params.id)||!params.id)params.id='bad_id_given_'+Math.random();

 

  document.write("<div style='position:relative;overflow:hidden;' id='"+params.id.replace(/[\r\n\t ]+/g,'_')+"'></div>");

  var cdiv=document.getElementById(params.id.replace(/[\r\n\t ]+/g,'_'))

  cdiv.style.width=params.width+'px';

  cdiv.style.height=params.height+'px';

  cdiv.style.border=params.border;

  cdiv.style.position='relative';

  cdiv.style.overflow='hidden';

  cdiv.title=params.id;

   

  var counter=0,spinning=true,interval=Math.floor(60000/params.sides/params.steps/params.speed)-5;

  interval=isNaN(interval)?200:interval;

  var img_position=[],images=[],img_dimension=[];

  var img_index=params.images.length+1,img_index_cap=2*params.images.length;

  var faces=Math.ceil(params.sides/2), dimension, direction;

 

  function init(){

    if(params.direction=="left" || params.direction=="right"){

      direction=params.direction;

      dimension="width";

      }

    else if(params.direction=="top" || params.direction=="bottom"){

      direction=params.direction;

      dimension="height";

      }

    else {

      direction="left";

      dimension="width";

      }     

    cdiv.style[dimension]=params[dimension]/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)+'px';

    var img=new Image();

    img.style.position='absolute';

    img.style[direction]='10000px';

    img.style.width=params.width-2*params.image_border_width+'px';

    img.style.height=params.height-2*params.image_border_width+'px';

    img.style.border=(params.image_border_width||0)+'px solid '+params.image_border_color;

 

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

      images[i]=img.cloneNode(true);

      images[i].src=params.images[i];

      if(params.links && params.links[i] && params.links[i]!=''){

        images[i].onclick=new Function("window.location='"+params.links[i]+"'");

        images[i].style.cursor=document.all?'hand':'pointer';

        }

      if(params.titles && params.titles[i] && params.titles[i]!='')

        images[i].title=params.titles[i];

      images[i+params.images.length]=images[i];

      if(params.images.length==faces)

        images[i+2*params.images.length]=images[i];

      cdiv.appendChild(images[i]);

      }

 

    var face_size=params.size_mode=='image'?params[dimension]:params[dimension]*Math.sin(Math.PI/params.sides);

    var face_offset=params[dimension]*Math.cos(Math.PI/params.sides)/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)/2-.5;

    var pi_piece=2*Math.PI/params.steps/params.sides;

    for(i=0;i<=params.steps*faces;i++){

      img_dimension[i]=face_size*Math.sin(pi_piece*i);

      img_position[i]=(i<params.steps*params.sides/2)?Math.floor(params[dimension]/2/(params.size_mode=='image'?Math.sin(Math.PI/params.sides):1)-face_offset*Math.cos(pi_piece*i)-img_dimension[i]/2)+'px':'10000px';

      img_dimension[i]=img_dimension[i]-2*params.image_border_width>1?Math.ceil(img_dimension[i])-2*params.image_border_width+'px':'1px';

      }

    }

  init();

 

  cdiv.rotate = function(){

    setTimeout('document.getElementById("'+cdiv.id+'").rotate()',interval);

    if(!spinning) return;

    if(++counter>=params.steps){

      counter=0;

      if(++img_index>=img_index_cap)

        img_index=params.images.length;

      }

    images[img_index-faces].style[direction]='20000px';

    for(var i=faces-1;i>=0;i--){

      images[img_index-i].style[direction]=img_position[counter+i*params.steps];

      images[img_index-i].style[dimension]=img_dimension[counter+i*params.steps];

      }

    }

  cdiv.onmouseover=function(){

    spinning=false;

    }

  cdiv.onmouseout=function(){

    spinning=true;

    }

  setTimeout('document.getElementById("'+cdiv.id+'").rotate()',200);

  }

</script>

 

 

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

 

<h3><font color="#FFFFFF">水平方向滚动</font></h3>

<font color="#FFFFFF">

<script type='text/javascript'>

carousel({id:'Amazon Books', //Enter arbitrary but unique ID of this slideshow instance

          border:'',

          size_mode:'image', //Enter "carousel" or "image". Affects the width and height parameters below.

          width:107, //Enter width of image or entire carousel, depending on above value

          height:140, //Enter height of image or entire carousel, depending on above value

          sides:6, //# of sides of the carousel. What's shown = sides/2. Even integer with sides/2< total images is best

          steps:23, //# of animation steps. More = smoother, but more CPU intensive

          speed:5, //Speed of slideshow. Larger = faster.

          direction:'left', //Direction of slideshow. Enter "top", "bottom", "left", or "right"

          images:['photo1.jpg',

                  'photo2.jpg',

                  'photo3.jpg',

                                                               'photo4.jpg'],

          links: ['http://www.7stk.com/',

                                                               'http://www.7stk.com/',

                                                               'http://www.7stk.com//background/index.htm',

                                                               'http://www.7stk.com//navigation/index.htm'],

          titles:['javascript特效',

                                                               '网页特效集锦',

                                                               '背景特效',

                                                               '导航特效'],

          image_border_width:1,

          image_border_color:'blue'

          });

</script>

 

 

</font>

 

 

<h3><font color="#FFFFFF">竖直方向滚动</font></h3>

<script type='text/javascript'>

carousel({id:'carousel_1', //Enter arbitrary but unique ID of this slideshow instance

          border:'',

          size_mode:'image', //Enter "carousel" or "image". Affects the width and height parameters below.

          width:107, //Enter width of image or entire carousel, depending on above value

          height:140, //Enter height of image or entire carousel, depending on above value

          sides:8, //# of sides of the carousel. What's shown = sides/2. Even integer with sides/2< total images is best

          steps:8, //# of animation steps. More = smoother, but more CPU intensive

          speed:7, //Speed of slideshow. Larger = faster.

          direction:'top', //Direction of slideshow. Enter "top", "bottom", "left", or "right"

          images:['photo1.jpg',

                  'photo2.jpg',

                  'photo3.jpg',

                                                               'photo4.jpg'],

          links: [],

          titles:[],

          image_border_width:1,

          image_border_color:'black'

          });

</script>

 

0 Comments

Sat

28

Feb

2009

192、箭头控制横向滚动图片

192、箭头控制横向滚动图片

1

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

 

<SCRIPT language=JavaScript type=text/JavaScript>

<!--

var sh;

marqueesWidth=610;

preLeft=0; currentLeft=0; stopscroll=false; getlimit=0;preTop=0; currentTop=0;

 

function scrollLeft()

{

       if(stopscroll==true) return;

       preLeft=marquees.scrollLeft;

       marquees.scrollLeft+=2;

       if(preLeft==marquees.scrollLeft)

       {

              //marquees.scrollLeft=templayer.offsetWidth-marqueesWidth+1;

       }

}

 

function scrollRight()

{

       if(stopscroll==true) return;

 

       preLeft=marquees.scrollLeft;

       marquees.scrollLeft-=2;

       if(preLeft==marquees.scrollLeft)

       {

              if(!getlimit)

              {

                     marquees.scrollLeft=templayer.offsetWidth*2;

                     getlimit=marquees.scrollLeft;

              }

              marquees.scrollLeft-=1;

       }

}

 

function Left()

{

       stopscroll = false;

       sh = setInterval("scrollLeft()",20);

}

 

function Right()

{

       stopscroll = false;

       sh = setInterval("scrollRight()",20);

}

 

function StopScroll()

{

       stopscroll = true;

       clearInterval( sh );

}

 

 

 

function SelectType(value)

{

       document.all.sendForm.page.value = 1;

       document.all.sendForm.type.value = value;

 

       document.all.sendForm.submit();

}

 

function init()

{

       with(marquees)

       {

              style.height=0;

              style.width=marqueesWidth;

              style.overflowX="hidden";

              style.overflowY="visible";

              style.align = "center";

              noWrap=true;

       }

}

 

 

//-->

</SCRIPT>

 

2

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

 

<TABLE cellSpacing=1 width=660 align=center border=0>

<TR bgColor=#f8f8f8>

<TD align=middle width=25><IMG

      src="images/

/pointer-left.gif" border=0 onmouseout=StopScroll() onmouseover=Left() style="CURSOR: pointer"></TD>

    <TD>

      <DIV id=marquees>

      <TABLE border=0><TR>

 

<TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='images/1.jpg' border=0></td></tr><tr><td><div align="center">1</div></td>

</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='images/2.jpg' border=0></td></tr><tr><td><div align="center">2</div></td>

</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='images/3.jpg' border=0></td></tr><tr><td><div align="center">1 </div></td>

</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='images/4.jpg' border=0></td></tr><tr><td><div align="center">1</div></td>

</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='images/5.jpg' border=0></td></tr><tr><td><div align="center">2</div></td>

</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='images/6.jpg' border=0></td></tr><tr><td><div align="center">3</div></td>

</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='images/7.jpg' border=0></td></tr><tr><td><div align="center">4</div></td>

</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='images/8.jpg' border=0></td></tr><tr><td><div align="center">5</div></td>

</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='images/9.jpg' border=0></td></tr><tr><td><div align="center">6</div></td>

</tr></table></TD><TD align=middle width=85><table cellSpacing=0 cellPadding=0 align=center border=0><tr><td><IMG class=imgframe src='images/10.jpg' border=0></td>

</tr><tr><td><div align="center">7</div></td>

</tr></table></TD>     

</TR></TABLE></DIV>

<DIV id=templayer style="LEFT: 0px; VISIBILITY: hidden; POSITION: absolute; TOP: 0px"></DIV></TD>

<TD align=middle width=25><IMG src="images/pointer-right.gif" border=0 onmouseout=StopScroll() onmouseover=Right() style="CURSOR: pointer"></TD>

</TR></TABLE>

 

 

3修改<body>标签为

 

<body onload="init()">

 

0 Comments

Sat

28

Feb

2009

191、图片上下无间断滚动

191、图片上下无间断滚动

</p>

<div id=demo style=overflow:hidden;height:300;width:150>

       <div id=demo1>

              <img src='roll/1.png'><br>

              <img src='roll/2.png'><br>

              <img src='roll/3.png'><br>

              <img src='roll/4.png'><br>

              <img src='roll/5.png'><br>

              <img src='roll/6.png'><br>

              <img src='roll/7.png'><br>

              <img src='roll/8.png'><br>

              <img src='roll/3.png'><br>

              <img src='roll/4.png'><br>

              <img src='roll/5.png'><br>

              <img src='roll/6.png'><br>

              <img src='roll/7.png'><br>

              <img src='roll/8.png'><br>

              <img src='roll/2.png'><br>

       </div>

       <div id=demo2></div>

</div>

<p>

  <script>

var speed=30;

demo2.innerHTML=demo1.innerHTML

function Marquee()

{

       if(demo2.offsetTop-demo.scrollTop<=0)

              demo.scrollTop-=demo1.offsetHeight;

       else

              demo.scrollTop++;

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

</p>

0 Comments

Sat

28

Feb

2009

190、图像由黑白变彩色

190、图像由黑白变彩色 

1

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

 

<SCRIPT>

function doTrans(filterCode)

{

imgObj.filters[0].apply();

oImg.style.filter = filterCode

imgObj.filters[0].play();

}

</SCRIPT>

 

 

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

 

<p><SPAN id=imgObj onmouseleave='doTrans("gray")' style="FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); WIDTH: 1px" onmouseenter='doTrans("")'><IMG id=oImg style="FILTER: gray" src="pic/wallpaper.jpg"> </SPAN></p>

 

0 Comments

Sat

28

Feb

2009

189、图象大小自动变化

189、图象大小自动变化

<img src="butong.gif" name="u" border="1" alt="很好玩的">

<script language="JavaScript">

 

var b = 1;

var c = true;

 

function butong_net(){

if(document.all);

 

if(c == true) {

b++;

}

if(b==100) {

b--;

c = false

}

 

if(b==10) {

b++;

c = true;

}

 

if(c == false) {

b--;

}

u.width=150 + b;

u.height=125 - b;

setTimeout("butong_net()",50);

}

butong_net();

</script>

0 Comments

Sat

28

Feb

2009

188、图片大小随鼠标触碰而变化

188、图片大小随鼠标触碰而变化

<span id="s1" style = "width : 150"><a href="http://www.7stk.com" target="_blank" onmouseover="butong_net.style.width='200';" onmouseout="butong_net.style.width= '150';"><Img src="butong.gif" id="butong_net"></a></span>

0 Comments

Sat

28

Feb

2009

187、使图片变透明的滤镜

187、使图片变透明的滤镜

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

<style>

<!--

.alpha{

width:320;

FILTER:Chroma(color=#FF00FF);}

body{background:#CCCCCC;}

-->

</style>

 

原图:

<div><IMG SRC="1381286-Data_1.gif" WIDTH="320" HEIGHT="45" BORDER="0" ALT=""></div>

 

<br><br><br>

加样式后:

<div class=alpha><IMG SRC="1381286-Data_1.gif" WIDTH="320" HEIGHT="45" BORDER="0" ALT=""></div>

 

0 Comments

Sat

28

Feb

2009

186、给图片添加图片的倒影图片

186、给图片添加图片的倒影图片

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

 

 

 

<SCRIPT LANGUAGE="JavaScript">

<!--

document.getElementsByClassName = function(className) {

       var children = document.getElementsByTagName('*') || document.all;

       var elements = new Array();

 

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

              var child = children[i];

              var classNames = child.className.split(' ');

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

                     if (classNames[j] == className) {

                            elements.push(child);

                            break;

                     }

              }

       }

       return elements;

}

 

var Reflection = {

       defaultHeight : 0.5,

       defaultOpacity: 0.5,

      

       add: function(image, options) {

              Reflection.remove(image);

             

              doptions = { "height" : Reflection.defaultHeight, "opacity" : Reflection.defaultOpacity }

              if (options) {

                     for (var i in doptions) {

                            if (!options[i]) {

                                   options[i] = doptions[i];

                            }

                     }

              } else {

                     options = doptions;

              }

      

              try {

                     var d = document.createElement('div');

                     var p = image;

                    

                     var classes = p.className.split(' ');

                     var newClasses = '';

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

                            if (classes[j] != "reflect") {

                                   if (newClasses) {

                                          newClasses += ' '

                                   }

                                  

                                   newClasses += classes[j];

                            }

                     }

 

                     var reflectionHeight = Math.floor(p.height*options['height']);

                     var divHeight = Math.floor(p.height*(1+options['height']));

                    

                     var reflectionWidth = p.width;

      

                     /* Copy original image's classes & styles to div */

                     d.className = newClasses;

                     p.className = 'reflected';

                    

                     d.style.cssText = p.style.cssText;

                     p.style.cssText = ' ';

                    

                     if (document.all && !window.opera) {

                            var reflection = document.createElement('img');

                            reflection.src = p.src;

                            reflection.style.width = reflectionWidth+'px';

                           

                            reflection.style.marginBottom = "-"+(p.height-reflectionHeight)+'px';

                            reflection.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity='+(options['opacity']*100)+', style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+(options['height']*100)+')';

                           

                            d.style.width = reflectionWidth+'px';

                            d.style.height = divHeight+'px';

                            p.parentNode.replaceChild(d, p);

                           

                            d.appendChild(p);

                            d.appendChild(reflection);

                     } else {

                            var canvas = document.createElement('canvas');

                            var context = canvas.getContext("2d");

                    

                            canvas.style.height = reflectionHeight+'px';

                            canvas.style.width = reflectionWidth+'px';

                            canvas.height = reflectionHeight;

                            canvas.width = reflectionWidth;

                           

                            d.style.width = reflectionWidth+'px';

                            d.style.height = divHeight+'px';

                            p.parentNode.replaceChild(d, p);

                           

                            d.appendChild(p);

                            d.appendChild(canvas);

                           

                            context.save();

                           

                            context.translate(0,image.height-1);

                            context.scale(1,-1);

                           

                            context.drawImage(image, 0, 0, reflectionWidth, image.height);

 

                            context.restore();

                           

                            context.globalCompositeOperation = "destination-out";

                            var gradient = context.createLinearGradient(0, 0, 0, reflectionHeight);

                           

                            gradient.addColorStop(1, "rgba(255, 255, 255, 1.0)");

                            gradient.addColorStop(0, "rgba(255, 255, 255, "+(1-options['opacity'])+")");

      

                            context.fillStyle = gradient;

                            if (navigator.appVersion.indexOf('WebKit') != -1) {

                                   context.fill();

                            } else {

                                   context.fillRect(0, 0, reflectionWidth, reflectionHeight*2);

                            }

                     }

              } catch (e) {

           }

       },

      

       remove : function(image) {

              if (image.className == "reflected") {

                     image.className = image.parentNode.className;

                     image.parentNode.parentNode.replaceChild(image, image.parentNode);

              }

       }

}

 

function addReflections() {

       var rimages = document.getElementsByClassName('reflect');

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

              var rheight = null;

              var ropacity = null;

             

              var classes = rimages[i].className.split(' ');

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

                     if (classes[j].indexOf("rheight") == 0) {

                            var rheight = classes[j].substring(7)/100;

                     } else if (classes[j].indexOf("ropacity") == 0) {

                            var ropacity = classes[j].substring(8)/100;

                     }

              }

             

              Reflection.add(rimages[i], { height: rheight, opacity : ropacity});

       }

}

 

var previousOnload = window.onload;

window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }

 

//-->

</SCRIPT>

 

 

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

 

  <img class="reflect" src="butong_net.jpg">

 

 

 

0 Comments

Sat

28

Feb

2009

185、万能图片显示器??

185、万能图片显示器??

脚本说明:

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

Sat

28

Feb

2009

184、禁止图片下载的脚本

184、禁止图片下载的脚本

脚本说明:

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

<A HREF="javascript:void(0)" onMouseover="alert('别模我,我害羞!!')"><IMG SRC="j2.gif" Align="center" Border="0" width="99" height="50"></A>

 

0 Comments

Sat

28

Feb

2009

183、图片变形扭曲脚本

183、图片变形扭曲脚本

脚本说明:

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

<img src="j2.gif" name="u" border="0" alt="很好玩的">

<script language="JavaScript">

 

var b = 1;

var c = true;

 

function fade(){

if(document.all);

 

if(c == true) {

b++;

}

if(b==100) {

b--;

c = false

}

 

if(b==10) {

b++;

c = true;

}

 

if(c == false) {

b--;

}

u.width=150 + b;

u.height=125 - b;

setTimeout("fade()",50);

}

</script>

 

 

第二步:<body>区域中改为

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

183、随机显示图片脚本

脚本说明:

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

<SCRIPT language="JavaScript"><!--

today=new Date();

jran=today.getTime();

 

function rnd() {

 

    ia=9301;

    ic=49297;

    im=233280;

 

    jran = (jran*ia+ic) % im;

    return jran/(im*1.0);

};

 

function rand(number) {

 

    return Math.ceil(rnd()*number);

};

 

document.write("<CENTER>");

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

    myNum=(rand(10)); //改成你要随机显示的图片数;

    if(myNum == 1) document.write("<img src='back.jpg'>");

if(myNum == 2) document.write("<img src='j2.gif'>"); //图片路径,可用http://

if(myNum == 3) document.write("<img src='email.gif'>");

if(myNum == 4) document.write("<img src='arrow.gif'>");

if(myNum == 5) document.write("<img src='j2.gif'>");

if(myNum == 6) document.write("<img src='email.gif'>");

if(myNum == 7) document.write("<img src='arrow.gif'>");

if(myNum == 8) document.write("<img src='j2.gif'>");

if(myNum == 9) document.write("<img src='back.jpg'>");

if(myNum == 10) document.write("<img src='email.gif'>");

    else {

document.write();

}

 

};

 

document.write("</CENTER>");

 

 

//-->

 

 

</SCRIPT>

 

 

0 Comments

Sat

28

Feb

2009

182、雪景

182、雪景

脚本说明:

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

<SCRIPT LANGUAGE="JavaScript1.2">

<!-- Begin

var no = 12; // number of hearts

var speed = 10; // smaller number moves the hearts faster

var heart = "5.gif";

var flag;

var ns4up = (document.layers) ? 1 : 0;  // browser sniffer

var ie4up = (document.all) ? 1 : 0;

 

var dx, xp, yp;    // coordinate and position variables

var am, stx, sty;  // amplitude and step variables

var i, doc_width = 800, doc_height = 600;

if (ns4up) {

doc_width = self.innerWidth;

doc_height = self.innerHeight;

} else if (ie4up) {

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

dx = new Array();

xp = new Array();

yp = new Array();

amx = new Array();

amy = new Array();

stx = new Array();

sty = new Array();

flag = new Array();

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

dx[i] = 0;                        // set coordinate variables

xp[i] = Math.random()*(doc_width-30)+10;  // set position variables

yp[i] = Math.random()*doc_height;

amy[i] = 12+ Math.random()*20;         // set amplitude variables

amx[i] = 10+ Math.random()*40;

stx[i] = 0.02 + Math.random()/10; // set step variables

sty[i] = 0.7 + Math.random();     // set step variables

flag[i] = (Math.random()>0.5)?1:0;

if (ns4up) {                      // set layers

if (i == 0) {

document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");

document.write("top=\"15\" visibility=\"show\"><img src=\"");

document.write(heart+ "\" border=\"0\"></layer>");

} else {

document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");

document.write("top=\"15\" visibility=\"show\"><img src=\"");

document.write(heart+ "\" border=\"0\"></layer>");

}

} else

if (ie4up) {

if (i == 0) {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");

document.write(heart+ "\" border=\"0\"></div>");

} else {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");

document.write(heart+ "\" border=\"0\"></div>");

}

}

}

 

function snowNS() {  // Netscape main animation function

for (i = 0; i < no; ++ i) {  // iterate for every dot

if (yp[i] > doc_height-50) {

xp[i] = 10+ Math.random()*(doc_width-amx[i]-30);

yp[i] = 0;

flag[i]=(Math.random()<0.5)?1:0;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

doc_width = self.innerWidth;

doc_height = self.innerHeight;

}

if (flag[i])

dx[i] += stx[i];

else

dx[i] -= stx[i];

if (Math.abs(dx[i]) > Math.PI) {

yp[i]+=Math.abs(amy[i]*dx[i]);

xp[i]+=amx[i]*dx[i];

dx[i]=0;

flag[i]=!flag[i];

}

document.layers["dot"+i].top = yp[i] + amy[i]*(Math.abs(Math.sin(dx[i])+dx[i]));

document.layers["dot"+i].left = xp[i] + amx[i]*dx[i];

 

}

setTimeout("snowNS()", speed);

}

 

function snowIE() {  // IE main animation function

for (i = 0; i < no; ++ i) {  // iterate for every dot

if (yp[i] > doc_height-50) {

xp[i] = 10+ Math.random()*(doc_width-amx[i]-30);

yp[i] = 0;

stx[i] = 0.02 + Math.random()/10;

sty[i] = 0.7 + Math.random();

flag[i]=(Math.random()<0.5)?1:0;

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

if (flag[i])

dx[i] += stx[i];

else

dx[i] -= stx[i];

if (Math.abs(dx[i]) > Math.PI) {

yp[i]+=Math.abs(amy[i]*dx[i]);

xp[i]+=amx[i]*dx[i];

dx[i]=0;

flag[i]=!flag[i];

}

 

document.all["dot"+i].style.pixelTop = yp[i] + amy[i]*(Math.abs(Math.sin(dx[i])+dx[i]));

document.all["dot"+i].style.pixelLeft = xp[i] + amx[i]*dx[i];

}

setTimeout("snowIE()", speed);

}

 

if (ns4up) {

snowNS();

} else if (ie4up) {

snowIE();

}

// End -->

</script>

 

0 Comments

Sat

28

Feb

2009

181、相片选择器脚本

181、相片选择器脚本

脚本说明:

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

<Script Language="JavaScript">

<!-- Begin

function display_image(form) {

selectionname = form.imagename.options[form.imagename.selectedIndex].text;

selection = form.imagename.options[form.imagename.selectedIndex].value;

PreView = window.open("", "Preview", "toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=0,copyhistory=0,width=360,height=440 left=0 top=0");

PreView.document.open();

PreView.document.write("<HTML><HEAD>");

PreView.document.write("<TITLE>Preview</TITLE>");

PreView.document.write("</HEAD><BODY BGCOLOR=FFFFFF TEXT=000000>");

PreView.document.write("<FORM><CENTER><B><FONT SIZE=+1>" +

selectionname + "</FONT></B><HR>");

PreView.document.write("<IMG HSPACE=0 VSPACE=0 " +

"SRC='" + selection + "'>");

PreView.document.write("<HR><FORM><INPUT TYPE='button' VALUE='关闭窗口' " +

"onClick='window.close()'></FORM>");

PreView.document.write("</CENTER>");

PreView.document.write("</BODY></HTML>");

PreView.document.close();

    }

// End -->

</SCRIPT>

 

 

 

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

<FORM>

<select NAME="imagename" onChange="display_image(this.form)">

<option value="" SELECTED>请选择相片

<option value="hhy1.jpg">相片一

<option value="hhy2.jpg">相片二

<option value="hhy3.jpg">相片三

<option value="hhy4.jpg">相片四

<option value="hhy5.jpg">相片五

<option value="hhy6.jpg">相片六

<option value="hhy7.jpg">相片七

 

</select>

</FORM>

 

0 Comments