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

 

图像特效代码8

Sat

28

Feb

2009

237、图片水涟漪代码

237、图片水涟漪代码

0 Comments

Sat

28

Feb

2009

236、烟火祝福新年

236、烟火祝福新年

1 Comments

Sat

28

Feb

2009

235、雪花特效代码

235、雪花特效代码

0 Comments

Sat

28

Feb

2009

234、展开隐藏的图片

234、展开隐藏的图片

<script language="JavaScript">

var b=0;

var c=true;

function fade(){

if(document.all);

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

if(b>380){c=false}

u.width=300

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

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

</script>

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

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

 

0 Comments

Sat

28

Feb

2009

232、自由移动的多幅图

232、自由移动的多幅图

<html>

 

<head>

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

<title>自由移动的多幅图片</title>

</head>

 

<body onLoad="if (document.all||document.layers) sTaRt()">

 

<script language="JavaScript">

<!--

//修改下面的图像地址,可增加或减少图像,图像数量不得少于二幅

Pic=new Array('sto/002.jpg','sto/001.jpg','sto/003.jpg')

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

MaxSpeed=5;

MinSpeed=2;

 

load = new Array()

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

 {

 load[i] = new Image();

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

 }

amount=Pic.length;

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

if (ns){

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

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

}

else{

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

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

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

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

}

VB=0;

HB=0;

R=new Array();

PB=new Array();

RD=new Array();

Y=new Array();

X=new Array();

D=new Array();

SP=new Array();

BY=new Array();

BX=new Array();

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

 Y[i]=10;

 X[i]=10;

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

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

}

function Curve(){

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

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

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

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

}

setTimeout('Curve()',1500);

}

function MoveRandom(){

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

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

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

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

 

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

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

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

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

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

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

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

Y[i]+=y;

X[i]+=x;

VB=180-D[i];

HB=0-D[i];

//Corner rebounds! not necessary but looks nice.

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

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

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

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

//Edge rebounds!

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

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

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

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

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

layer.top=Y[i]+YS;

layer.left=X[i]+XS;

}

setTimeout('MoveRandom()',10);

}

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

//-->

</script>

 

 

</body>

 

</html>

 

 

0 Comments

Sat

28

Feb

2009

231、图片上下循环滚动

231、图片上下循环滚动

<html>

 

<head>

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

<title>自由移动的多幅图片</title>

</head>

 

<body onLoad="if (document.all||document.layers) sTaRt()">

 

<script language="JavaScript">

<!--

//修改下面的图像地址,可增加或减少图像,图像数量不得少于二幅

Pic=new Array('sto/002.jpg','sto/001.jpg','sto/003.jpg')

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

MaxSpeed=5;

MinSpeed=2;

 

load = new Array()

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

 {

 load[i] = new Image();

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

 }

amount=Pic.length;

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

if (ns){

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

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

}

else{

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

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

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

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

}

VB=0;

HB=0;

R=new Array();

PB=new Array();

RD=new Array();

Y=new Array();

X=new Array();

D=new Array();

SP=new Array();

BY=new Array();

BX=new Array();

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

 Y[i]=10;

 X[i]=10;

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

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

}

function Curve(){

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

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

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

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

}

setTimeout('Curve()',1500);

}

function MoveRandom(){

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

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

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

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

 

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

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

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

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

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

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

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

Y[i]+=y;

X[i]+=x;

VB=180-D[i];

HB=0-D[i];

//Corner rebounds! not necessary but looks nice.

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

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

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

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

//Edge rebounds!

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

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

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

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

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

layer.top=Y[i]+YS;

layer.left=X[i]+XS;

}

setTimeout('MoveRandom()',10);

}

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

//-->

</script>

 

 

</body>

 

</html>

 

0 Comments

Sat

28

Feb

2009

230、点击图片将其放大

230、点击图片将其放大

<script language="JavaScript">

<!--

function MM_showHideLayers() { //v3.0

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

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

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

    obj.visibility=v; }

}

 

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

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

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

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

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

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

}

//-->

</script>

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

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

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

    <tr bordercolor="#FFFFFF">

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

        <div align="center">

          <center>

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

              <tr>

                <td width="100%" height="151" valign="top" align="center"><a href="" onclick="return false" ><img name="big" src="sto/1001.jpg" onclick="MM_showHideLayers('layer2','','hide');MM_showHideLayers('layer','','show');MM_showHideLayers('layer1','','show');return false;" border="0" width="450" height="280"></a>

                </td>

              </tr>

              <tr>

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

              </tr>

            </table>

          </center>

        </div>

      </td>

    </tr>

  </table>

</div>

 

0 Comments

Sat

28

Feb

2009

229、图片的切换

229、图片的切换

<html>

 

<head>

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

<title>图片的切换</title>

</head>

 

<body>

 

<style type="text/css">

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

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

</style>

 

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

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

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

 

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

speed = 50  //速度

 

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

nOpac = 100

function FadeImg(){

    if(document.getElementById){

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

        imgs = document.getElementById('img2');

       opacity = nOpac+nPlus;

       nOpac = opacity;

       setTimeout('FadeImg()',speed);

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

        nPlus=-nPlus;

    }

    if(ie5){

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

       imgs.filters.alpha.opacity = opacity;

    }

    if(ns6){

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

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

    }

  }

}

onload=FadeImg;

//  End -->

</script>

<div id="img1">

  <img src="sto/1001.jpg" border=0 width=140 height=105>

</div>

<div id="img2">

  <img src="sto/1002.jpg" border=0 width=140 height=105>

</div>

 

</body>

 

</html>

0 Comments

Sat

28

Feb

2009

228、图片的分割效果

228、图片的分割效果

<!--[if gte mso 9]>

<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>

</xml><![endif]-->

</head>

 

<body>

 

<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="#" xmlns:(null)0="http://www.w3.org/TR/REC-html40">

<head>

<style>

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

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

</style>

</head>

<!--[if gte vml 1]><v:oval id="_x0000_s1025"

 style='width:120pt;height:90pt'>

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

</v:oval><![endif]--><![if !vml]><img border=0 width=162 height=122

src="2008212.files/image001.gif" v:shapes="_x0000_s1025"><![endif]>原图片:<br>

 

 

<p>

<img border="0" src="sto/1001.jpg" width="206" height="288"></p>

 

 

0 Comments

Sat

28

Feb

2009

227、图形移动效果

227、图形移动效果

<!--将以下代码加入HTML<Body></Body>之间-->

 

<div id="img" style="position:absolute;">

<img src="sto/01.gif"

onClick="pause_resume();" width="85" height="55">

</div>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var xPos = 20;

var yPos = document.body.clientHeight;

var step = 1;

var delay = 30;

var height = 0;

var Hoffset = 0;

var Woffset = 0;

var yon = 0;

var xon = 0;

var pause = true;

var interval;

img.style.top = yPos;

function changePos() {

width = document.body.clientWidth;

height = document.body.clientHeight;

Hoffset = img.offsetHeight;

Woffset = img.offsetWidth;

img.style.left = xPos + document.body.scrollLeft;

img.style.top = yPos + document.body.scrollTop;

if (yon) {

yPos = yPos + step;

}

else {

yPos = yPos - step;

}

if (yPos < 0) {

yon = 1;

yPos = 0;

}

if (yPos >= (height - Hoffset)) {

yon = 0;

yPos = (height - Hoffset);

}

if (xon) {

xPos = xPos + step;

}

else {

xPos = xPos - step;

}

if (xPos < 0) {

xon = 1;

xPos = 0;

}

if (xPos >= (width - Woffset)) {

xon = 0;

xPos = (width - Woffset);

   }

}

function start() {

img.visibility = "visible";

interval = setInterval('changePos()', delay);

}

function pause_resume() {

if(pause) {

clearInterval(interval);

pause = false;

}

else {

interval = setInterval('changePos()',delay);

pause = true;

   }

}

start();

//  End -->

</script>

 

0 Comments

Sat

28

Feb

2009

226、图片预览上传代码

226、图片预览上传代码

<script>

function viewmypic(mypic,imgfile) {

if (imgfile.value){

mypic.src=imgfile.value;

mypic.style.display="";

mypic.border=1;

}

}

</script>

</head>

 

<body>

<center>

<form name="upmyimg" method="post" enctype="multipart/form-data" action="getyourpic/" onsubmit="return checkimg( this );" >

<input name="imgfile" type="file" id="imgfile" size="40" onchange="viewmypic(showimg,this.form.imgfile);" />

<br />

</form>

<img name="showimg" id="showimg" src="" style="display:none;" alt="预览图片" />

<br />

</div>

<div style="display:none">

</div>

</center>

0 Comments

Sat

28

Feb

2009

225、点击消失图片

225、点击消失图片

<script language="javascript1.2">

 

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

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

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

 

var floatimages=new Array();

floatimages[0]='sto/01.gif';//修改图片地址,可以增加图片数目

//floatimages[1]='002.gif';

 

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

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

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

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

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

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

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

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

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

}

document.write(t);

 

function moveimage(num){

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

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

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

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

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

}

 

function getnewprops(num){

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

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

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

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

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

}

 

function getscrollx(){

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

if(IE4)return document.body.scrollLeft;

}

 

function getscrolly(){

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

if(IE4)return document.body.scrollTop;

}

 

function getid(name){

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

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

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

}

 

function moveidto(num,x,y){

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

if(IE4 || NS6){

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

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

}}

 

function getidleft(num){

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

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

}

 

function getidtop(num){

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

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

}

 

function moveidby(num,dx,dy){

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

if(IE4 || NS6){

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

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

}}

 

function getwindowwidth(){

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

if(IE4)return document.body.clientWidth;

}

 

function getwindowheight(){

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

if(IE4)return document.body.clientHeight;

}

 

function init(){

wind_w=getwindowwidth();

wind_h=getwindowheight();

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

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

if(NS4){

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

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

}

if(NS6 || IE4){

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

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

}

getnewprops(i);

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

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

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

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

}}

 

function hidebutterfly(){

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

if (IE4)

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

else if (NS6)

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

else if (NS4)

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

clearInterval(startfly)

}

}

 

if (NS4||NS6||IE4){

window.onload=init;

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

}

</script>

 

0 Comments

Sat

28

Feb

2009

224、图片移动代码

224、图片移动代码

<!--将以下代码加入HTML<Body></Body>之间-->

 

<div id="img" style="position:absolute;">

<img src="sto/01.gif"

onClick="pause_resume();" width="85" height="55">

</div>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

var xPos = 20;

var yPos = document.body.clientHeight;

var step = 1;

var delay = 30;

var height = 0;

var Hoffset = 0;

var Woffset = 0;

var yon = 0;

var xon = 0;

var pause = true;

var interval;

img.style.top = yPos;

function changePos() {

width = document.body.clientWidth;

height = document.body.clientHeight;

Hoffset = img.offsetHeight;

Woffset = img.offsetWidth;

img.style.left = xPos + document.body.scrollLeft;

img.style.top = yPos + document.body.scrollTop;

if (yon) {

yPos = yPos + step;

}

else {

yPos = yPos - step;

}

if (yPos < 0) {

yon = 1;

yPos = 0;

}

if (yPos >= (height - Hoffset)) {

yon = 0;

yPos = (height - Hoffset);

}

if (xon) {

xPos = xPos + step;

}

else {

xPos = xPos - step;

}

if (xPos < 0) {

xon = 1;

xPos = 0;

}

if (xPos >= (width - Woffset)) {

xon = 0;

xPos = (width - Woffset);

   }

}

function start() {

img.visibility = "visible";

interval = setInterval('changePos()', delay);

}

