您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 图片特效 >

    精美图片展示效果代码二

    时间:2013-08-23 16:23 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
    <!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" />
    <meta name="keywords" content="站长,网页特效,js特效,广告代码,www.codesocang.com源码搜藏网" />
    <meta name="description" content="www.codesocang.com,源码搜藏网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在源码搜藏网" />
    <title>精美图片展示效果代码二,sky整理收集,源码搜藏网欢迎您。</title>
    <meta http-equiv="imagetoolbar" content="no">
    <style type="text/css">
    html {
    overflow: hidden;
    }
    body {
    background: #222;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    }
    .spanSlide {
    position: absolute;
    background: #000;
    font-size: 1px;
    overflow: hidden;
    }
    .imgSlide {
    position: absolute;
    left: 5%;
    top: 5%;
    width: 90%;
    height: 90%;
    overflow: hidden;
    }
    .txtSlide {
    position: absolute;
    top: 5%;
    left: 50px;
    width:100%;
    color:#FFF;
    font-family: arial, helvetica, verdana, sans-serif;
    font-weight: bold;
    font-size:96px;
    letter-spacing:12px;
    filter: alpha(opacity=70);
    -moz-opacity:0.7;
    opacity:0.7;
    }
    </style>
    <script type="text/javascript">
    var ym=0;
    var ny=0;
    createElement = function(container, type, param){
    o=document.createElement(type);
    for(var i in param)o[i]=param[i];
    container.appendChild(o);
    return o;
    }//欢迎来到源码搜藏网,我们的网址是www.codesocang.com,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    mooz = {
    O:[],
    /////////
    mult:6,
    nbI:5,
    /////////
    rwh:0,
    imgsrc:0,
    W:0,
    H:0,
    Xoom:function(N){
    this.o = createElement(document.getElementById("screen"), "span", {
    'className':'spanSlide'
    });
    img = createElement(this.o, "img", {
    'className':"imgSlide",
    'src':mooz.imgsrc[N%mooz.imgsrc.length].src
    });
    spa = createElement(this.o, "span", {
    'className':"imgSlide"
    });
    txt = createElement(spa, "span", {
    'className':"txtSlide",
    'innerHTML':mooz.imgsrc[N%mooz.imgsrc.length].title
    });
    this.N = 10000+N;
    },
    mainloop:function(){
    with(this){
    for(i=0; i<mooz.nbI; i++) {
    O[i].N += (ym-ny)/8000;
    N = O[i].N%nbI;
    ti = Math.pow(mult,N);
    with(O[i].o.style){
    left   = Math.round((W-(ti*rwh))/(W+ti)*(W*.5))+"px";
    top    = Math.round((H-ti)/(H+ti)*(H*.5))+"px";
    zIndex = Math.round(10000-ti*.1);
    width  = Math.round(ti*rwh)+"px";
    height = Math.round(ti)+"px";
    }
    }
    }
    setTimeout("mooz.mainloop();", 16);
    },
    oigres:function(){
    with(this){
    W = parseInt(document.getElementById("screen").style.width);
    H = parseInt(document.getElementById("screen").style.height);
    imgsrc = document.getElementById("images").getElementsByTagName("img");
    rwh = imgsrc[0].width/imgsrc[0].height;
    for(var i=0;i<nbI;i++) O[i] = new Xoom(i);
    mainloop();
    }
    }
    }//欢迎来到源码搜藏网,我们的网址是www.codesocang.com,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    document.onmousemove = function(e){
    if(window.event) e=window.event;
    ym = (e.y || e.clientY);
    if(ym/2>ny)ny=ym/2;
    }
    window.onload = function(){
    ym = ny+50;
    mooz.oigres();
    }//欢迎来到源码搜藏网,我们的网址是www.codesocang.com,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    </script>
    </head>
    <body>
    <a href="<#ZC_BLOG_HOST#>">源码搜藏网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
    <!--欢迎来到源码搜藏网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:用.net打造靓站-->
    <div style="position:absolute;left:50%;top:50%">
    <div style="position:absolute;width:720px;height:560px;left:-360px;top:-280px;background:#fff"></div>
    <div style="position:absolute;left:-40px;top:-6px;color:#000;font-family:arial;font-size:0.9em">Loading...</div>
    <div id="screen" style="position:absolute;width:640px;height:480px;left:-320px;top:-240px;overflow:hidden"></div>
    </div>
    <div id="images" style="visibility:hidden">
    <img title="站长特效一号图" src="http://js.alixixi.com/image/1.jpg" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>
    <img title="站长特效二号图" src="http://js.alixixi.com/image/2.jpg" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>
    <img title="站长特效三号图" src="http://js.alixixi.com/image/3.jpg" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>
    <img title="站长特效四号图" src="http://js.alixixi.com/image/4.jpg" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>
    <img title="站长特效五号图" src="http://js.alixixi.com/image/5.jpg" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>
    </div>
    </body>
    </html>
    精美图片展示效果代码二由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/pic/5473.html
    标签:网站源码