注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天民博客

欢迎光临.多谢指教!

 
 
 

日志

 
 
关于我

(1)对圈子邀请表示感谢,未能加入的希圈主谅解! (2)对您的光临,留言,点评在此表示感谢,未能及时回帖表示歉意! (3)凡属下类帖必复---即"有问必答","有需必助",

网易考拉推荐

<漂浮>-(附制作代码)  

2010-10-14 17:33:40|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
漂浮-(附制作代码) - 天民 - 天民博客
点击此处进入

 

可将代码中"图片地址"换成自选图,二次制作:

<html><body bgcolor=cccc99 background="http://ektha307.com.ne.kr/htm/G/bg/0123.gif">
<br><br><br><br>

<style type="text/css">
.img {position:absolute;left:-10000;border:#000000 solid 1px;cursor:pointer;}
</style>

<script type="text/javascript"><!--
window.onerror = new Function("return true");
screen.bufferDepth = 10;
object = new Array();
////////////////////
am = 40;
TEMPO = 5000;
///////////////////
W0 = 0;
H0 = 0;
nx = 0;
ny = 0;
K  = 0;
Kb = -1;

function zoomIn(N){
    object[N].img.cursor="crosshair";
    object[N].zoomIn();
    object[N].img.zIndex=0;
}

function zoomOut(N){
    object[N].img.cursor="pointer";
    object[N].zoomOut();
}

function zyva(N){
    if(N!=Kb){
        clearTimeout(object[Kb].TO);
        zoomIn(N);
        object[Kb].BR=true;
        zoomOut(Kb);
        Kb=N;
    }
}

function nextImg(){
    if(Kb>=0)zoomOut(Kb);
    Kb=K%nbI;
    zoomIn(Kb);
    K++;
}

function CObj(N,img){
    this.A   = Math.round(Math.random()*10)+1;
    this.B   = Math.round(Math.random()*10)+3;
    this.k   = 0.1 * N;
    this.L   = 0;
    this.T   = 0;
    this.W   = W0;
    this.H   = H0;
    this.xb  = 0;
    this.img = img.style;
    this.img.zIndex = 1;
    this.obj = "object["+N+"].";
    this.BR  = false;
    this.TO  = 0;

    this.mainloop = function () {
        with (this) {
            k += 0.001;
            L  = ((nx-W) * .5) + (Math.cos(k * A) * .5) * (nx - W);
            T  = ((ny-H) * .5) + (Math.cos(k * B) * .5) * (ny - H);
            with(img){
                width  = Math.floor(W);
                height = Math.floor(H);
                top    = Math.floor(T);
                left   = Math.floor(L);
            }
            setTimeout(obj+"mainloop();", 32);
        }
    }

    this.zoomIn  = function() {
        with (this) {
            W += (nx - W) * (.1 * am/(.01+(nx - W)));
            H += (ny - H) * (.1 * am/(.01+(nx - W)));
            if(!BR){
                if(W >= nx) TO=setTimeout("nextImg();", TEMPO);
                else setTimeout(obj+"zoomIn();", 32);
            }
        }
    }

    this.zoomOut  = function() {
        with (this) {
            W -= W / (am * .5);
            H -= H / (am * .5);
            if(W >= 2) setTimeout(obj+"zoomOut();", 32);
            else {
                BR=false;
                img.zIndex=1;
                zoomStart();
            }
        }
    }
    this.zoomStart = function() {
        with (this) {
            W++;
            H += H0 / W0;
            if(W<W0 || H<H0)setTimeout(obj+"zoomStart();", 32);
        }
    }

    this.mainloop();
}

function resize() {
    nx = document.body.clientWidth;
    ny = document.body.clientHeight;
    W0  = nx / nbI;
    H0  = ny / nbI;
    if(H0<W0*.56)H0=W0*.56;
}
onresize = resize;

onload = function() {
    img = document.getElementById("IMG").getElementsByTagName("img");
    nbI = img.length;
    resize();
    for(i=0;i<nbI;i++) object[i] = new CObj(i,img[i]);
    nextImg();
}
//-->
</script>
</head>

<body>

<div id="IMG" style="z-index:1">
    <img class=img onclick="zyva(0)" src="http://ncolumn-image1.daum.net/_home/N/D/02GND/1097216760751_014.Su1024x768.jpg">
    <img class=img onclick="zyva(1)" src="http://ncolumn-image1.daum.net/_home/N/D/02GND/1097326121133_032.Wi1024x768.jpg">
    <img class=img onclick="zyva(2)" src="http://ncolumn-image1.daum.net/_home/N/D/02GND/1097216890293_011.Su1024x768.jpg">
    <img class=img onclick="zyva(3)" src="http://ncolumn-image1.daum.net/_home/N/D/02GND/1097427512643_016.Su1024x768.jpg">
    <img class=img onclick="zyva(4)" src="http://ncolumn-image1.daum.net/_home/N/D/02GND/1097216605753_017.Su1024x768.jpg">
    <img class=img onclick="zyva(5)" src="http://ncolumn-image1.daum.net/_home/N/D/02GND/1097427588406_018.Su1024x768.jpg">
    <img class=img onclick="zyva(6)" src="http://ncolumn-image1.daum.net/_home/N/D/02GND/1097216461674_019.Su1024x768.jpg">
    <img class=img onclick="zyva(7)" src="http://ncolumn-image1.daum.net/_home/N/D/02GND/1097232487448_021.At1024x768.jpg">
    <img class=img onclick="zyva(8)" src="http://ncolumn-image1.daum.net/_home/N/D/02GND/1097230518216_026.At1024x768.jpg">
    <img class=img onclick="zyva(9)" src="http://ncolumn-image1.daum.net/_home/N/D/02GND/1097231749837_027.At1024x768.jpg">
    <img class=img onclick="zyva(10)" src="http://ncolumn-image1.daum.net/_home/N/D/02GND/1097230413763_028.At1024x768.jpg">
    <img class=img onclick="zyva(11)" src="http://ncolumn-image1.daum.net/_home/N/D/02GND/1097229760813_030.At1024x768.jpg">
    <img class=img onclick="zyva(12)" src="http://ncolumn-image1.daum.net/_home/N/D/02GND/1097325969857_036.Wi1024x768.jpg">

</div>
</body></html>

  评论这张
 
阅读(650)| 评论(24)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017