function pause_resume() {

if(pause) {

clearInterval(interval);

pause = false;

}

else {

interval = setInterval('changePos()',delay);

pause = true;

   }

}

start();

//  End -->

</script>

0 Comments

Sat

28

Feb

2009

223、图片展示效果

223、图片展示效果

<script>

function viewmypic(mypic,imgfile) {

if (imgfile.value){

mypic.src=imgfile.value;

mypic.style.display="";

mypic.border=1;

}

}

</script>

</head>

 

<body>

<center>

<form name="upmyimg" method="post" enctype="multipart/form-data" action="getyourpic/" onsubmit="return checkimg( this );" >

<input name="imgfile" type="file" id="imgfile" size="40" onchange="viewmypic(showimg,this.form.imgfile);" />

<br />

</form>

<img name="showimg" id="showimg" src="" style="display:none;" alt="预览图片" />

<br />

</div>

<div style="display:none">

</div>

</center>

 

0 Comments

Sat

28

Feb

2009

222、flash图片切换

222flash图片切换

<script language="javascript1.2">

 

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

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

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

 

var floatimages=new Array();

floatimages[0]='sto/01.gif';//修改图片地址,可以增加图片数目

//floatimages[1]='002.gif';

 

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

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

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

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

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

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

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

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

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

}

document.write(t);

 

function moveimage(num){

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

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

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

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

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

}

 

function getnewprops(num){

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

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

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

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

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

}

 

function getscrollx(){

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

if(IE4)return document.body.scrollLeft;

}

 

function getscrolly(){

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

if(IE4)return document.body.scrollTop;

}

 

function getid(name){

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

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

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

}

 

function moveidto(num,x,y){

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

if(IE4 || NS6){

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

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

}}

 

function getidleft(num){

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

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

}

 

function getidtop(num){

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

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

}

 

function moveidby(num,dx,dy){

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

if(IE4 || NS6){

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

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

}}

 

function getwindowwidth(){

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

if(IE4)return document.body.clientWidth;

}

 

function getwindowheight(){

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

if(IE4)return document.body.clientHeight;

}

 

function init(){

wind_w=getwindowwidth();

wind_h=getwindowheight();

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

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

if(NS4){

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

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

}

if(NS6 || IE4){

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

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

}

getnewprops(i);

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

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

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

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

}}

 

function hidebutterfly(){

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

if (IE4)

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

else if (NS6)

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

else if (NS4)

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

clearInterval(startfly)

}

}

 

if (NS4||NS6||IE4){

window.onload=init;

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

}

</script>

 

0 Comments

Sat

28

Feb

2009

221、flash幻灯片切换 下载

221flash幻灯片切换  下载

<html>

 

<head>

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

<title>鼠标经过箭头时,图片会向左或向右横向移动</title>

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

</head>

<!--body区域内代码-->

<body onload="init()">

<TABLE cellSpacing=1 width=660 align=center border=0>

<TR bgColor=#f8f8f8>

<TD align=middle width=25><IMG

      src="sto/20050905085723_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='sto/001.jpg' border=0></td>

</tr><tr><td><div align="center">美女-和我聊天吧</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='sto/002.jpg' border=0></td>

</tr><tr><td><div align="center">西藏-18-和我视频吧</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='sto/003.jpg' border=0></td>

</tr><tr><td><div align="center">湘妹子-19 </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='sto/004.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='sto/005.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='sto/006.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='sto/001.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='sto/002.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='sto/001.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='sto/004.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="sto/20050905085729_right.gif" border=0 onmouseout=StopScroll() onmouseover=Right() style="CURSOR: pointer"></TD>

</TR></TABLE>

</body>

 

 

</body>

 

</html>

 

 

0 Comments

Sat

28

Feb

2009

220、放大展示效

220、放大展示效

<html>

 

<head>

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

<title>-简单的图片放大展示效果</title>

<style>

.spic a img{-moz-opacity:0.5; filter:alpha(opacity=50);border:0px;}

.spic a:hover{font-size:9px;}

.spic a:hover img{-moz-opacity:0.5; filter:alpha(opacity=100);cursor:hand;}

</style>

<script>

function seeBig(thispic) {

  if(thispic==1){

    document.all.viewPic.innerHTML='<img border=0 src=sto/1002.jpg>'

  }

  if(thispic==2){

    document.all.viewPic.innerHTML='<img border=0 src=sto/1003.jpg>'

  }

  if(thispic==3){

    document.all.viewPic.innerHTML='<img border=0 src=sto/1004.jpg>'

  }

  if(thispic==4){

    document.all.viewPic.innerHTML='<img border=0 src=sto/1005.jpg>'

  }

}

</script>

</head>

 

<body>

 

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

       <tr>

              <td align="center"><span class="spic">

              <a href="javascript:seeBig(1)" style="cursor:pointer">

              <img border="0" src="sto/1002.jpg" width="50" height="50"></a></span></td>

              <td align="center"><span class="spic">

              <a href="javascript:seeBig(2)" style="cursor:pointer">

              <img border="0" src="sto/1003.jpg" width="50" height="50"></a></span></td>

              <td align="center"><span class="spic">

              <a href="javascript:seeBig(3)" style="cursor:pointer">

              <img border="0" src="sto/1004.jpg" width="50" height="50"></a></span></td>

              <td align="center"><span class="spic">

              <a href="javascript:seeBig(4)" style="cursor:pointer">

              <img border="0" src="sto/1005.jpg" width="50" height="50"></a></span></td>

       </tr>

       <tr>

              <td colspan="4" align="center" id="viewPic"><img border="0" src="sto/1006.jpg"></td>

       </tr>

</table>

 

</body>

 

</html>

 

0 Comments

Sat

28

Feb

2009

219、对鼠标过敏的图片

219、对鼠标过敏的图片

<head>

<!-- meta data -->

<meta http-equiv="Content-Language" content="zh-cn" />

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

<meta name="robots" content="all" />

<title>仿拍拍paipai.com首页产品图片随机轮显切换效果</title>

<style>

body {font-size:12px}

img {border:0px}

#sale{right:206px;top:0;width:260px;background:#fff}

#saleTitle{text-align:right;padding-top:5px;padding-right:5px;width:255px;height:20px;background:url("sto/saletitle.gif") no-repeat}

#saleList{margin-top:5px}

#saleList .saleTwo{height:108px;background:url("sto/salelineh.gif") bottom repeat-x;}

#saleList a{display:block;height:108px;width:86px;text-align:center;float:left;overflow:hidden}

#saleList a.saleItem{background:url("sto/salelinev.gif") right repeat-y;}

#saleList a img{margin:5px 0}

#saleList a:hover{background-color:#EBFFC5}

</style>

<script type="text/javascript">

rnd.today=new Date();

rnd.seed=rnd.today.getTime();

function rnd(){

       rnd.seed = (rnd.seed*9301+49297) % 233280;

       return rnd.seed/(233280.0);

}

function rand(number){

       return Math.ceil(rnd()*number)-1;

}

function nextSale(order){

       if(order=="up")     saleNum--;

       else saleNum++;

       if(saleNum>2) saleNum=0

       else if(saleNum<0) saleNum=2;

       //alert(saleNum);

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

              document.getElementById("saleList"+i).style.display="none";

           document.getElementById("saleList"+saleNum).style.display="";

}

</script>

</head>

 

<body>

 

<div id="sale" class="absolute overflow">

       <div id="saleTitle" class="absolute">

              <a href="javascript:nextSale('up')" title="点击到上一屏">

              <img src="sto/salefore.gif" hspace="4" onmouseover="this.src='sto/saleforeover.gif'" onmouseout="this.src='sto/salefore.gif'" /></a><a href="javascript:nextSale('down')" title="点击到下一屏"><img src="sto/salenext.gif" onmouseover="this.src='sto/salenextover.gif'" onmouseout="this.src='sto/salenext.gif'" /></a></div>

       <div class="overflow" style="height:330px" id="saleList">

              <script type="text/javascript">var saleNum=rand(3);</script>

              <div id="saleList0" style="display:none">

                     <div class="saleTwo">

                            <a class="saleItem" href="http://www.7stk.com/" target="_blank">

                            <div>

                                   <img alt="圣诞浪漫饰品超级大促" src="http://pics.paipai.com/update/20071213/lady_ss001.jpg" width="65" height="65" /></div>

                            <div>

                                   圣诞浪漫饰品<br />

                                   超级大促</div>

                            </a>

                            <a class="saleItem" href="http://www.7stk.com/" target="_blank">

                            <div>

                                   <img alt="摄像头集结号给你新的感觉" src="http://pics.paipai.com/update/20071220/index_digital-1.jpg" width="65" height="65" /></div>

                            <div>

                                   摄像头集结号<br />

                                   给你新的感觉</div>

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

                            <div>

                                   <img alt="好感度提升韩版娃娃装" src="http://pics.paipai.com/update/20071206/lady_65_65_21.jpg" width="65" height="65" /></div>

                            <div>

                                   好感度提升<br />

                                   韩版娃娃装</div>

                            </a></div>

                     <div class="saleTwo">

                            <a class="saleItem" href="http://www.7stk.com/" target="_blank">

                            <div>

                                   <img alt="复古牛仔外套特惠119元起" src="http://pics.paipai.com/update/20071211/index_nz.jpg" width="65" height="65" /></div>

                            <div>

                                   复古牛仔外套<br />

                                   特惠119元起</div>

                            </a>

                            <a class="saleItem" href="http://www.7stk.com/" target="_blank">

                            <div>

                                   <img alt="圣诞拍拍特供运动服3" src="http://pics.paipai.com/update/20071213/index_idnex5-1.jpg" width="65" height="65" /></div>

                            <div>

                                   圣诞拍拍特供<br />

                                   运动服3</div>

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

                            <div>

                                   <img alt="摄像头集结号给你新的感觉" src="http://pics.paipai.com/update/20071220/index_digital-1.jpg" width="65" height="65" /></div>

                            <div>

                                   摄像头集结号<br />

                                   给你新的感觉</div>

                            </a></div>

                     <div>

                            <a class="saleItem" href="http://www.7stk.com/" target="_blank">

                            <div>

                                   <img alt="圣诞拍拍特供电脑周边4" src="http://pics.paipai.com/update/20071220/index_digital-2.jpg" width="65" height="65" /></div>

                            <div>

                                   圣诞拍拍特供<br />

                                   电脑周边4</div>

                            </a>

                            <a class="saleItem" href="http://www.7stk.com/" target="_blank">

                            <div>

                                   <img alt="party扮靓甜美腮红" src="http://pics.paipai.com/update/20071213/lady_ss002.jpg" width="65" width="65" height="65" /></div>

                            <div>

                                   party扮靓<br />

                                   甜美腮红</div>

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

                            <div>

                                   <img alt="好感度提升韩版娃娃装" src="http://pics.paipai.com/update/20071206/lady_65_65_21.jpg" width="65" height="65" /></div>

                            <div>

                                   好感度提升<br />

                                   韩版娃娃装</div>

                            </a></div>

              </div>

              <div id="saleList1" style="display:none">

                     <div class="saleTwo">

                            <a class="saleItem" href="http://www.7stk.com/" target="_blank">

                            <div>

                                   <img alt="新奇好玩便宜尽在网游频道" src="http://pics.paipai.com/update/20071123/game_ad_02.jpg" width="65" height="65" /></div>

                            <div>

                                   新奇好玩便宜<br />

                                   尽在网游频道</div>

                            </a>

                            <a class="saleItem" href="http://www.7stk.com/" target="_blank">

                            <div>

                                   <img alt="展现高贵气质骑士系马靴" src="http://pics.paipai.com/update/20071220/lady_003.jpg" width="65" height="65" /></div>

                            <div>

                                   展现高贵气质<br />

                                   骑士系马靴</div>

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

                            <div>

                                   <img alt="摄像头集结号给你新的感觉" src="http://pics.paipai.com/update/20071220/index_digital-1.jpg" width="65" height="65" /></div>

                            <div>

                                   摄像头集结号<br />

                                   给你新的感觉</div>

                            </a></div>

                     <div class="saleTwo">

                            <a class="saleItem" href="http://www.7stk.com/" target="_blank">

                            <div>

                                   <img alt="永不过时条纹毛衣" src="http://pics.paipai.com/update/20071206/lady_65_65_20.jpg" width="65" height="65" /></div>

                            <div>

                                   永不过时<br />

                                   条纹毛衣</div>

                            </a>

                            <a class="saleItem" href="http://www.7stk.com/" target="_blank">

                            <div>

                                   <img alt="圣诞拍拍特供运动鞋2" src="http://pics.paipai.com/update/20071213/index_index-4.jpg" width="65" height="65" /></div>

                            <div>

                                   圣诞拍拍特供<br />

                                   运动鞋2</div>

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

                            <div>

                                   <img alt="好感度提升韩版娃娃装" src="http://pics.paipai.com/update/20071206/lady_65_65_21.jpg" width="65" height="65" /></div>

                            <div>

                                   好感度提升<br />

                                   韩版娃娃装</div>

                            </a></div>

                     <div>

                            <a class="saleItem" href="http://www.7stk.com/" target="_blank">

                            <div>

                                   <img alt="精简唯美索爱K630" src="http://pics.paipai.com/update/20071224/digital_K630.jpg" width="65" height="65" /></div>

                            <div>

                                   精简唯美<br />

                                   索爱K630</div>

                            </a>

                            <a class="saleItem" href="http://www.7stk.com/" target="_blank">

                            <div>

                                   <img alt="原装瑞士军刀精选" src="http://pics.paipai.com/update/20071203/index_jd.jpg" width="65" width="65" height="65" /></div>

                            <div>

                                   原装瑞士军刀<br />

                                   精选</div>

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

                            <div>

                                   <img alt="超薄机身索爱W880" src="http://pics.paipai.com/update/20071207/digital_W880.jpg" width="65" height="65" /></div>

                            <div>

                                   超薄机身<br />

                                   索爱W880</div>

                            </a></div>

              </div>

              <div id="saleList2" style="display:none">

                     <div class="saleTwo">

                            <a class="saleItem" href="http://www.7stk.com/" target="_blank">

                            <div>

                                   <img alt="各就各味秋冬饮食计划" src="http://image.paipai.com/cgi-bin/showimg?uin=476363000&filename=1C64B8F8-470D9864F8B8641C0000000000783598011CC2EA.jpg&type=3" width="65" height="65" /></div>

                            <div>

                                   各就各味<br />

                                   秋冬饮食计划</div>

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

                            <div>

                                   <img alt="好感度提升韩版娃娃装" src="http://pics.paipai.com/update/20071206/lady_65_65_21.jpg" width="65" height="65" /></div>

                            <div>

                                   好感度提升<br />

                                   韩版娃娃装</div>

                            </a></div>

                     <div class="saleTwo">

                            <a class="saleItem" href="http://www.7stk.com/" target="_blank">

                            <div>

                                   <img alt="圣诞拍拍特供随身视听5" src="http://pics.paipai.com/update/20071220/index_digital-3.jpg" width="65" height="65" /></div>

                            <div>

                                   圣诞拍拍特供<br />

                                   随身视听5</div>

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

                            <div>

                                   <img alt="超薄机身索爱W880" src="http://pics.paipai.com/update/20071207/digital_W880.jpg" width="65" height="65" /></div>

                            <div>

                                   超薄机身<br />

                                   索爱W880</div>

                            </a></div>

                     <div>

                            <a class="saleItem" href="http://www.7stk.com/" target="_blank">

                            <div>

                                   <img alt="我爱我家家居大抢购" src="http://pics.paipai.com/update/20071206/index_jiaj2.jpg" width="65" height="65" /></div>

                            <div>

                                   我爱我家<br />

                                   家居大抢购</div>

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

                            <div>

                                   <img alt="超值彩妆套装变身派对女王" src="http://pics.paipai.com/update/20071213/lady_ss003.jpg" width="65" width="65" height="65" /></div>

                            <div>

                                   超值彩妆套装<br />

                                   变身派对女王</div>

                            </a></div>

              </div>

       </div>

</div>

<script type="text/javascript">document.getElementById("saleList"+saleNum).style.display="";</script>

<p> </p>

 

</body>

 

</html>

0 Comments

Sat

28

Feb

2009

218、鼠标滚动控制大小

218、鼠标滚动控制大小

<head>

<meta http-equiv="Content-Language" content="zh-cn" />

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

<meta name="robots" content="all" />

<title>用鼠标滚轮滚动控制图片显示的大小</title>

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

</head>

 

<body>

 

<p>将鼠标放在图片上,然后滚动鼠标滚轮试试看</p>

<p>

<img border="0" src="sto/1006.jpg" onmousewheel="return bbimg(this)"></p>

<p> </p>

<p> </p>

<p> </p>

 

</body>

 

</html>

 

0 Comments

Sat

28

Feb

2009

217、精美图片展示 代码

217、精美图片展示  代码

<head>

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

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

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

<style type="text/css">

       body {

              background: #222;

              overflow: hidden;

              left: 0;

              top: 0;

              width: 100%;

              height: 100%;

              margin: 0;

              padding: 0;

       }

       #screen span {

              position:absolute;

              overflow:hidden;

              border:#FFF solid 1px;

              background:#FFF;

       }

       #screen img{

              position:absolute;

              left:-32px;

              top:-32px;

              cursor: pointer;

       }

       #caption, #title{

              color: #FFF;

              font-family: georgia, 'times new roman', times, veronica, serif;

              font-size: 1em;

              text-align: center;

       }

       #caption b {

              font-size: 2em;

       }

 

</style>

<script type="text/javascript"><!--

window.onerror = new Function("return true");

var obj = [];

var scr;

var spa;

var img;

var W;

var Wi;

var Hi;

var wi;

var hi;

var Sx;

var Sy;

var M;

var xm;

var ym;

var xb = 0;

var yb = 0;

var ob =  - 1;

var cl = false;

 

/* needed in standard mode */

px = function(x)

{

       return Math.round(x) + "px";

}

 

/* center image  - do not resize for perf. reason */

img_center = function(o)

{

       with(img[o])

       {

              style.left = px( - (width - Wi) / 2);

              style.top = px( - (height - Hi) / 2);

       }

}

 

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

var Nx = 4; //size grid x

var Ny = 4; //size grid y

var Tx = 3; // image width

var Ty = 3; // image height

var Mg = 40; // margin

var SP = 1; // speed

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

 

function Cobj(o, x, y)

{

       this.o = o;

       this.ix = Math.min(Nx - Tx, Math.max(0, Math.round(x - (Tx / 2))));

       this.iy = Math.min(Ny - Ty, Math.max(0, Math.round(y - (Ty / 2))));

       this.li = ((this.ix * M + this.ix * Sx) - (x * M + x * Sx)) / SP;

       this.ti = ((this.iy * M + this.iy * Sy) - (y * M + y * Sy)) / SP;

       this.l = 0;

       this.t = 0;

       this.w = 0;

       this.h = 0;

       this.s = 0;

       this.mv = false;

       this.spa = spa[o].style;

       this.img = img[o];

       this.txt = img[o].alt;

       img[o].alt = "";

 

       /* zooming loop */

       this.zoom = function()

       {

              with(this)

              {

                     l += li * s;

                     t += ti * s;

                     w += wi * s;

                     h += hi * s;

                     if ((s > 0 && w < Wi) || (s < 0 && w > Sx))

                     {

                            /* force window.event */

                            window.focus();

                            /* loop */

                            setTimeout("obj[" + o + "].zoom()", 16);

                     }

                     else

                     {

                            /* finished */

                            mv = false;

                            /* set final position */

                            if (s > 0)

                            {

                                   l = ix * M + ix * Sx;

                                   t = iy * M + iy * Sy;

                                   w = Wi;

                                   h = Hi;

                            }

                            else

                            {

                                   l = x * M + x * Sx;

                                   t = y * M + y * Sy;

                                   w = Sx;

                                   h = Sy;

                            }

                     }

                     /* html animation */

                     with(spa)

                     {

                            left = px(l);

                            top = px(t);

                            width = px(w);

                            height = px(h);

                            zIndex = Math.round(w);

                     }

              }

       }

 

       this.click = function()

       {

              with(this)

              {

                     img_center(o);

                     /* zooming logic */

                     if ( ! mv || cl)

                     {

                            if (s > 0)

                            {

                                   if (cl || Math.abs(xm - xb) > Sx * .4 || Math.abs(ym - yb) > Sy * .4)

                                   {

                                          s =  - 2;

                                          mv = true;

                                          zoom();

                                          cap.innerHTML = txt;

                                   }

                            }

                            else

                            {

                                   if (cl || ob != o)

                                   {

                                          if (ob >= 0)

                                          {

                                                 with(obj[ob])

                                                 {

                                                        s =  - 2;

                                                        mv = true;

                                                        zoom();

                                                 }

                                          }

                                          ob = o;

                                          s = 1;

                                          xb = xm;

                                          yb = ym;

                                          mv = true;

                                          zoom();

                                          cap.innerHTML = txt;

                                   }

                            }

                     }

              }

       }

      

       /* hook up events */

       img[o].onmouseover = img[o].onmousemove = img[o].onmouseout = new Function("cl=false;obj[" + o + "].click()");

       img[o].onclick = new Function("cl=true;obj[" + o + "].click()");

       img[o].onload = new Function("img_center(" + o + ")");

 

       /* initial display */

       this.zoom();

}

 

/* mouse */

document.onmousemove = function(e)

{

       if ( ! e)

       {

              e = window.event;

       }

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

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

}

 

/* init */

function load()

{

       /* html elements */

       scr = document.getElementById("screen");

       spa = scr.getElementsByTagName("span");

       img = scr.getElementsByTagName("img");

       cap = document.getElementById("caption");

      

       /* mouseover border */

       document.getElementById("border").onmouseover = function()

       {

              cl = true;

              if(ob >= 0 && obj[ob].s > 0) obj[ob].click();

              ob = -1;

       }

 

       /* global variables */

       W = parseInt(scr.style.width);

       H = parseInt(scr.style.height);

       M = W / Mg;

       Sx = (W - (Nx - 1) * M) / Nx;

       Sy = (H - (Ny - 1) * M) / Ny;

       Wi = Tx * Sx + (Tx - 1) * M;

       Hi = Ty * Sy + (Ty - 1) * M;

       SP = M * Tx * SP;

       wi = (Wi - Sx) / SP;

       hi = (Hi - Sy) / SP;

      

       /* create objects */

       for (k = 0, i = 0; i < Nx; i ++)

       {

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

              {

                     obj[k] = new Cobj(k ++, i, j);

              }

       }

}

//-->

</script>

</head>

 

<body>

 

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

       <div id="title" style="position: absolute; width: 440px; height: 40px; left: -220px; top: -200px;">

       </div>

       <div id="border" style="border: 1px solid rgb(85, 85, 85); background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 440px; height: 340px; left: -220px; top: -170px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">

       </div>

       <div id="screen" style="background: rgb(0, 0, 0) none repeat scroll 0%; position: absolute; width: 400px; height: 300px; left: -200px; top: -150px; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">

              <span style="left: 0px; top: 0px; width: 93px; height: 68px; z-index: 93;">

              <img style="left: -11px; top: -9px;" src="sto/1001.jpg" alt=""></span>

              <span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;">

              <img style="left: -11px; top: -8px;" src="sto/1002.jpg" alt=""></span>

              <span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;">

              <img style="left: -11px; top: -9px;" src="sto/1003.jpg" alt=""></span>

              <span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;">

              <img style="left: -11px; top: -9px;" src="sto/1004.jpg" alt=""></span>

              <span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;">

              <img style="left: -11px; top: -9px;" src="sto/1005.jpg" alt=""></span>

              <span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;">

              <img style="left: -11px; top: -9px;" src="sto/1006.jpg" alt=""></span>

              <span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;">

              <img style="left: -11px; top: -9px;" src="sto/1001.jpg" alt=""></span>

              <span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;">

              <img style="left: -11px; top: -9px;" src="sto/1001.jpg" alt=""></span>

              <span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;">

              <img style="left: -11px; top: -9px;" src="sto/006.jpg" alt=""></span>

              <span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;">

              <img style="left: -11px; top: -9px;" src="sto/007.jpg" alt=""></span>

              <span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;">

              <img style="left: -11px; top: -9px;" src="sto/006.jpg" alt=""></span>

              <span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;">

              <img style="left: -11px; top: -9px;" src="sto/1001.jpg" alt=""></span>

              <span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;">

              <img style="left: -11px; top: -9px;" src="sto/004.jpg" alt=""></span>

              <span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;">

              <img style="left: -11px; top: -9px;" src="sto/003.jpg" alt=""></span>

              <span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;">

              <img style="left: -11px; top: -9px;" src="sto/002.jpg" alt=""></span>

              <span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;">

              <img style="left: -11px; top: -9px;" src="sto/001.jpg" alt=""></span>

       </div>

       <div id="caption" style="position: absolute; width: 440px; height: 60px; left: -220px; top: 175px;">

              <b>carefully</b> weight the options</div>

</div>

<script type="text/javascript"><!--

// starter

load();

//-->

</script>

 

</body>

 

</html>

 

0 Comments

Sat

28

Feb

2009

216、精美图片展示 代码

216、精美图片展示  代码

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

              position: absolute;

              top: 0px;

              left: 0px;

              width: 100%;

              height: 100%;

       }

       #screen {

              position: absolute;

              top: 1%;

              left: 1%;

              width: 98%;

              height: 98%;

              background: #000;

              color: #fff;

       }

       #screen div {

              position: absolute;

              overflow: hidden;

              cursor: pointer;

       }

       #screen img {

              position: absolute;

              width: 100%;

              height: 100%;

       }

       #screen .label {

              position: absolute;

              color: #FFF;

              background: #000;

              font-family: arial;

              white-space: no-wrap;

       }

</style>

<!-- dhteumeuleu utilities -->

<script type="text/javascript">

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

// DHTML mini library

// Gerard Ferrandez - January 2007

// http://www.dhteumeuleu.com

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

 

id = function(o) {

       return document.getElementById(o);

}

 

px = function (x) {

       return ''.concat(Math.round(x), 'px');

}

 

pxLeft = function(o) {

       for (var x = 0; o != null; o = o.offsetParent) x += o.offsetLeft;

       return x;

}

 

pxTop = function(o) {

       for (var x = 0; o != null; o = o.offsetParent) x += o.offsetTop;

       return x;

}

 

/* ==== DOM 2 add event ==== */

addEvent = function (o, e, f) {

       var r = false;

       if (window.addEventListener) {

              o.addEventListener(e, f, false);

              r = true;

       } else if (window.attachEvent) {

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

       }

       return r;

}

</script>

<script type="text/javascript">

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

//            ====== Javascript Slideshow ======

// script written by Gerard Ferrandez - December 31, 2006

// http://www.dhteumeuleu.com/

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

 

var diap = {

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

       BR : 3,     // border size in px

       ZR : .75,   // zoom ratio

       SP : .1,    // speed

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

       V : false,

       S : false,

       G : true,

 

       resize : function () {

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

              diap.nw = diap.scr.offsetWidth;

              diap.nh = diap.scr.offsetHeight;

              diap.nwu = (diap.nw * diap.ZR);

              diap.nhu = (diap.nh * diap.ZR);

              diap.nwt = Math.floor((diap.nw * (1 - diap.ZR) * .5) / (diap.NX - 1)) - diap.BR;

              diap.nht = Math.floor((diap.nh * (1 - diap.ZR) * .5) / (diap.NY - 1)) - diap.BR;

              diap.rc  = 255 / ((diap.nw / diap.NX) - diap.nwt);

              if (diap.N) {

                     diap.setPosition();

                     if (!diap.G) diap.delLabels();

              }

       },

 

       setPosition : function () {

              /* ==== calculate image target position  ==== */

              var k = 0;

              var y = this.S ? this.BR + Math.floor((this.NY - this.Y - 1) * (this.nht + this.BR)) : 0;

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

                     var x = this.S ? this.BR + Math.floor((this.NX - this.X - 1) * (this.nwt + this.BR)) : 0;

                     for (var i = 0; i < this.NX; i++) {

                            var o = this.spa[k++];

                            o.y1 = y;

                            o.x1 = x;

                            o.w1 = this.S ? (o == this.S ? this.nwu - this.BR : this.nwt) : Math.ceil(this.nw / this.NX) - this.BR;

                            o.h1 = this.S ? (o == this.S ? this.nhu - this.BR : this.nht) : Math.ceil(this.nh / this.NY) - this.BR;

                            x += this.S ? ((this.X == i) ? this.nwu : this.nwt + this.BR) : Math.ceil(this.nw / this.NX);

                     }

                     y += this.S ? ((this.Y == j) ? this.nhu : this.nht + this.BR) : Math.ceil(this.nh / this.NY);

              }

       },

 

       delLabels : function () {

              /* ==== remove texts ==== */

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

                     var o = diap.spa[i];

                     if (o.T) diap.scr.removeChild(o.T);

                     o.T = false;

              }

       },

 

       run : function () {

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

              for ( var i = 0; i < diap.N; i++) diap.spa[i].move();

              setTimeout(diap.run, 16);

       },

 

       init : function (container, NX, NY, path, images) {

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

              this.scr = id(container);

              if (!this.scr || NX * NY != images.length) { alert('ID-10-T error...'); return false; }

              this.NX = NX;

              this.NY = NY;

              this.spa = {};

              this.resize();

              var k = 0;

              for (var y = 0; y < this.NY; y++) {

                     for (var x = 0; x < this.NX; x++) {

                            /* ==== create HTML elements ==== */

                            var s = this.spa[k] = document.createElement('div');

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

 

                            /* ==== opacity optimized function ==== */

                            s.img.setOpacity = function (alpha) {

                                   if (alpha < 0) alpha = 0; else if (alpha > 100) alpha = 100;

                                   if (alpha == 100) {

                                          /* ==== speed opt - remove IE filter ==== */

                                          this.style.visibility = 'visible';

                                          this.style.filter = '';

                                          this.style.opacity = 1;

                                          return 100;

                                   } else if (alpha == 0) {

                                          /* ==== hide image, remove opacity ==== */

                                          this.style.visibility = 'hidden';

                                          this.style.filter = '';

                                          this.style.opacity = 0;

                                          return 0;

                                   }

                                   if (this.filters) {

                                          /* ==== IE filter ==== */

                                          if (!this.filters.alpha) this.style.filter = 'alpha(opacity=' + alpha + ')';

                                          else this.filters.alpha.opacity = alpha;

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

                                   } else this.style.opacity = alpha * .01;

                                   return alpha;

                            }

                            s.img.src = id('loading').src;

                            s.appendChild(s.img);

                            this.scr.appendChild(s);

 

                            /* ==== pre-load image ==== */

                            s.pre = new Image();

                            s.pre.obj = s;

                            s.pre.onload = function() { this.obj.img.src = this.src; }

                            s.pre.src = path + images[k][0];

 

                            /* ==== set image variables ==== */

                            s.x  = x;

                            s.y  = y;

                            s.x0 = x * (this.nw / this.NX) + (this.nw / this.NX) / 2;

                            s.y0 = y * (this.nh / this.NY) + (this.nh / this.NY) / 2;;

                            s.x1 = x * (this.nw / this.NX);

                            s.y1 = y * (this.nh / this.NY);

                            s.w0 = 0;

                            s.h0 = 0;

                            s.w1 = 0;

                            s.h1 = 0;

                            s.V  = 0;

                            s.t  = images[k][1];

                            s.T  = false;

 

                            /* ==== function move image ==== */

                            s.move = function() {

                                   /* ==== position images ==== */

                                   this.style.left   = px(this.x0 += (this.x1 - this.x0) * diap.SP);

                                   this.style.top    = px(this.y0 += (this.y1 - this.y0) * diap.SP);

                                   this.style.width  = px(this.w0 += (this.w1 - this.w0) * diap.SP);

                                   this.style.height = px(this.h0 += (this.h1 - this.h0) * diap.SP);

                                   if (this != diap.S) {

                                          /* ==== set image background color ==== */

                                          if (Math.abs(this.w1 - this.w0) > 1) {

                                                 var c = (!diap.G && this.V > 0) ? 255 : 16 + Math.round(255 - diap.rc * (this.w0 - diap.nwt));

                                                 this.style.background = 'RGB('.concat(c, ',', c, ',', c, ')');

                                          }

                                          if (this == diap.V) {

                                                 /* ==== on mouseover: fade in ==== */

                                                 if (this.V < 100) this.img.setOpacity(this.V += 5);

                                          } else {

                                                 /* ==== fade out ==== */

                                                 if (this.V >= 0 && diap.G != this) this.img.setOpacity(this.V -= 2);

                                          }

                                   }

                                   /* ==== text effect ==== */

                                   if (this.T) this.dispLabel();

                            }

 

                            /* ==== display text function (typewriter FX) ==== */

                            s.dispLabel = function() {

                                   if (diap.G || diap.S == this) {

                                          /* ==== zoomed image ==== */

                                          this.T.style.left  = px(this.x0);

                                          this.T.style.top   = px(this.y0);

                                          this.T.style.width = px(this.w0);

                                   } else {

                                          /* ==== calculate text position ==== */

                                          var xt = diap.S.x0 + this.w0 + diap.BR;

                                          if (this.y == diap.Y) {

                                                 this.T.style.top = px(this.y0 - this.f - diap.BR);

                                                 if (this.y == 0) var xt = diap.S.x0;

                                          } else this.T.style.top = px(this.y0 - (this.y <= diap.Y ? diap.BR : 0));

                                          if (this.x > diap.X) this.T.style.left = px(diap.S.w0 + diap.S.x0 - diap.nwu * .5);

                                          else this.T.style.left = px(xt);

                                          if (this != diap.V) {

                                                 /* ==== text type out ==== */

                                                 this.Tp--;

                                                 this.T.innerHTML = this.t.substring(0, this.Tp);

                                                 if (this.Tp < 1) {

                                                        diap.scr.removeChild(this.T);

                                                        this.T = false;

                                                 }

                                          } else {

                                                 if (this.Tp < this.t.length) {

                                                        /* ==== text type in ==== */

                                                        this.Tp++;

                                                        this.T.innerHTML = this.t.substring(0, this.Tp);

                                                 }

                                          }

                                   }

                            }

 

                            /* ==== create text function ==== */

                            s.createLabel = function () {

                                   this.T = document.createElement('div');

                                   this.T.className = 'label';

                                   if (!diap.G && this.x > diap.X) this.T.style.textAlign = 'right';

                                   this.f = 4 + Math.round(Math.sqrt(diap.nht * 2));

                                   if(this == diap.S) {

                                          this.f *= 2;

                                          this.T.style.background = 'none';

                                          this.T.style.textAlign = 'center';

                                   }

                                   this.T.style.fontSize = ''.concat(this.f, 'px');

                                   this.T.innerHTML   = this.t;

                                   this.T.style.left = px(-1000);

                                   this.T.style.width = px(diap.nwu * .5);

                                   this.T.style.height = px(this.f + 3);

                                   this.Tp = 0;

                                   diap.scr.appendChild(this.T);

                            }

 

                            /* ==== on mouse over event ==== */

                            s.onmouseover = function() {

                                   if (diap.S != this && diap.G != this) {

                                          /* ==== display image ==== */

                                          this.img.setOpacity(100);

                                          this.V = this.img.setOpacity(20);

                                   }

                                   /* ==== create text ==== */

                                   if (!this.T) this.createLabel();

                                   diap.V = this;

                            }

 

                            /* ==== on click event ==== */

                            s.onclick = function() {

                                   /* ==== memorize selected image ==== */

                                   diap.X = this.x;

                                   diap.Y = this.y;

                                   diap.V = false;

                                   diap.G = false;

                                   this.V = this.img.setOpacity(100);

                                   diap.delLabels();

                                   if (diap.S == this) {

                                          /* ==== zoom out - grid mode on ==== */

                                          diap.S = false;

                                          diap.G = this;

                                          for (var i = 0; i < diap.N; i++) diap.spa[i].createLabel();

                                   } else {

                                          /* ==== zoom in ==== */

                                          diap.S = this;

                                          this.createLabel();

                                   }

                                   diap.setPosition();

                            }

                            s.createLabel();

                            s.ondblclick = s.onclick;

                            s.ondrag = function () { return false; }

                            k++;

                     }

              }

              this.N = NX * NY;

              /* ==== add resize event ==== */

              this.resize();

              addEvent(window, 'resize', diap.resize);

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

              this.run();

       }

}

 

/* ==== create diaporama ==== */

onload = function () {

       /* ==== container, X, T, path, [image.src, text] ==== */

       diap.init("screen", 4, 4, "", [

              ["sto/1001.jpg", "His little voodoo was a success"],

              ["sto/1002.jpg", "She arrived from nowhere"],

              ["sto/1003.jpg", "as cute as she could be"],

              ["sto/1004.jpg", "It was a night of full moon"],

              ["sto/1005.jpg", "It didn't take him anytime to fall in love"],

              ["sto/1006.jpg", "He had been certain of his success"],

              ["sto/1005.jpg", "In a few days after"],

              ["sto/1004.jpg", "All the tools were in place"],

              ["sto/1003.jpg", "The girl left a note..."],

              ["sto/1001.jpg", "...saying she had left home"],

              ["sto/001.jpg", "o what with the panic??"],

              ["sto/002.jpg", "Tears for fears"],

              ["sto/003.jpg", "A light in the dark"],

              ["sto/004.jpg", "Flashes of pain and hope"],

              ["sto/0051.jpg", "If only we could capture..."],

              ["sto/006.jpg", "...the beauty of autumn"]

       ]);

}

</script>

</head>

 

<body>

 

<div id="screen">

</div>

<img id="loading" alt="" src="or11.jpg" style="visibility: hidden">

 

</body>

 

</html>

 

0 Comments

Sat

28

Feb

2009

215、精美图片展示 代码

215、精美图片展示  代码

<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: #222;

              position: absolute;

              width: 100%;

              height: 100%;

       }

       #screen {

              position:absolute;

              left: 0%;

              top: 0%;

              width: 100%;

              height: 100%;

              background: #000;

              overflow: hidden;

       }

       #pan {

              position: absolute;

              height: 150%;

              width: 150%;

              padding: 5%;

              background: #000000 url("sto/8bumps2.gif");

       }

       #screen .frame {

              position: relative;

              float: left;

              width: 29%;

              height: 27%;

              margin: 2%;

              background: #000;

              overflow: hidden;

       }

       #screen .slider {

              position: absolute;

              width: 100%;

              height: 100%;

              background: #222 url("sto/8bumps3.gif");

              z-index: 1000;

       }

       #pan img {

              position: absolute;

              visibility: hidden;

       }

       #pan .legend {

              position: absolute;

              bottom: 0px;

              font-size: 1em;

              color: #FFF;

              width: 2000px;

              font-family: arial;

              font-weight: bold;

       }

</style>

<script type="text/javascript">

var xm = 0;

var ym = 0;

 

sP = {

       cx : 0,

       cy : 0,

       N  : 0,

       R  : [],

       I  : [],

       C  : [],

       L  : [],

       Id : 0,

 

       init : function ()

       {

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

              this.scr = document.getElementById('screen');

              this.pan = document.getElementById('pan');

              this.div = this.pan.getElementsByTagName('div');

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

              this.scr.ondrag        = function () { return false; }

              /* ==== for each pane ==== */

              for (var i = 0, o; o = this.div[i]; i++)

              {

                     if (o.className == 'frame')

                     {

                            /* ==== create legend ==== */

                            o.l = document.createElement('div');

                            o.l.className = 'legend';

                            o.appendChild(o.l);

                            /* ==== create flap ==== */

                            o.r = document.createElement('div');

                            o.r.className = 'slider';

                            o.appendChild(o.r);

                            o.r.x = 0;

                            o.r.l = o.l;

                            o.r.p = 0;

                            o.r.s = 2;

                            o.r.m = false;

                            o.img = o.r.img = o.getElementsByTagName('img')[0];

                            o.r.c = Math.random() * 100;

                            o.r.o = o;

                            sP.R[sP.N] = o.r;

                            sP.I[sP.N] = o.img.src;

                            sP.L[sP.N] = o.title;

                            o.title = "";

                            sP.N++;

                            /* ==== flap mouse over event ==== */

                            o.r.onmouseover = function ()

                            {

                                   if (!this.m && this.img.complete)

                                   {

                                          /* ==== switch image ==== */

                                          if (sP.O != this && !this.n)

                                          {

                                                 this.x = this.o.offsetWidth;

                                                 this.l.innerHTML = sP.L[sP.Id];

                                                 this.img.src = sP.I[sP.Id];

                                                 this.resize();

                                                 this.n = true;

                                                 if(++sP.Id >= sP.N)

                                                 {

                                                        sP.Id = 0;

                                                        for (var i = 0, o; o = sP.R[i]; i++) o.n = false;

                                                 }

                                          }

                                          /* ==== up++ ==== */

                                          if (sP.O)

                                          {

                                                 sP.O.s = 2;

                                                 sP.C.push(sP.O);

                                          }

                                          this.m = true;

                                          sP.O = this;

                                          sP.Or = this;

                                   }

                            }

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

                            o.r.resize = function ()

                            {

                                   var i = new Image();

                                   i.src = this.img.src;

                                   this.img.style.width  = (i.width  < this.offsetWidth) ? Math.round(this.offsetWidth  * 1.25) + 'px' : Math.round(i.width) + 'px';

                                   this.img.style.height = (i.height < this.offsetHeight) ? Math.round(this.offsetHeight * 1.25) + 'px' : Math.round(i.height) + 'px';

                                   this.w = (this.img.offsetWidth  - this.offsetWidth)  * .5;

                                   this.h = (this.img.offsetHeight - this.offsetHeight) * .5;

                                   this.img.style.visibility = 'visible';

                            }

                     }

              }

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

              sP.resize();

              sP.run();

       },

 

       resize : function () {

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

              var o = sP.scr;

              sP.nw = o.offsetWidth;

              sP.nh = o.offsetHeight;

              sP.iw = sP.pan.offsetWidth;

              sP.ih = sP.pan.offsetHeight;

              for (sP.nx = 0, sP.ny = 0; o != null; o = o.offsetParent)

              {

                     sP.nx += o.offsetLeft;

                     sP.ny += o.offsetTop;

              }

              for (var i = 0, o; o = sP.R[i]; i++) o.resize();

       },

 

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

       run : function ()

       {

              /* ==== scroll main frame ==== */

              sP.cx += (((Math.max(-sP.nw, Math.min(0, (sP.nw * .5 - (xm - sP.nx) * 2))) * (sP.iw - sP.nw)) / sP.nw) - sP.cx) * .1;

              sP.cy += (((Math.max(-sP.nh, Math.min(0, (sP.nh * .5 - (ym - sP.ny) * 2))) * (sP.ih - sP.nh)) / sP.nh) - sP.cy) * .1;

              sP.pan.style.left = Math.round(sP.cx) + 'px';

              sP.pan.style.top  = Math.round(sP.cy) + 'px';

              /* ==== lissajou ==== */

              if(sP.O) {

                     sP.O.c += .015;

                     sP.O.img.style.left = Math.round(-sP.O.w + sP.O.w * Math.sin(sP.O.c * 1.1)) + 'px';

                     sP.O.img.style.top  = Math.round(- sP.O.h + sP.O.h * Math.sin(sP.O.c)) + 'px';

                     sP.O.l.style.left = Math.round(sP.O.x--) + 'px';

              }

              /* ==== up ==== */

              if (sP.Or)

              {

                     sP.Or.p -= sP.Or.s;

                     sP.Or.s *= 1.1;

                     if (sP.Or.p < -sP.Or.offsetHeight)

                     {

                            sP.Or.p = -sP.Or.offsetHeight;

                            sP.Or.s = 2;

                            sP.Or.m = false;

                            sP.Or = false;

                     }

                     sP.O.style.top = Math.round(sP.O.p) + 'px';

              }

              /* ==== down ==== */

              for (var i = 0, c; c = sP.C[i]; i++)

              {

                     if (c != sP.Or)

                     {

                            c.p += c.s;

                            c.s *= 1.2;

                            if (c.p >= 0)

                            {

                                   c.p = 0;

                                   c.s = 2;

                                   c.m = false;

                                   sP.C.splice(i, 1);

                            }

                            c.style.top = Math.round(c.p) + 'px';

                     } else {

                            c.s = 2;

                            c.m = false;

                            sP.C.splice(i, 1);

                     }

              }

              setTimeout(sP.run, 16);

       }

}

 

/* ==== global mouse position ==== */

document.onmousemove = function(e)

{

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

       xm = e.clientX;

       ym = e.clientY;

       return false;

}

</script>

</head>

 

<body>

 

<div id="screen">

       <div id="pan">

              <div class="frame" title="Isolating the longer dimension of the main hall">

                     <img src="sto/1001.jpg" alt=""></div>

              <div class="frame" title="?We’ll start from here?, my partner said.">

                     <img src="sto/1002.jpg" alt=""></div>

              <div class="frame" title="As we proceeded, I recalled a similar situation">

                     <img src="sto/1003.jpg" alt=""></div>

              <div class="frame" title="The place was no example of resource efficient construction.">

                     <img src="sto/1004.jpg" alt=""></div>

              <div class="frame" title="Ultracompaction had been caused by the linear vibrator.">

                     <img src="sto/1005.jpg" alt=""></div>

              <div class="frame" title="We put the meter to use. It was the fully-built one.">

                     <img src="sto/1006.jpg" alt=""></div>

              <div class="frame" title="Soon we accessed the restricted area.">

                     <img src="sto/1001.jpg" alt=""></div>

              <div class="frame" title="The combo password was validated.">

                     <img src="sto/1002.jpg" alt=""></div>

              <div class="frame" title="We succeeded to quantify the network.">

                     <img src="sto/1003.jpg" alt=""></div>

       </div>

</div>

<script type="text/javascript">

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

       sP.init();

       onresize = sP.resize;

</script>

 

</body>

 

</html>

 

0 Comments

Sat

28

Feb

2009

214、图片展示代码 代码

214、图片展示代码  代码

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

              position: absolute;

              margin: 0px;

              padding: 0px;

              background: #111;

              width: 100%;

              height: 100%;

       }

       #center {

              position: absolute;

              left: 50%;

              top:  50%;

       }

       #slider {

              position: absolute;

              width: 820px;

              height: 333px;

              left: -430px;

              top: -186px;

              overflow: hidden;

              background: #000;

              border: 20px solid #000;

       }

       #slider .slide {

              position: absolute;

              top: 0px;

              height: 333px;

              width: 500px;

              background: #000;

              overflow: hidden;

              border-left: #000 solid 1px;

              cursor: default;

       }

       #slider .title   {

              color: #F80;

              font-weight: bold;

              font-size: 1.2em;

              margin-right: 1.5em;

              text-decoration: none;

       }

       #slider .backgroundText {

              position: absolute;

              width: 100%;

              height: 100%;

              top: 100%;

              background: #000;

              filter: alpha(opacity=40);

              opacity: 0.4;

       }

       #slider .text {

              position: absolute;

              top: 1%;

              top: 100%;

              color: #FFF;

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

              font-size: 0.9em;

              text-align: justify;

              width: 470px;

              left: 10px;

       }

       #slider .diapo {

              position: absolute;

              filter: alpha(opacity=100);

              opacity: 1;

              visibility: hidden;

       }

</style>

<script type="text/javascript">

/* ==== slider nameSpace ==== */

var slider = function() {

       /* ==== private methods ==== */

       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 setOpacity (obj,o) {

              if (obj.filters) obj.filters.alpha.opacity = Math.round(o);

              else obj.style.opacity = o / 100;

       }

       /* ==== Slider Constructor ==== */

       function Slider(oCont, speed, iW, iH, oP) {

              this.slides = [];

              this.over   = false;

              this.S      = this.S0 = speed;

              this.iW     = iW;

              this.iH     = iH;

              this.oP     = oP;

              this.oc     = document.getElementById(oCont);

              this.frm    = getElementsByClass(this.oc, 'div', 'slide');

              this.NF     = this.frm.length;

              this.resize();

              for (var i = 0; i < this.NF; i++) {

                     this.slides[i] = new Slide(this, i);

              }

              this.oc.parent = this;

              this.view      = this.slides[0];

              this.Z         = this.mx;

              /* ==== on mouse out event ==== */

              this.oc.onmouseout = function () {

                     this.parent.mouseout();

                     return false;

              }

       }

       Slider.prototype = {

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

              run : function () {

                     this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5;

                     this.view.calc();

                     var i = this.NF;

                     while (i--) this.slides[i].move();

              },

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

              resize : function () {

                     this.wh = this.oc.clientWidth;

                     this.ht = this.oc.clientHeight;

                     this.wr = this.wh * this.iW;

                     this.r  = this.ht / this.wr;

                     this.mx = this.wh / this.NF;

                     this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1);

              },

              /* ==== rest  ==== */

              mouseout : function () {

                     this.over      = false;

                     setOpacity(this.view.img, this.oP);

              }

       }

       /* ==== Slide Constructor ==== */

       Slide = function (parent, N) {

              this.parent = parent;

              this.N      = N;

              this.x0     = this.x1 = N * parent.mx;

              this.v      = 0;

              this.loaded = false;

              this.cpt    = 0;

              this.start  = new Date();

              this.obj    = parent.frm[N];

              this.txt    = getElementsByClass(this.obj, 'div', 'text');

              this.img    = getElementsByClass(this.obj, 'img', 'diapo');

              this.bkg    = document.createElement('div');

              this.bkg.className = 'backgroundText';

              this.obj.insertBefore(this.bkg, this.txt);

              if (N == 0) this.obj.style.borderLeft = 'none';

              this.obj.style.left = Math.floor(this.x0) + 'px';

              setOpacity(this.img, parent.oP);

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

              this.obj.parent = this;

              this.obj.onmouseover = function() {

                     this.parent.over();

                     return false;

              }

       }

       Slide.prototype = {

              /* ==== target positions ==== */

              calc : function() {

                     var that = this.parent;

                     // left slides

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

                            that.slides[i].x1 = i * that.Z;

                     }

                     // right slides

                     for (var i = this.N + 1; i < that.NF; i++) {

                            that.slides[i].x1 = that.wh - (that.NF - i) * that.Z;

                     }

              },

              /* ==== HTML animation : move slides ==== */

              move : function() {

                     var that = this.parent;

                     var s = (this.x1 - this.x0) / that.S;

                     /* ==== lateral slide ==== */

                     if (this.N && Math.abs(s) > .5) {

                            this.obj.style.left = Math.floor(this.x0 += s) + 'px';

                     }

                     /* ==== vertical text ==== */

                     var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0;

                     if (Math.abs(v - this.v) > .5) {

                            this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px';

                            this.v = v;

                            this.cpt++;

                     } else {

                            if (!this.pro) {

                                   /* ==== adjust speed ==== */

                                   this.pro = true;

                                   var tps = new Date() - this.start;

                                   if(this.cpt > 1) {

                                          that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0);

                                   }

                            }

                     }

                     if (!this.loaded) {

                            if (this.img.complete) {

                                   this.img.style.visibility = 'visible';

                                   this.loaded = true;

                            }

                     }

              },

              /* ==== light ==== */

              over : function () {

                     this.parent.resize();

                     this.parent.over = true;

                     setOpacity(this.parent.view.img, this.parent.oP);

                     this.parent.view = this;

                     this.start = new Date();

                     this.cpt = 0;

                     this.pro = false;

                     this.calc();

                     setOpacity(this.img, 100);

              }

       }

       /* ==== public method - script initialization ==== */

       return {

              init : function() {

                     // create instances of sliders here

                     // parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity

                     this.s1 = new Slider("slider", 12, 1.84/3, 1/3.2, 70);

                     setInterval("slider.s1.run();", 16);

              }

       }

}();

 

</script>

</head>

 

<body>

 

<div id="center">

       <div id="slider">

              <div class="slide">

                     <img class="diapo" src="sto/1001.jpg" alt="">

                     <div class="text">

                            <span class="title">The best</span> The offspring of a customized

                            orbiter, Oostem arose as the best balanced home for our plans.

                            So we submitted to its conditions. </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/1002.jpg" alt="">

                     <div class="text">

                            <span class="title">Prototype</span> Oostem's deep impulse flow

                            is selectively regulated by a molecule originated in the prototype

                            model, that creates its own variational principles, as oriented

                            by the first local generation of terminable androids. </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/1003.jpg" alt="">

                     <div class="text">

                            <span class="title">Has been reduced</span> Paired hosts come out

                            nicely after only two cycles now. Their size has been reduced to

                            a half the original as planned, and indeed they show an evolutionary

                            advantage in the process of fixing self-generated instructions.

                            Plus, they are beautiful. </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/1004.jpg" alt="">

                     <div class="text">

                            <span class="title">By close-alikes</span> Now I have regained hopes

                            in someday finding myself surrounded by close-alikes to us. However,

                            they will not be audible, at least not in my life span. We resolved

                            the low freq vibration a superior solution for our communicational

                            goals ... </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/1005.jpg" alt="">

                     <div class="text">

                            <span class="title">To bear</span> We did not expect their surface

                            to produce such a carbon powder coat, though this is the best model

                            so far. I shall have to bear with the inconveniences. They seem

                            to establish a parallel communication through that carbon coat and

                            I find myself unable to decodify the signal into anything meaningful.

                     </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/1001.jpg" alt="">

                     <div class="text">

                            <span class="title">The zero level</span> Today a set of vibration

                            came up from the zero level; we expect to launch the transitional

                            program in no longer than five basetime units. Psykesoma? galore

                            and we'll betray our very nature into infinite, unending 2D surfaces.

                            We do need that vibration, and we will conquer its source. </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/1006.jpg" alt="">

                     <div class="text">

                            <span class="title">Beautifully</span> To keep my sanity I wear

                            the tactile sensors all the time. They translate beautifully; I

                            can even see distances while still on Psykesoma. This was quite

                            a discovery. We have grown more adaptable than expected. </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/003.jpg" alt="">

                     <div class="text">

                            <span class="title">Uneasy to match</span> Yewoona had to travel

                            farther and longer than I did. Her base orbiter was set to keep

                            a complex combinational path that made it uneasy to match our circuits.

                            But her nature showed stronger than programmed. </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/002.jpg" alt="">

                     <div class="text">

                            <span class="title">Adapted to serve</span> Keep feeding them. We

                            will never be this lucky again; an autogenerated species adapted

                            to serve all our needs! </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/001.jpg" alt="">

                     <div class="text">

                            <a class="title" href="http://www.7stk.com">At soonest</a>

                            "Blood is dark red, iron dark blue, this tale is blissful and so

                            are you". I should get to the hotel at soonest. The agency guy must

                            be there already, with some luck we'll have some nice dinner on

                            him. How's that? </div>

              </div>

       </div>

</div>

<script type="text/javascript">

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

slider.init();

</script>

 

</body>

 

</html>

 

0 Comments

Sat

28

Feb

2009

213、图片展示代码 代码

213、图片展示代码  代码

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

              position: absolute;

              margin: 0px;

              padding: 0px;

              background: #111;

              width: 100%;

              height: 100%;

       }

       #center {

              position: absolute;

              left: 50%;

              top:  50%;

       }

       #slider {

              position: absolute;

              width: 820px;

              height: 333px;

              left: -430px;

              top: -186px;

              overflow: hidden;

              background: #000;

              border: 20px solid #000;

       }

       #slider .slide {

              position: absolute;

              top: 0px;

              height: 333px;

              width: 500px;

              background: #000;

              overflow: hidden;

              border-left: #000 solid 1px;

              cursor: default;

       }

       #slider .title   {

              color: #F80;

              font-weight: bold;

              font-size: 1.2em;

              margin-right: 1.5em;

              text-decoration: none;

       }

       #slider .backgroundText {

              position: absolute;

              width: 100%;

              height: 100%;

              top: 100%;

              background: #000;

              filter: alpha(opacity=40);

              opacity: 0.4;

       }

       #slider .text {

              position: absolute;

              top: 1%;

              top: 100%;

              color: #FFF;

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

              font-size: 0.9em;

              text-align: justify;

              width: 470px;

              left: 10px;

       }

       #slider .diapo {

              position: absolute;

              filter: alpha(opacity=100);

              opacity: 1;

              visibility: hidden;

       }

</style>

<script type="text/javascript">

/* ==== slider nameSpace ==== */

var slider = function() {

       /* ==== private methods ==== */

       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 setOpacity (obj,o) {

              if (obj.filters) obj.filters.alpha.opacity = Math.round(o);

              else obj.style.opacity = o / 100;

       }

       /* ==== Slider Constructor ==== */

       function Slider(oCont, speed, iW, iH, oP) {

              this.slides = [];

              this.over   = false;

              this.S      = this.S0 = speed;

              this.iW     = iW;

              this.iH     = iH;

              this.oP     = oP;

              this.oc     = document.getElementById(oCont);

              this.frm    = getElementsByClass(this.oc, 'div', 'slide');

              this.NF     = this.frm.length;

              this.resize();

              for (var i = 0; i < this.NF; i++) {

                     this.slides[i] = new Slide(this, i);

              }

              this.oc.parent = this;

              this.view      = this.slides[0];

              this.Z         = this.mx;

              /* ==== on mouse out event ==== */

              this.oc.onmouseout = function () {

                     this.parent.mouseout();

                     return false;

              }

       }

       Slider.prototype = {

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

              run : function () {

                     this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5;

                     this.view.calc();

                     var i = this.NF;

                     while (i--) this.slides[i].move();

              },

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

              resize : function () {

                     this.wh = this.oc.clientWidth;

                     this.ht = this.oc.clientHeight;

                     this.wr = this.wh * this.iW;

                     this.r  = this.ht / this.wr;

                     this.mx = this.wh / this.NF;

                     this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1);

              },

              /* ==== rest  ==== */

              mouseout : function () {

                     this.over      = false;

                     setOpacity(this.view.img, this.oP);

              }

       }

       /* ==== Slide Constructor ==== */

       Slide = function (parent, N) {

              this.parent = parent;

              this.N      = N;

              this.x0     = this.x1 = N * parent.mx;

              this.v      = 0;

              this.loaded = false;

              this.cpt    = 0;

              this.start  = new Date();

              this.obj    = parent.frm[N];

              this.txt    = getElementsByClass(this.obj, 'div', 'text');

              this.img    = getElementsByClass(this.obj, 'img', 'diapo');

              this.bkg    = document.createElement('div');

              this.bkg.className = 'backgroundText';

              this.obj.insertBefore(this.bkg, this.txt);

              if (N == 0) this.obj.style.borderLeft = 'none';

              this.obj.style.left = Math.floor(this.x0) + 'px';

              setOpacity(this.img, parent.oP);

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

              this.obj.parent = this;

              this.obj.onmouseover = function() {

                     this.parent.over();

                     return false;

              }

       }

       Slide.prototype = {

              /* ==== target positions ==== */

              calc : function() {

                     var that = this.parent;

                     // left slides

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

                            that.slides[i].x1 = i * that.Z;

                     }

                     // right slides

                     for (var i = this.N + 1; i < that.NF; i++) {

                            that.slides[i].x1 = that.wh - (that.NF - i) * that.Z;

                     }

              },

              /* ==== HTML animation : move slides ==== */

              move : function() {

                     var that = this.parent;

                     var s = (this.x1 - this.x0) / that.S;

                     /* ==== lateral slide ==== */

                     if (this.N && Math.abs(s) > .5) {

                            this.obj.style.left = Math.floor(this.x0 += s) + 'px';

                     }

                     /* ==== vertical text ==== */

                     var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0;

                     if (Math.abs(v - this.v) > .5) {

                            this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px';

                            this.v = v;

                            this.cpt++;

                     } else {

                            if (!this.pro) {

                                   /* ==== adjust speed ==== */

                                   this.pro = true;

                                   var tps = new Date() - this.start;

                                   if(this.cpt > 1) {

                                          that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0);

                                   }

                            }

                     }

                     if (!this.loaded) {

                            if (this.img.complete) {

                                   this.img.style.visibility = 'visible';

                                   this.loaded = true;

                            }

                     }

              },

              /* ==== light ==== */

              over : function () {

                     this.parent.resize();

                     this.parent.over = true;

                     setOpacity(this.parent.view.img, this.parent.oP);

                     this.parent.view = this;

                     this.start = new Date();

                     this.cpt = 0;

                     this.pro = false;

                     this.calc();

                     setOpacity(this.img, 100);

              }

       }

       /* ==== public method - script initialization ==== */

       return {

              init : function() {

                     // create instances of sliders here

                     // parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity

                     this.s1 = new Slider("slider", 12, 1.84/3, 1/3.2, 70);

                     setInterval("slider.s1.run();", 16);

              }

       }

}();

 

</script>

</head>

 

<body>

 

<div id="center">

       <div id="slider">

              <div class="slide">

                     <img class="diapo" src="sto/1001.jpg" alt="">

                     <div class="text">

                            <span class="title">The best</span> The offspring of a customized

                            orbiter, Oostem arose as the best balanced home for our plans.

                            So we submitted to its conditions. </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/1002.jpg" alt="">

                     <div class="text">

                            <span class="title">Prototype</span> Oostem's deep impulse flow

                            is selectively regulated by a molecule originated in the prototype

                            model, that creates its own variational principles, as oriented

                            by the first local generation of terminable androids. </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/1003.jpg" alt="">

                     <div class="text">

                            <span class="title">Has been reduced</span> Paired hosts come out

                            nicely after only two cycles now. Their size has been reduced to

                            a half the original as planned, and indeed they show an evolutionary

                            advantage in the process of fixing self-generated instructions.

                            Plus, they are beautiful. </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/1004.jpg" alt="">

                     <div class="text">

                            <span class="title">By close-alikes</span> Now I have regained hopes

                            in someday finding myself surrounded by close-alikes to us. However,

                            they will not be audible, at least not in my life span. We resolved

                            the low freq vibration a superior solution for our communicational

                            goals ... </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/1005.jpg" alt="">

                     <div class="text">

                            <span class="title">To bear</span> We did not expect their surface

                            to produce such a carbon powder coat, though this is the best model

                            so far. I shall have to bear with the inconveniences. They seem

                            to establish a parallel communication through that carbon coat and

                            I find myself unable to decodify the signal into anything meaningful.

                     </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/1001.jpg" alt="">

                     <div class="text">

                            <span class="title">The zero level</span> Today a set of vibration

                            came up from the zero level; we expect to launch the transitional

                            program in no longer than five basetime units. Psykesoma? galore

                            and we'll betray our very nature into infinite, unending 2D surfaces.

                            We do need that vibration, and we will conquer its source. </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/1006.jpg" alt="">

                     <div class="text">

                            <span class="title">Beautifully</span> To keep my sanity I wear

                            the tactile sensors all the time. They translate beautifully; I

                            can even see distances while still on Psykesoma. This was quite

                            a discovery. We have grown more adaptable than expected. </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/003.jpg" alt="">

                     <div class="text">

                            <span class="title">Uneasy to match</span> Yewoona had to travel

                            farther and longer than I did. Her base orbiter was set to keep

                            a complex combinational path that made it uneasy to match our circuits.

                            But her nature showed stronger than programmed. </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/002.jpg" alt="">

                     <div class="text">

                            <span class="title">Adapted to serve</span> Keep feeding them. We

                            will never be this lucky again; an autogenerated species adapted

                            to serve all our needs! </div>

              </div>

              <div class="slide">

                     <img class="diapo" src="sto/001.jpg" alt="">

                     <div class="text">

                            <a class="title" href="http://www.7stk.com">At soonest</a>

                            "Blood is dark red, iron dark blue, this tale is blissful and so

                            are you". I should get to the hotel at soonest. The agency guy must

                            be there already, with some luck we'll have some nice dinner on

                            him. How's that? </div>

              </div>

       </div>

</div>

<script type="text/javascript">

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

slider.init();

</script>

 

</body>

 

</html>

 

0 Comments

Sat

28

Feb

2009

212、图片展示代码 代码

212、图片展示代码  代码

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

              position: absolute;

              width: 100%;

              height: 100%;

              cursor: crosshair;

       }

       #box {

              position: absolute;

              background: #111;

              border: gray solid 1px;

              visibility: hidden;

       }

       #screen {

              position: absolute;

              left: 0px;

              width: 100%;

              top: 10%;

              height: 80%;

              background: #000;

              border: gray solid 1px;

       }

       #box img  {

              position: absolute;

              border: gray solid 1px;

              cursor: pointer;

       }

       #box span {

              position: absolute;

              color: #ccc;

              font-family: verdana;

              font-size: 12px;

              width: 200px;

       }

       #box a {

              text-decoration: none;

              color:#ff8000;

       }

       #box a:hover   {

              text-decoration: none;

              background:#ff8000;

              color:#ffffff;

       }

       #box a:visited {

              text-decoration: none;

              color:#ff8000;

       }

       #box a:visited:hover {

              text-decoration: none;

              background:#ff8000;

              color:#ffffff;

       }

       #lnk {

              visibility: hidden;

       }

</style>

<script type="text/javascript">

 

document.onselectstart = new Function("return false");

O    = new Array();

box  = 0;

img  = 0;

txt  = 0;

tit  = 0;

W    = 0;

H    = 0;

nI   = 0;

sel  = 0;

si   = 0;

ZOOM = 0;

rImg = 0;

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

speed = .06; // animation speed

delay = .5; // 1 = no delay

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

 

function dText(){

       txt.style.textAlign = tit.style.textAlign = (sel<nI/2)?"left":"right";

       txt.innerHTML = O[sel].tx;

       tit.innerHTML = O[sel].ti;

}

 

function CObj(n, s, x, tx, ti){

       this.n    = n;

       this.dim  = s;

       this.tx   = tx;

       this.ti   = ti;

       this.is   = img[n];

       this.vz   = 0;

       this.sx   = 0;

       this.x0   = x;

       this.x1   = 0;

       this.zo   = 0;

       this.over = function() {

              with(this){

                     if(n!=sel){

                            O[sel].dim = 100;

                            O[n].dim = ZOOM * 100;

                            sel = n;

                            l = 0;

                            for(k=0; k<nI; k++){

                                   O[k].x0 = l;

                                   l += O[k].dim;

                            }

                            txt.innerHTML = tit.innerHTML = "";

                            setTimeout("dText()", 32);

                     }

              }

       }

       this.anim = function () {

              with(this){

                     vz  = speed*(vz+(x1-sx)*delay);

                     x1 -= vz;

                     sx  = (n==0)?0:O[n-1].x0+O[n-1].dim;

                     zo -= (zo-dim)*speed;

                     l   = (x1*si)+6*(n+1);

                     w   = zo*si;

                     is.style.left   = Math.round(l)+'px';

                     is.style.top    = Math.round((H-w*rImg)*.5)+'px';

                     is.style.width  = Math.round(w)+'px';

                     is.style.height = Math.round(w*rImg)+'px';

                     if(sel == n){

                            if(sel<nI*.5) {

                                   tit.style.left = txt.style.left = Math.round(l+w+6)+'px';

                            } else {

                                   tit.style.left = txt.style.left = Math.round(l-(nx*.25)-6)+'px';

                            }

                            txt.style.top = Math.round(-(w*rImg)*.25)+'px';

                            tit.style.top = Math.round((w*rImg)*.33)+'px';

                     }

              }

       }

}

 

function run(){

       for(j in O)O[j].anim();

       setTimeout("run()", 16);

}

 

function doResize(){

       tit.style.width = Math.round(nx*.25)+'px';

       txt.style.width = Math.round(nx*.25)+'px';

       tit.style.fontSize = (nx/30)+'px';

       txt.style.fontSize = (nx/70)+'px';

       with(box.style){

              width  = Math.round(W)+'px';

              height = Math.round(H)+'px';

              left   = Math.round(nx/2-W/2)+'px';

              top    = Math.round(ny/2-H/2)+'px';

       }

}

 

function resize(){

       nx = scr.offsetWidth;

       ny = scr.offsetHeight;

       W  =  nx*90/100;

       si = (W-((nI+1)*6))/((ZOOM*100)+((nI-1)*100));

       H  = (100*si*rImg)+14;

       doResize();

}

onresize = resize;

 

onload = function(){

       scr = document.getElementById("screen");

       box = document.getElementById("box");

       tit = document.getElementById("tit");

       txt = document.getElementById("txt");

       img = box.getElementsByTagName("img");

 

       Lnk = document.getElementById("lnk").getElementsByTagName("a");

       nI  = img.length;

       ZOOM = nI;

       rImg = img[0].height/img[0].width;

       resize();

       s = ZOOM * 100;

       x = 0;

       tit.innerHTML = img[0].title;

       txt.innerHTML = img[0].alt;

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

              var t = img[i].alt;

              if(Lnk[i].href!="") t+='<br><a href="'+Lnk[i].href+'">'+Lnk[i].innerHTML+'</a>';

              O[i] = new CObj(i, s, x, t, img[i].title);

              img[i].alt = "";

              img[i].title = "";

              img[i].onmousedown = new Function("return false;");

              img[i].onmouseover = new Function('O['+i+'].over();');

              if(Lnk[i].href!=""){

                     /* ==== hyperlink ==== */

                     img[i].onclick = new Function('window.open("'+Lnk[i].href+'","_blank");');

              }

              x += s;

              s = 100;

       }

       box.style.visibility = "visible";

       run();

}

</script>

</head>

 

<body>

 

<div id="screen">

       <div id="box">

              <img src="sto/1001.jpg" title="explain" alt="They explained a little about what they were doing.">

              <img src="sto/1002.jpg" title="strain" alt="I hoped I wouldnt crack under the strain.">

              <img src="sto/1003.jpg" title="retain" alt="Clearly they were ready to do almost anything to retain their position.">

              <img src="sto/1004.jpg" title="mundane" alt="I observed the face of power at its most mundane.">

              <img src="sto/1005.jpg" title="inhumane" alt="But they couldnt hide the very worst of their inhumane undertakings from the people.">

              <img src="sto/1006.jpg" title="disdain" alt="They showed their utter, complete disdain for justice.">

              <img src="sto/001.jpg" title="never again" alt="Never more. Never again.">

              <span id="txt"></span><span id="tit"></span><span id="lnk">

              <a href="http://www.dhteumeuleu.com">www.dhteumeuleu.com</a> <a></a><a>

              </a><a></a><a></a><a></a><a></a></span></div>

</div>

<!-- crossbrowser images_loading_bar - Gerard Ferrandez - www.dhteumeuleu.com - Feb 2005 -->

<span id="LB0" style="position:absolute;left:50%;top:50%;">

<span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50px;top:-18px">

Loading...</span>

<span style="position:absolute;left:-50px;top:-5px;font-size:1px;width:100px;height:10px;background:#333">

<span id="LB1" style="position:absolute;left:0px;top:0px;font-size:1px;width:0px;height:10px;background:#FFFFFF">

</span></span></span>

<script>m00=document.getElementById("box").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100)+'px';if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script>

<!-- end of images_loading_bar code -->

 

</body>

 

</html>

 

0 Comments

Sat

28

Feb

2009

211、展示效果代码 代码

211、展示效果代码  代码

<!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">

       body {

              background: #222;

              overflow: hidden;

              left: 0;

              top: 0;

              width: 100%;

              height: 100%;

              margin: 0;

              padding: 0;

       }

 

       #screen img {

              position: absolute;

              visibility: hidden;

       }

 

       #screen span {

              position: absolute;

              background: #fff;

              cursor: pointer;

              visibility: hidden;

              filter: alpha(opacity=80);

              -moz-opacity: 0.8;

              opacity: 0.8;

       }

</style>

<script type="text/javascript"><!--

var Oz, Ov;

var obj = [];

var K = 0;

var img, scr, W, H;

var SP = 40; /* speed */

var dz = false;

 

/* html positioning */

position = function(obj, x, y, w, h)

{

       with(obj.style){

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

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

              width = Math.round(w) + "px";

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

       }

}

 

/* create object instances */

function Cobj(parent, N, x, y, w, h)

{

       this.zoomed = (parent ? 0 : 1);

       obj[K] = this;

       this.K = K ++;

       this.parent = parent;

       this.children = [];

       this.x = x;

       this.y = y;

       this.w = w;

       this.h = h;

       this.vx = 0;

       this.vy = 0;

       this.vw = 0;

       this.vh = 0;

       this.xi = 0;

       this.yi = 0;

       this.wi = 0;

       this.hi = 0;

       this.x1 = 0;

       this.y1 = 0;

       this.w1 = 0;

       this.h1 = 0;

       this.x0 = 0;

       this.y0 = 0;

       this.w0 = 0;

       this.h0 = 0;

       this.imgsrc = img[N];

 

       /* create HTML elements */

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

       this.img.src = this.imgsrc.src;

       this.img.obj = this;

       scr.appendChild(this.img);

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

       this.spa.style.cursor = "pointer";

       this.spa.obj = this;

       scr.appendChild(this.spa);

       if (parent) parent.children.push(this);

 

       /* Flickr */

       this.blink = function()

       {

              with(this)

              {

                     position(spa, x0, y0, w0, h0);

                     spa.style.visibility = "visible";

                     img.style.cursor = "pointer";

                     setTimeout("obj[" + K + "].spa.style.visibility='hidden'", 128);

              }

       }

 

       /* display image & children */

       this.display = function(zoomed)

       {

              with(this)

              {

                     position(img, x0, y0, w0, h0);

                     img.style.visibility = "visible";

                     if (parent &&  ! zoomed)

                     {

                            blink();

                            Ov = img;

                     }

              }

       }

 

       /* init zoom */

       this.init_zoom = function(d)

       {

              with(this)

              {

                     w1 = imgsrc.width;

                     h1 = imgsrc.height;

                     x1 = (W - w1) / 2;

                     y1 = (H - h1) / 2;

                     x0 = (parent ? x + parent.x1 : (W - w1) / 2);

                     y0 = (parent ? y + parent.y1 : (H - h1) / 2);

                     w0 = (parent ? w : w1);

                     h0 = (parent ? h : h1);

                     xi = d > 0 ? x0 : x1;

                     yi = d > 0 ? y0 : y1;

                     wi = d > 0 ? w0 : w1;

                     hi = d > 0 ? h0 : h1;

                     vx = d * (x1 - x0) / SP;

                     vy = d * (y1 - y0) / SP;

                     vw = d * (w1 - w0) / SP;

                     vh = d * (h1 - h0) / SP;

                     parent.vx = d * ((x1 - (x * w1 / w0)) - parent.x1) / SP;

                     parent.vy = d * ((y1 - (y * h1 / h0)) - parent.y1) / SP;

                     parent.vw = vw * (parent ? (parent.w1 / w) : 0);

                     parent.vh = vh * (parent ? (parent.h1 / h) : 0);

              }

       }

 

       /* animate zoom in - out */

       this.zoom = function()

       {

              with(this)

              {

                     xi += vx;

                     yi += vy;

                     wi += vw;

                     hi += vh;

 

                     parent.xi += parent.vx;

                     parent.yi += parent.vy;

                     parent.wi += parent.vw;

                     parent.hi += parent.vh;

 

                     position(img, xi, yi, wi, hi);

                     position(parent.img, parent.xi, parent.yi, parent.wi, parent.hi);

 

                     if ((zoomed == 0 && wi > w0 - vw) || (zoomed == 1 && wi < w1 - vw))

                     {

                            setTimeout("obj[" + K + "].zoom()", 16);

                     }

                     else

                     {

                            dz = false;

                            for (var i in Oz.children)

                            {

                                   Oz.children[i].init_zoom();

                                   Oz.children[i].display(false, false);

                            }

                     }

              }

       }

 

       /* mouse events */

       this.img.onmouseover = function()

       {

              if (this != Ov) with(this.obj) if (parent &&  ! zoomed &&  ! dz) blink();

              Ov = this;

              return false;

       }

 

       this.img.onclick = function()

       {

              with(this.obj)

              {

                     if (parent && !dz && imgsrc.complete)

                     {

                            if (zoomed == 1)

                            {

                                   /* zoom out */

                                   Oz = this.obj.parent;

                                   zoomed = 0;

                                   init_zoom( -1);

                                   for (var i in children) children[i].img.style.visibility = "hidden";

                                   parent.zoomed = 1;

                                   dz = true;

                                   zoom();

                            }

                            else if (zoomed == 0)

                            {

                                   /* zoom in */

                                   Oz = this.obj;

                                   img.style.cursor = "crosshair";

                                   zoomed = 1;

                                   init_zoom(1);

                                   for (var i in parent.children)

                                   {

                                          if (this.obj != parent.children[i])

                                                 parent.children[i].img.style.visibility = "hidden";

                                   }

                                   parent.zoomed =  -1;

                                   dz = true;

                                   zoom();

                            }

                     }

              }

              return false;

       }

 

       this.spa.onmousedown = function()

       {

              this.style.visibility="hidden";

              this.obj.img.onclick();

              return false;

       }

}

 

/* initialization */

/* must start after the first image is loaded */

function starter()

{

       scr = document.getElementById("screen");

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

       W = parseInt(scr.style.width);

       H = parseInt(scr.style.height);

 

       /* ==== tree-zoom ==== */

       //  new Cobj(parent, image, x, y, w, h)

       O = new Cobj(0, 0, 0, 0, 0, 0);

              O0 = new Cobj(O, 1, 127, 98, 181, 134);

                     O1 = new Cobj(O0, 2, 158, 150, 85, 155);

                            O11 = new Cobj(O1, 4, 136, 98, 80, 196);

                                   O111 = new Cobj(O11, 5, 20, 154, 70, 57);

                                          O1111 = new Cobj(O111, 6, 161, 137, 154, 76);

                                   O112 = new Cobj(O11, 11, 155, 154, 70, 57);

                                          O1121 = new Cobj(O112, 12, 273, 116, 49, 72);

                     O2 = new Cobj(O0, 3, 281, 150, 90, 154);

                            O21 = new Cobj(O2, 7, 35, 295, 133, 82);

                                   O211 = new Cobj(O21, 15, 316, 183, 20, 36);

                            O22 = new Cobj(O2, 8, 179, 295, 127, 79);

                                   O221 = new Cobj(O22, 13, 132, 84, 54, 102);

                                          O2211 = new Cobj(O221, 14, 6, 234, 69, 50);

                                                 O22111 = new Cobj(O2211, 14, 267, 90, 135, 98);

                            O23 = new Cobj(O2, 9, 92, 148, 138, 76);

                                   O231 = new Cobj(O23, 10, 249, 106, 83, 65);

                                          O2311 = new Cobj(O231, 0, 120, 87, 57, 59);

 

       /* display */

       O.init_zoom(1);

       O.display(true);

       for (var i in O.children)

       {

              O.children[i].init_zoom(1);

              O.children[i].display(true);

       }

}

//-->

</script>

</head>

 

<body>

 

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

       <div style="position:absolute;left:-220px;top:-170px;width:440px;height:340px;background:#000">

       </div>

       <div id="screen" style="position:absolute;left:-200px;top:-150px;width:400px;height:300px;overflow:hidden">

       </div>

</div>

<div id="images" style="position:absolute;left:-10000px;top:-10000px;">

       <img onload="setTimeout('starter();',500)" src="sto/1001.jpg">

       <img src="sto/1001.jpg"> <img src="sto/1006.jpg"> <img src="sto/005.jpg">

       <img src="sto/1002.jpg"> <img src="sto/001.jpg"> <img src="sto/006.jpg">

       <img src="sto/1003.jpg"> <img src="sto/002.jpg"> <img src="sto/007.jpg">

       <img src="sto/1004.jpg"> <img src="sto/003.jpg"> <img src="sto/008.jpg">

       <img src="sto/1005.jpg"> <img src="sto/004.jpg"> <img src="sto/009.jpg"> </div>

 

</body>

 

</html>

 

0 Comments