cpcpc的专栏

业精于勤而荒于嬉 行成于思而毁于随。

JS图片代码切换总汇

JS图片代码切换总汇

(1)

<style type="text/css" media="screen">
*{margin:0;padding:0;}
body {
    margin:0;
    padding:0;
    font-size:12px;
    font:12px/1.5em Tahoma, Verdana, Simsun, Microsoft YaHei, Arial Unicode MS, Mingliu, Arial, Helvetica;
}
img {
    border:none;
}
ul,li {
    margin:0;
    padding:0;
    list-style:none;
}
.slider {
    position:relative;
    width:748px;
    height:80px;
}
.slider .pic {}
.slider .pic img {
    width:748px;
    height:80px;
}
.slider .num {
    z-index:2;
    position:absolute;
    right:2px;
    bottom:2px;
    width:95px;
    height:16px;
}
.slider .num li {
    float:left;
    display:inline;
    width:16px;
    height:16px;
    line-height:16px;
    margin-left:3px;
    text-align:center;
    color:#595959;
    cursor:pointer;
}
.slider .num li.current {
    background-color:#ffffff;
    font-weight:bold;
    color:#ff4e00;
}
.slider .bg {
    z-index:1;
    position:absolute;
    right:2px;
    bottom:2px;
    width:95px;
    height:16px;
}
.slider .bg li {
    float:left;
    display:inline;
    width:16px;
    height:16px;
    line-height:16px;
    margin-left:3px;
    background-color:#fff;
    filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;background-color:#ffffff;font-size:0;
    text-align:center;
    color:#595959;
    font-size:0;
}
</style>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<div class="slider" style="height:80px; overflow:hidden">
  <ul class="num" id="homePushName">
    <li id="homeAd0" class="current">1</li>
    <li id="homeAd1">2</li>
    <li id="homeAd2">3</li>
    <li id="homeAd3">4</li>
    <li id="homeAd4">5</li>
  </ul>
  <ul class="bg" id="homePushBg">
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
    <li>&nbsp;</li>
  </ul>
  <ul class="pic" id="homePushShow">
<li id="homePushShow1" style="height:80px; overflow:hidden;">
<a href="http://www.zzjs.net/" target="_blank" title="站长特效网,打造国内最帅的网页特效站!"><img src="/ad/1.jpg"/></a>
</li>
<li id="homePushShow2" style="height:80px; overflow:hidden;">
<a href="http://www.zzjs.net" target="_blank" title="站长特效网,打造国内最帅的网页特效站!"><img src="/ad/2.jpg"/></a>
</li>
<li id="homePushShow3" style="height:80px; overflow:hidden;">
<a href="http://www.zzjs.net" target="_blank" title="三号广告图片说明信息"><img src="/ad/3.jpg"/></a>
</li>
<li id="homePushShow4" style="height:80px; overflow:hidden;">
<a href="http://www.zzjs.net" target="_blank" title="四号广告图片说明信息"><img src="/ad/4.jpg"/></a>
</li>
<li id="homePushShow5" style="height:80px; overflow:hidden;">
<a href="http://www.zzjs.net" target="_blank" title="五号广告图片说明信息"><img src="/ad/5.jpg"/></a>
</li>
</ul>
</div>
<script type="text/javascript">
    var listItem=document.getElementById("homePushShow");
    var tList=document.getElementById("homePushName").childNodes;
    var controlItem=[];
    for(var i=0;i<tList.length;i++){
        if(tList[i].nodeName.toLowerCase()=="li"){
            controlItem.push(tList[i]);
        }
    }
    var picCount=controlItem.length;
    var cid=0;
    var tid=Math.floor(Math.random()*picCount);
    window.cTop=0
    window.gTop=0;
    window.speed=0;
    window.controlAction="";
    window.timeCount=0;
    setInterval(function(){
        if(cid!=tid){
            gTop=tid*80;
            speed=(gTop-cTop)/10;
            cid=tid;
            for(var i=0;i<picCount;i++){
                controlItem[i].className=((i==cid)?"current":"");
            }
        }
        if(window.cTop!=window.gTop){
            window.cTop+= parseInt(speed);
            listItem.style.marginTop="-"+ parseInt(window.cTop)+"px";
        }
        document.getElementById("homePushBg").style.display="block";
        document.getElementById("homePushName").style.display="block";
    },20);
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    for(var i=0;i<picCount;i++){
        controlItem[i].onmouseover=function(){
            var goId=parseInt(this.innerHTML)-1;
            clearTimeout(window.controlAction);
            window.controlAction=setTimeout(function(){
                tid=goId;
                timeCount=0;
            },300);
        }
        controlItem[i].onmouseout=function(){
            clearTimeout(window.controlAction);
        }
    }
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    setInterval(function(){
        timeCount+=1
        if(timeCount>=5){
            window.controlAction=setTimeout(function(){
                tid=tid+1;
                if(tid>=picCount){tid=0;}
            },20);
            timeCount=0;
        }
    },1000);
</script>


(2)兼容多种浏览器js图片切换

<style type="text/css">
*{margin:0;padding:0;}
#ifocus2 { width:748px; height:80px;}
#www_zzjs_net { display:inline; position:relative; float:left; width:748px; height:80px; overflow:hidden; }
#ifocus_piclist2 { position:absolute; }
#ifocus_piclist2 ul{margin:0px;padding:0px;list-style-type:none;}
#ifocus_piclist2 li { width:748px; height:80px; overflow:hidden;margin:0px;padding:0px; }
#ifocus_piclist2 img { width:748px; height:80px; border:0px;}
#ifocus_btn2 { position:absolute; right:4px; bottom:2px; color:#a25897; }
#ifocus_btn2 .zzjs_net li {
    float:left;
    display:inline;
    width:16px;
    height:16px;
    line-height:16px;
    margin-left:3px;
    text-align:center;
    color:#595959;
    cursor:pointer;
}
#ifocus_btn2 .zzjs_net li.current {
    background-color:#ffffff;
    font-weight:bold;
    color:#ff4e00;
}
#ifocus_btn2 .bg {
    z-index:1;
    position:absolute;
    right:2px;
    bottom:2px;
    width:95px;
    height:16px;
}
#ifocus_btn2 .bg li {
    float:left;
    display:inline;
    width:14px;
    height:16px;
    line-height:16px;
    margin-left:3px;
    background-color:#fff;
    filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;background-color:#ffffff;font-size:0;
    text-align:center;
    color:#595959;
    font-size:0;
}
</style>
<script language="javascript">
//1
/**
 * 根据id获取对象
 */
function $(id) {
    return document.getElementById(id);
}
/**
 * 添加页面加载完毕后要执行的方法
 */
function addLoadEvent(func){
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function(){
            oldonload();
            func();
        }
    }
}
/**
 * 添加页面加载完毕后要执行的方法
 */
function addOnLoadEvent(invoker, func){
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = function() {
            func.apply(invoker);
        }
    } else {
        window.onload = function(){
            oldonload();
            func.apply(invoker);
        }
    }
}
/**
 * 扩展Array, 为原型增加一个判断是否包含传入的值的方法
 */
Array.prototype.contains = function(_val) {
    for (var i = 0; i < this.length; i++) {
        if (this[i] == _val) {
            return true;
        }
    }
    return false;
}
/**
 * 增加一个扩展window.setTimeout的函数
 */
var cusSetTimeout = function(invoker, fRef, mDelay) {
    if (typeof fRef == "function") {
        var argu = Array.prototype.slice.call(arguments, 3);
        var f = (function() {
            fRef.apply(invoker, argu);
        });
        return setTimeout(f, mDelay); // window.setTimeout原来有返回值,这里重写也应该返回
    }
    return setTimeout(fRef, mDelay); // 相当于setTimeout("test()", timeout);
}
/**
 * 增加一个扩展window.setInterval的函数
 */
var cusSetInterval = function(invoker, fRef, mDelay) {
    if (typeof fRef == "function") {
        var argu = Array.prototype.slice.call(arguments, 3);
        var f = (function() {
            fRef.apply(invoker, argu);
        });
        return setInterval(f, mDelay); // window.setInterval原来有返回值,这里重写也应该返回
    }
    return setInterval(fRef, mDelay); // 相当于setInterval("test()", timeout);
}
//2
/**
 * 焦点图类.
 * 创建实例时, 需同时将实例名称传进去
 *///欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
function FocusPicture(fname, ifocus, ifocus_piclist, ifocus_btn, normal, current, imageHeight, maxCurrentNum, autoChangeInterval) {
    this.instanceName = fname; // 类实例名称
    this.ifocus = ifocus ? ifocus : "ifocus"; // 焦点图外围div的ID
    this.ifocusPicList = ifocus_piclist ? ifocus_piclist : "ifocus_piclist"; // 焦点图图片显示区域外围div的ID
    this.ifocusBtn = ifocus_btn ? ifocus_btn : "ifocus_btn"; // 焦点图感应按钮外转div的ID
    this.normalClassName = normal ? normal : "normal"; // 按钮正常时的class样式
    this.currentClassName = current ? current : "current"; // 按钮选中时的class样式
    this.imageHeight = imageHeight ? imageHeight : 80; // 图片高度, 用于图片滑动, 即滑动一张图片的高度
    this.maxCurrentNum = maxCurrentNum ? maxCurrentNum : 4; // 最大当前选中的图片号, 从0开始, 3表示第四张
    this.autoChangeInterval = autoChangeInterval ? autoChangeInterval : 4000; // 图片轮换的时间间隔, 单位为毫秒
    this.isAutoChange = true; // 设置是否自动更换图片, 为true表示自动更换, 为false表示停止
    this.slideSpeed = 20; // 图片滑行速度, 值越大, 速度越慢
    this.invokeInterval = 5; // 循环调用moveElement函数的时间间隔, 单位为毫秒
    this.setIsAutoChange = function(flag) {
        this.isAutoChange = flag;
    }
    /**
     * 设置图片滑动方法, 每调用一次, 调整一点, 循环调用调整到指定位置
     *
     * @param elementID 图片div的ID
     * @param final_x 调整后的x坐标
     * @param final_y 调整后的y坐标
     */
    this.moveElement = function(elementID, final_x, final_y) {
        if (!document.getElementById)
            return false;
        if (!document.getElementById(elementID))
            return false;
        var elem = document.getElementById(elementID);
        if (elem.movement) {
            clearTimeout(elem.movement);
        }
        if (!elem.style.left) {
            elem.style.left = "0px";
        }
        if (!elem.style.top) {
            elem.style.top = "0px";
        }
        var xpos = parseInt(elem.style.left);
        var ypos = parseInt(elem.style.top);
        if (xpos == final_x && ypos == final_y) {
            return true;
        }
        if (xpos < final_x) {
            var dist = Math.ceil((final_x - xpos) / this.slideSpeed);
            xpos = xpos + dist;
        }
        if (xpos > final_x) {
            var dist = Math.ceil((xpos - final_x) / this.slideSpeed);
            xpos = xpos - dist;
        }
        if (ypos < final_y) {
            var dist = Math.ceil((final_y - ypos) / this.slideSpeed);
            ypos = ypos + dist;
        }
        if (ypos > final_y) {
            var dist = Math.ceil((ypos - final_y) / this.slideSpeed);
            ypos = ypos - dist;
        }
        elem.style.left = xpos + "px";
        elem.style.top = ypos + "px";
        elem.movement = cusSetTimeout(this, this.moveElement, this.invokeInterval, elementID, final_x, final_y);
    }
    /**
     * 设置按钮正常样式
     */
    this.classNormal = function(iFocusBtnID){
        var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li'); // 按钮
        for(var i=0; i < iFocusBtns.length; i++) { // 设置按钮和描述正常样式
            iFocusBtns[i].className = this.normalClassName;
        }
    }
    /**
     * 设置按钮选中样式
     */
    this.classCurrent = function(iFocusBtnID, n){
        if (n >= this.maxCurrentNum)
        {
            n = this.maxCurrentNum ;
        }
        var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
        // 设置按钮和描述当前选中的样式
        iFocusBtns[n].className = this.currentClassName;
    }
    /**
     * 页面加载完毕后执行方法.
     *
     */
    this.iFocusChange = function() {
        //alert(this.ifocus + " " + $(this.ifocus) + " " + (this == window));
        if (!$(this.ifocus))
            return false;
        // 当前调用的实例对象
        var instance = eval(this.instanceName);
        $(this.ifocus).instance = instance;
        // 鼠标经过时图片区域时停止轮转
        $(this.ifocus).onmouseover = function() {
            this.instance.setIsAutoChange(false);
        };
        // 鼠标离开时图片区域时继续轮转
        $(this.ifocus).onmouseout = function() {
            this.instance.setIsAutoChange(true);
        };
        var iFocusBtns = $(this.ifocusBtn).getElementsByTagName('li');
        var listLength = iFocusBtns.length;
        this.maxCurrentNum = listLength -1
        iFocusBtns[0].instance = instance;
        iFocusBtns[0].ifocusPicList = this.ifocusPicList;
        iFocusBtns[0].ifocusBtn = this.ifocusBtn;
        iFocusBtns[0].onmouseover = function() {
            this.instance.moveElement(this.ifocusPicList, 0, 0, 5);
            this.instance.classNormal(this.ifocusBtn);
            this.instance.classCurrent(this.ifocusBtn, 0);
        }
        for (var i = 1; i < listLength; i++) {
            iFocusBtns[i].instance = instance;
            iFocusBtns[i].ifocusPicList = this.ifocusPicList;
            iFocusBtns[i].ifocusBtn = this.ifocusBtn;
            iFocusBtns[i].value = i;
            iFocusBtns[i].yAxis = -i * this.imageHeight;
            iFocusBtns[i].onmouseover = function() {
                this.instance.moveElement(this.ifocusPicList, 0, this.yAxis);
                this.instance.classNormal(this.ifocusBtn);
                this.instance.classCurrent(this.ifocusBtn, this.value); // 直接把i设到this.value的位置就不行了, 调用时i会随for循环的改变而改变
            }
        }
    }//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    /**
     * 定时调用该方法, 可以使图片自动更换
     */
    this.autoiFocus = function() {
        if(!$(this.ifocus)) return false;
        // 停止轮转
        if (!this.isAutoChange) return false;
        // 获取所有按钮
        var focusBtnList = $(this.ifocusBtn).getElementsByTagName('li');
        var listLength = focusBtnList.length;
        // 找到当前显示的按钮索引号
        for (var i = 0; i < listLength; i++) {
            if (focusBtnList[i].className == this.currentClassName) {
                var currentNum = i;
                break;
            }
        }
        // 如果当前在最后一个图片, 则显示第一张
        if (currentNum == this.maxCurrentNum ){
            this.moveElement(this.ifocusPicList, 0, 0);
            this.classNormal(this.ifocusBtn);
            this.classCurrent(this.ifocusBtn, 0);
        } else { // 直接显示下一张
            this.moveElement(this.ifocusPicList, 0, -(currentNum + 1) * this.imageHeight);
            this.classNormal(this.ifocusBtn);
            this.classCurrent(this.ifocusBtn, currentNum + 1);
        }
    }
    /**
     * 启动图片自动轮转的定时器
     */
    this.startAutoChange = function() {
        cusSetInterval(this, this.autoiFocus, this.autoChangeInterval);
        // setInterval(this.autoiFocus, this.autoChangeInterval); //这样调用的话, 好像this的调用者会变成window
    }
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
//3
var focusPictureC = new FocusPicture("focusPictureC", "ifocus2", "ifocus_piclist2", "ifocus_btn2", "normal", "current", "80", "4", "5000");
focusPictureC.startAutoChange();
addOnLoadEvent(focusPictureC, focusPictureC.iFocusChange);
</script>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<div id="ifocus2">
<div id="www_zzjs_net">
  <div id="ifocus_piclist2" style="left:0; top:0; height:auto">
    <ul>
    <li><a href="http://www.zzjs.net/" target="_blank" title="站长特效网,打造国内最帅的网页特效站!"><img src="/ad/1.jpg" width="748" height="80" border="0" /></a></li>
    <li><a href="http://www.zzjs.net/" target="_blank" title="站长特效网,打造国内最帅的网页特效站!"><img src="/ad/2.jpg" width="748" height="80" border="0" /></a></li>
    <li><a href="http://www.zzjs.net/" target="_blank" title="三号广告图片说明信息!"><img src="/ad/3.jpg" width="748" height="80" border="0" /></a></li>
    <li><a href="http://www.zzjs.net/" target="_blank" title="四号广告图片说明信息!"><img src="/ad/4.jpg" width="748" height="80" border="0" /></a></li>
    <li><a href="http://www.zzjs.net/" target="_blank" title="五号广告图片说明信息!"><img src="/ad/5.jpg" width="748" height="80" border="0" /></a></li>
    </ul>
</div>
<div id="ifocus_btn2">
   <ul class="zzjs_net">
    <li class="current">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>
</div>


(3)

<!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特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
<title>精美图片展示效果代码五,sky整理收集,站长特效欢迎您。</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;
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
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();
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
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();
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<div id="screen">
    <div id="box">
        <img src="/image/1.jpg" title="站长特效网一号图片" alt="专注于网页特效及广告代码,供站长和js爱好者参考。">
        <img src="/image/2.jpg" title="站长特效二号图片" alt="打造国内最帅的网页特效站。">
        <img src="/image/3.jpg" title="站长特效三号图片" alt="觉得不错就收藏本站吧.">
        <img src="/image/4.jpg" title="站长特效四号图片" alt="也可以推荐给您的朋友。">
        <img src="/image/5.jpg" title="站长特效五号图片" alt="站长特效,有你们而精彩。">
        <img src="/image/1.jpg" title="站长特效六号图片" alt="站长zz,js特效,zzjs.net,.net也精彩">
        <img src="/image/2.jpg" title="站长特效七号图片" alt="欢迎下次再来。">
        <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>


(4)

<!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特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
<title>精美图片展示效果代码三,sky整理收集,站长特效网欢迎您。</title>
<style type="text/css">
html {
    overflow: hidden;
}
body {
    margin: 0px;
    padding: 0px;
    background: #000;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}
#diapoContainer {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 80%;
    height: 80%;
    background: #222;
    overflow: hidden;
}
.imgDC {
    position: absolute;
    cursor: pointer;
    border: #000 solid 2px;
    filter: alpha(opacity=90);
    opacity: 0.9;
    visibility: hidden;
}
.spaDC {
    position: absolute;
    filter: alpha(opacity=20);
    opacity: 0.2;
    background: #000;
    visibility: hidden;
}
.imgsrc {
    position: absolute;
    width: 120px;
    height: 67px;
    visibility: hidden;
    margin: 4%;
}
#bkgcaption {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 6%;
    background:#1a1a1a;
}
#caption {
    position: absolute;
    font-family: arial, helvetica, verdana, sans-serif;
    white-space: nowrap;
    color: #fff;
    bottom: 0px;
    width: 100%;
    left: -10000px;
    text-align: center;
}
</style>
<script type="text/javascript">
var xm;
var ym;
/* ==== onmousemove event ==== */
document.onmousemove = function(e){
    if(window.event) e=window.event;
    xm = (e.x || e.clientX);
    ym = (e.y || e.clientY);
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
/* ==== window resize ==== */
function resize() {
    if(diapo)diapo.resize();
}
onresize = resize;
/* ==== opacity ==== */
setOpacity = function(o, alpha){
    if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
}
/* ===== encapsulate script ==== */
diapo = {
    O : [],
    DC : 0,
    img : 0,
    txt : 0,
    N : 0,
    xm : 0,
    ym : 0,
    nx : 0,
    ny : 0,
    nw : 0,
    nh : 0,
    rs : 0,
    rsB : 0,
    zo : 0,
    tx_pos : 0,
    tx_var : 0,
    tx_target : 0,
    /////// script parameters ////////
    attraction : 2,
    acceleration : .9,
    dampening : .1,
    zoomOver : 2,
    zoomClick : 6,
    transparency : .8,
    font_size: 18,
    //////////////////////////////////
    /* ==== diapo resize ==== */
    resize : function(){
        with(this){
            nx = DC.offsetLeft;
            ny = DC.offsetTop;
            nw = DC.offsetWidth;
            nh = DC.offsetHeight;
            txt.style.fontSize = Math.round(nh / font_size) + "px";
            if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();
            rsB = rs;
        }
    },
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    /* ==== create diapo ==== */
    CDiapo : function(o){
        /* ==== init variables ==== */
        this.o        = o;
        this.x_pos    = this.y_pos    = 0;
        this.x_origin = this.y_origin = 0;
        this.x_var    = this.y_var    = 0;
        this.x_target = this.y_target = 0;
        this.w_pos    = this.h_pos    = 0;
        this.w_origin = this.h_origin = 0;
        this.w_var    = this.h_var    = 0;
        this.w_target = this.h_target = 0;
        this.over     = false;
        this.click    = false;
        /* ==== create shadow ==== */
        this.spa = document.createElement("span");
        this.spa.className = "spaDC";
        diapo.DC.appendChild(this.spa);
        /* ==== create thumbnail image ==== */
        this.img = document.createElement("img");
        this.img.className = "imgDC";
        this.img.src = o.src;
        this.img.O = this;
        diapo.DC.appendChild(this.img);
        setOpacity(this.img, diapo.transparency);
        /* ==== mouse events ==== */
        this.img.onselectstart = new Function("return false;");
        this.img.ondrag = new Function("return false;");
        this.img.onmouseover = function(){
            diapo.tx_target=0;
            diapo.txt.innerHTML=this.O.o.alt;
            this.O.over=true;
            setOpacity(this,this.O.click?diapo.transparency:1);
        }
        this.img.onmouseout = function(){
            diapo.tx_target=-diapo.nw;
            this.O.over=false;
            setOpacity(this,diapo.transparency);
        }
        this.img.onclick = function() {
            if(!this.O.click){
                if(diapo.zo && diapo.zo != this) diapo.zo.onclick();
                this.O.click = true;
                this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;
                this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;
                diapo.zo = this;
                setOpacity(this,diapo.transparency);
            } else {
                this.O.click = false;
                this.O.over = false;
                this.O.resize();
                diapo.zo = 0;
            }
        }
        /* ==== rearrange thumbnails based on "imgsrc" images position ==== */
        this.resize = function (){
            with (this) {
                x_origin = o.offsetLeft;
                y_origin = o.offsetTop;
                w_origin = o.offsetWidth;
                h_origin = o.offsetHeight;
            }
        }
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
        /* ==== animation function ==== */
        this.position = function (){
            with (this) {
                /* ==== set target position ==== */
                w_target = w_origin;
                h_target = h_origin;
                if(over){
                    /* ==== mouse over ==== */
                    w_target = w_origin * diapo.zoomOver;
                    h_target = h_origin * diapo.zoomOver;
                    x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));
                    y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));
                } else {
                    /* ==== mouse out ==== */
                    x_target = x_origin;
                    y_target = y_origin;
                }
                if(click){
                    /* ==== clicked ==== */
                    w_target = w_origin * diapo.zoomClick;
                    h_target = h_origin * diapo.zoomClick;
                }
                /* ==== magic spring equations ==== */
                x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
                y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
                w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
                h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
                diapo.rs += (Math.abs(x_var) + Math.abs(y_var));
                /* ==== html animation ==== */
                with(img.style){
                    left   = Math.round(x_pos) + "px";
                    top    = Math.round(y_pos) + "px";
                    width  = Math.round(Math.max(0, w_pos)) + "px";
                    height = Math.round(Math.max(0, h_pos)) + "px";
                    zIndex = Math.round(w_pos);
                }
                with(spa.style){
                    left   = Math.round(x_pos + w_pos * .1) + "px";
                    top    = Math.round(y_pos + h_pos * .1) + "px";
                    width  = Math.round(Math.max(0, w_pos * 1.1)) + "px";
                    height = Math.round(Math.max(0, h_pos * 1.1)) + "px";
                    zIndex = Math.round(w_pos);
                }
            }
        }
    },
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    /* ==== main loop ==== */
    run : function(){
        diapo.xm = xm - diapo.nx;
        diapo.ym = ym - diapo.ny;
        /* ==== caption anim ==== */
        diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
        diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
        /* ==== images anim ==== */
        for(var i in diapo.O) diapo.O[i].position();
        /* ==== loop ==== */
        setTimeout("diapo.run();", 16);
    },
    /* ==== load images ==== */
    images_load : function(){
        // ===== loop until all images are loaded =====
        var M = 0;
        for(var i=0; i<diapo.N; i++) {
            if(diapo.img[i].complete) {
                diapo.img[i].style.position = "relative";
                diapo.O[i].img.style.visibility = "visible";
                diapo.O[i].spa.style.visibility = "visible";
                M++;
            }
            resize();
        }
        if(M<diapo.N) setTimeout("diapo.images_load();", 128);
    },
    /* ==== init script ==== */
    init : function() {
        diapo.DC = document.getElementById("diapoContainer");
        diapo.img = diapo.DC.getElementsByTagName("img");
        diapo.txt = document.getElementById("caption");
        diapo.N = diapo.img.length;
        for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));
        diapo.resize();
        diapo.tx_pos = -diapo.nw;
        diapo.tx_target = -diapo.nw;
        diapo.images_load();
        diapo.run();
    }
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<div id="diapoContainer">
    <img class="imgsrc" src="/image/1.jpg" alt="站长特效一号图片">
    <img class="imgsrc" src="/image/2.jpg" alt="站长特效二号图片">
    <img class="imgsrc" src="/image/3.jpg" alt="站长特效三号图片">
    <img class="imgsrc" src="/image/4.jpg" alt="站长特效四号图片">
    <img class="imgsrc" src="/image/5.jpg" alt="站长特效五号图片">
    <img class="imgsrc" src="/image/1.jpg" alt="站长特效六号图片">
    <img class="imgsrc" src="/image/2.jpg" alt="站长特效七号图片">
    <img class="imgsrc" src="/image/3.jpg" alt="站长特效八号图片">
    <div id="bkgcaption">
    </div>
    <div id="caption">
    </div>
</div>
<script type="text/javascript">
/* ==== start script ==== */
function dom_onload() {
    if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
</script>
</body>
</html>


(5)

<!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特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
<title>精美图片展示效果代码一,sky整理收集,站长特效网欢迎您。</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
html {
    overflow: hidden;
}
body {
    margin: 0px;
    padding: 0px;
    background: #000;
    width: 100%;
    height: 100%;
}
#imageFlow {
    position: absolute;
    width: 100%;
    height: 80%;
    left: 0%;
    top: 10%;
    background: #000;
}
#imageFlow .diapo {
    position: absolute;
    left: -1000px;
    cursor: pointer;
    -ms-interpolation-mode: nearest-neighbor;
}
#imageFlow .link {
    border: dotted #fff 1px;
    margin-left: -1px;
    margin-bottom: -1px;
}
#imageFlow .bank {
    visibility: hidden;
}
#imageFlow .top {
    position: absolute;
    width: 100%;
    height: 40%;
    background: #181818;
}
#imageFlow .text {
    position: absolute;
    left: 0px;
    width: 100%;
    bottom: 16%;
    text-align: center;
    color: #FFF;
    font-family: verdana, arial, Helvetica, sans-serif;
    z-index: 1000;
}
#imageFlow .title {
    font-size: 0.9em;
    font-weight: bold;
}
#imageFlow .legend {
    font-size: 0.8em;
}
#imageFlow .scrollbar {
    position: absolute;
    left: 10%;
    bottom: 10%;
    width: 80%;
    height: 16px;
    z-index: 1000;
}
#imageFlow .track {
    position: absolute;
    left: 1%;
    width: 98%;
    height: 16px;
    filter: alpha(opacity=30);
    opacity: 0.3;
}
#imageFlow .arrow-left {
    position: absolute;
}
#imageFlow .arrow-right {
    position: absolute;
    right: 0px;
}
#imageFlow .bar {
    position: absolute;
    height: 16px;
    left: 25px;
}
</style>
<script type="text/javascript">
var imf = function () {
var lf = 0;
var instances = [];
function getElementsByClass (object, tag, className) {
    var o = object.getElementsByTagName(tag);
    for ( var i = 0, n = o.length, ret = []; i < n; i++)
        if (o[i].className == className) ret.push(o[i]);
    if (ret.length == 1) ret = ret[0];
    return ret;
}
function addEvent (o, e, f) {
    if (window.addEventListener) o.addEventListener(e, f, false);
    else if (window.attachEvent) r = o.attachEvent('on' + e, f);
}
function createReflexion (cont, img) {
    var flx = false;
    if (document.createElement("canvas").getContext) {
        flx = document.createElement("canvas");
        flx.width = img.width;
        flx.height = img.height;
        var context = flx.getContext("2d");
        context.translate(0, img.height);
        context.scale(1, -1);
        context.drawImage(img, 0, 0, img.width, img.height);
        context.globalCompositeOperation = "destination-out";
        var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
        gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
        gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
        context.fillStyle = gradient;
        context.fillRect(0, 0, img.width, img.height * 2);
    } else {
        /* ---- DXImageTransform ---- */
        flx     = document.createElement('img');
        flx.src = img.src;
        flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' + 'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
                           (img.height * .25) + ')';
    }
    /* ---- insert Reflexion ---- */
    flx.style.position = 'absolute';
    flx.style.left     = '-1000px';
    cont.appendChild(flx);
    return flx;
}
/* //////////// ==== ImageFlow Constructor ==== //////////// */
function ImageFlow(oCont, size, zoom, border) {
    this.diapos     = [];
    this.scr        = false;
    this.size       = size;
    this.zoom       = zoom;
    this.bdw        = border;
    this.oCont      = oCont;
    this.oc         = document.getElementById(oCont);
    this.scrollbar  = getElementsByClass(this.oc,   'div', 'scrollbar');
    this.text       = getElementsByClass(this.oc,   'div', 'text');
    this.title      = getElementsByClass(this.text, 'div', 'title');
    this.legend     = getElementsByClass(this.text, 'div', 'legend');
    this.bar        = getElementsByClass(this.oc,   'img', 'bar');
    this.arL        = getElementsByClass(this.oc,   'img', 'arrow-left');
    this.arR        = getElementsByClass(this.oc,   'img', 'arrow-right');
    this.bw         = this.bar.width;
    this.alw        = this.arL.width - 5;
    this.arw        = this.arR.width - 5;
    this.bar.parent = this.oc.parent  = this;
    this.arL.parent = this.arR.parent = this;
    this.view       = this.back       = -1;
    this.resize();
    this.oc.onselectstart = function () { return false; }
    /* ---- create images ---- */
    var img   = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
    this.NF = img.length;
    for (var i = 0, o; o = img[i]; i++) {
        this.diapos[i] = new Diapo(this, i,
                                    o.rel,
                                    o.title || '- ' + i + ' -',
                                    o.innerHTML || o.rel,
                                    o.href || '',
                                    o.target || '_self'
        );
    }//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    /* ==== add mouse wheel events ==== */
    if (window.addEventListener)
        this.oc.addEventListener('DOMMouseScroll', function(e) {
            this.parent.scroll(-e.detail);
        }, false);
    else this.oc.onmousewheel = function () {
        this.parent.scroll(event.wheelDelta);
    }
    /* ==== scrollbar drag N drop ==== */
    this.bar.onmousedown = function (e) {
        if (!e) e = window.event;
        var scl = e.screenX - this.offsetLeft;
        var self = this.parent;
        /* ---- move bar ---- */
        this.parent.oc.onmousemove = function (e) {
            if (!e) e = window.event;
            self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
            self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
            if (self.view != self.back) self.calc();
            return false;
        }
        /* ---- release scrollbar ---- */
        this.parent.oc.onmouseup = function (e) {
            self.oc.onmousemove = null;
            return false;
        }
        return false;
    }
    /* ==== right arrow ==== */
    this.arR.onclick = this.arR.ondblclick = function () {
        if (this.parent.view < this.parent.NF - 1)
            this.parent.calc(1);
    }
    /* ==== Left arrow ==== */
    this.arL.onclick = this.arL.ondblclick = function () {
        if (this.parent.view > 0)
            this.parent.calc(-1);
    }
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
/* //////////// ==== ImageFlow prototype ==== //////////// */
ImageFlow.prototype = {
    /* ==== targets ==== */
    calc : function (inc) {
        if (inc) this.view += inc;
        var tw = 0;
        var lw = 0;
        var o = this.diapos[this.view];
        if (o && o.loaded) {
            /* ---- reset ---- */
            var ob = this.diapos[this.back];
            if (ob && ob != o) {
                ob.img.className = 'diapo';
                ob.z1 = 1;
            }
            /* ---- update legend ---- */
            this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
            this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
            /* ---- update hyperlink ---- */
            if (o.url) {
                o.img.className = 'diapo link';
                window.status = 'hyperlink: ' + o.url;
            } else {
                o.img.className = 'diapo';
                window.status = '';
            }
            /* ---- calculate target sizes & positions ---- */
            o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;
            var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
            var x = x0 + o.w1 + this.bdw;
            for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
                if (o.loaded) {
                    o.x1 = x;
                    o.w1 = (this.ht / o.r) * this.size;
                    x   += o.w1 + this.bdw;
                    tw  += o.w1 + this.bdw;
                }
            }
            x = x0 - this.bdw;
            for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
                if (o.loaded) {
                    o.w1 = (this.ht / o.r) * this.size;
                    o.x1 = x - o.w1;
                    x   -= o.w1 + this.bdw;
                    tw  += o.w1 + this.bdw;
                    lw  += o.w1 + this.bdw;
                }
            }
            /* ---- move scrollbar ---- */
            if (!this.scr && tw) {
                var r = (this.ws - this.alw - this.arw - this.bw) / tw;
                this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
            }
            /* ---- save preview view ---- */
            this.back = this.view;
        }
    },
    /* ==== mousewheel scrolling ==== */
    scroll : function (sc) {
        if (sc < 0) {
            if (this.view < this.NF - 1) this.calc(1);
        } else {
            if (this.view > 0) this.calc(-1);
        }
    },
    /* ==== resize  ==== */
    resize : function () {
        this.wh = this.oc.clientWidth;
        this.ht = this.oc.clientHeight;
        this.ws = this.scrollbar.offsetWidth;
        this.calc();
        this.run(true);
    },
    /* ==== move all images  ==== */
    run : function (res) {
        var i = this.NF;
        while (i--) this.diapos[i].move(res);
    }
}
/* //////////// ==== Diapo Constructor ==== //////////// */
Diapo = function (parent, N, src, title, text, url, target) {
    this.parent        = parent;
    this.loaded        = false;
    this.title         = title;
    this.text          = text;
    this.url           = url;
    this.target        = target;
    this.N             = N;
    this.img           = document.createElement('img');
    this.img.src       = src;
    this.img.parent    = this;
    this.img.className = 'diapo';
    this.x0            = this.parent.oc.clientWidth;
    this.x1            = this.x0;
    this.w0            = 0;
    this.w1            = 0;
    this.z1            = 1;
    this.img.parent    = this;
    this.img.onclick   = function() { this.parent.click(); }
    this.parent.oc.appendChild(this.img);
    /* ---- display external link ---- */
    if (url) {
        this.img.onmouseover = function () { this.className = 'diapo link';    }
        this.img.onmouseout  = function () { this.className = 'diapo'; }
    }
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
/* //////////// ==== Diapo prototype ==== //////////// */
Diapo.prototype = {
    /* ==== HTML rendering ==== */
    move : function (res) {
        if (this.loaded) {
        var sx = this.x1 - this.x0;
            var sw = this.w1 - this.w0;
            if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
                /* ---- paint only when moving ---- */
                this.x0 += sx * .1;
                this.w0 += sw * .1;
                if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
                    /* ---- paint only visible images ---- */
                    this.visible = true;
                    var o = this.img.style;
                    var h = this.w0 * this.r;
                    /* ---- diapo ---- */
                    o.left   = Math.round(this.x0) + 'px';
                    o.bottom = Math.floor(this.parent.ht * .25) + 'px';
                    o.width  = Math.round(this.w0) + 'px';
                    o.height = Math.round(h) + 'px';
                    /* ---- reflexion ---- */
                    if (this.flx) {
                        var o = this.flx.style;
                        o.left   = Math.round(this.x0) + 'px';
                        o.top    = Math.ceil(this.parent.ht * .75 + 1) + 'px';
                        o.width  = Math.round(this.w0) + 'px';
                        o.height = Math.round(h) + 'px';
                    }
                } else {
                    /* ---- disable invisible images ---- */
                    if (this.visible) {
                        this.visible = false;
                        this.img.style.width = '0px';
                        if (this.flx) this.flx.style.width = '0px';
                    }
                }
            }
        } else {
            /* ==== image onload ==== */
            if (this.img.complete && this.img.width) {
                /* ---- get size image ---- */
                this.iw     = this.img.width;
                this.ih     = this.img.height;
                this.r      = this.ih / this.iw;
                this.loaded = true;
                /* ---- create reflexion ---- */
                this.flx    = createReflexion(this.parent.oc, this.img);
                if (this.parent.view < 0) this.parent.view = this.N;
                this.parent.calc();
            }
        }
    },
    /* ==== diapo onclick ==== */
    click : function () {
        if (this.parent.view == this.N) {
            /* ---- click on zoomed diapo ---- */
            if (this.url) {
                /* ---- open hyperlink ---- */
                window.open(this.url, this.target);
            } else {
                /* ---- zoom in/out ---- */
                this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
                this.parent.calc();
            }
        } else {
            /* ---- select diapo ---- */
            this.parent.view = this.N;
            this.parent.calc();
        }
        return false;
    }
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
/* //////////// ==== public methods ==== //////////// */
return {
    /* ==== initialize script ==== */
    create : function (div, size, zoom, border) {
        /* ---- instanciate imageFlow ---- */
        var load = function () {
            var loaded = false;
            var i = instances.length;
            while (i--) if (instances[i].oCont == div) loaded = true;
            if (!loaded) {
                /* ---- push new imageFlow instance ---- */
                instances.push(
                    new ImageFlow(div, size, zoom, border)
                );
                /* ---- init script (once) ---- */
                if (!imf.initialized) {
                    imf.initialized = true;
                    /* ---- window resize event ---- */
                    addEvent(window, 'resize', function () {
                        var i = instances.length;
                        while (i--) instances[i].resize();
                    });
                    /* ---- stop drag N drop ---- */
                    addEvent(document.getElementById(div), 'mouseout', function (e) {
                        if (!e) e = window.event;
                        var tg = e.relatedTarget || e.toElement;
                        if (tg && tg.tagName == 'HTML') {
                            var i = instances.length;
                            while (i--) instances[i].oc.onmousemove = null;
                        }
                        return false;
                    });
                    /* ---- set interval loop ---- */
                    setInterval(function () {
                        var i = instances.length;
                        while (i--) instances[i].run();
                    }, 16);
                }
            }
        }
        /* ---- window onload event ---- */
        addEvent(window, 'load', function () { load(); });
    }
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
}();
/* ==== create imageFlow ==== */
//          div ID    , size, zoom, border
imf.create("imageFlow", 0.15, 1.5, 10);
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<div id="imageFlow">
<div class="top">
</div>
<div class="bank">
    <a rel="/img/2010_zzjs_net_1.jpg" title="站长特效一号图片" href="http://www.zzjs.net/">站长特效网,打造国内最帅的网页特效站。</a>
    <a rel="/img/2010_zzjs_net_2.jpg" title="站长特效二号图片" href="http://www.zzjs.net/">专注于网页特效几广告代码,供站长和js爱好者参考。</a>
    <a rel="/img/2010_zzjs_net_3.jpg" title="站长特效三号图片" href="http://zzjs.net/">我们的域名是www.zzjs.net</a>
    <a rel="/img/2010_zzjs_net_4.jpg" title="站长特效四号图片" href="http://www.zzjs.net/">欢迎您的光临</a>
    <a rel="/img/2010_zzjs_net_5.jpg" title="站长特效五号图片" href="http://www.zzjs.net/">觉得不错就收藏本站吧</a>
    <a rel="/img/2010_zzjs_net_6.jpg" title="站长特效六号图片" href="http://www.zzjs.net/">我们追求的是质量,不是数量</a>
    <a rel="/img/2010_zzjs_net_7.jpg" title="站长特效七号图片" href="http://www.zzjs.net/">站长特效,有你更精彩。</a>
    <a rel="/img/2010_zzjs_net_8.jpg" title="站长特效八号图片" href="http://www.zzjs.net/">您的支持,是我们的动力</a>
    <a rel="/img/2010_zzjs_net_9.jpg" title="站长特效九号图片" href="http://zzjs.net/">十年打造极品站</a>
    <a rel="/img/2010_zzjs_net_10.jpg" title="站长特效十号图片" href="http://www.zzjs.net/">站长特效,zzjs,简单好记的域名,.net也精彩。</a>
    <a rel="/img/2010_zzjs_net_11.jpg" title="站长特效十一号图片" href="http://www.zzjs.net/">如果您喜欢,也可以把本站设为主页</a>
    <a rel="/img/2010_zzjs_net_12.jpg" title="站长特效十二号图片" href="http://www.zzjs.net/">推荐给需要的朋友吧,或许他们正在苦苦寻找这些东西。</a>
    <a rel="/img/2010_zzjs_net_13.jpg" title="站长特效十三号图片" href="http://www.zzjs.net/">欢迎下次再来,zzjs.net</a>
    <a rel="/img/2010_zzjs_net_14.jpg" title="站长特效十四号图片" href="http://www.zzjs.net/">站长特效,我们永不言败</a> </div>
<div class="text">
    <div class="title">
        Loading</div>
    <div class="legend">
        Please wait...</div>
</div>
<div class="scrollbar">
    <img class="track" src="/img/2010_zzjs_net_15.gif" alt="">
    <img class="arrow-left" src="/img/2010_zzjs_net_16.gif" alt="">
    <img class="arrow-right" src="/img/2010_zzjs_net_17.gif" alt="">
    <img class="bar" src="/img/2010_zzjs_net_18.gif" alt=""> </div>
</div>
</body>
</html>


(6)

<!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=utf-8" />
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
<title>常用js图片切换广告代码,sky整理收集。</title>
<style type="text/css">
/* Reset style */
* { margin:0; padding:0; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#0287CA; text-decoration:none; }
 a:hover { text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
legend { display:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }
input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }
table { border-collapse:collapse; }
html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/
/* iFocus style */
#ifocus { width:525px; height:245px; margin:20px; border:1px solid #DEDEDE; background:#F8F8F8; }
 #ifocus_pic { display:inline; position:relative; float:left; width:410px; height:225px; overflow:hidden; margin:10px 0 0 10px; }
  #ifocus_piclist { position:absolute; }
  #ifocus_piclist li { width:410px; height:225px; overflow:hidden; }
  #ifocus_piclist img { width:410px; height:225px; }
 #ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0; }
  #ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
  #ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; }
  #ifocus_btn .current { background: url(http://zzjs.net/by yourself) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
 #ifocus_opdiv { position:absolute; left:0; bottom:0; width:410px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
 #ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }
  #ifocus_tx .normal { display:none; }
</style>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function addLoadEvent(func){
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
  window.onload = func;
 } else {
  window.onload = function(){
   oldonload();
   func();
  }
 }
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
function moveElement(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {
    clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
    elem.style.left = "0px";
  }
  if (!elem.style.top) {
    elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
  return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/10);
    xpos = xpos + dist;
  }
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/10);
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/10);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/10);
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}
function classNormal(iFocusBtnID,iFocusTxID){
 var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
 var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
 for(var i=0; i<iFocusBtns.length; i++) {
  iFocusBtns[i].className='normal';
  iFocusTxs[i].className='normal';
 }
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
function classCurrent(iFocusBtnID,iFocusTxID,n){
 var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
 var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
 iFocusBtns[n].className='current';
 iFocusTxs[n].className='current';
}
function iFocusChange() {
 if(!$('ifocus')) return false;
 $('ifocus').onmouseover = function(){atuokey = true};
 $('ifocus').onmouseout = function(){atuokey = false};
 var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');
 var listLength = iFocusBtns.length;
 iFocusBtns[0].onmouseover = function() {
  moveElement('ifocus_piclist',0,0,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',0);
 }
 if (listLength>=2) {
  iFocusBtns[1].onmouseover = function() {
   moveElement('ifocus_piclist',0,-225,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',1);
  }
 }
 if (listLength>=3) {
  iFocusBtns[2].onmouseover = function() {
   moveElement('ifocus_piclist',0,-450,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',2);
  }
 }
 if (listLength>=4) {
  iFocusBtns[3].onmouseover = function() {
   moveElement('ifocus_piclist',0,-675,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',3);
  }
 }
}
setInterval('autoiFocus()',5000);
var atuokey = false;
function autoiFocus() {
 if(!$('ifocus')) return false;
 if(atuokey) return false;
 var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
 var listLength = focusBtnList.length;
 for(var i=0; i<listLength; i++) {
  if (focusBtnList[i].className == 'current') var currentNum = i;
 }
 if (currentNum==0&&listLength!=1 ){
  moveElement('ifocus_piclist',0,-225,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',1);
 }
 if (currentNum==1&&listLength!=2 ){
  moveElement('ifocus_piclist',0,-450,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',2);
 }
 if (currentNum==2&&listLength!=3 ){
  moveElement('ifocus_piclist',0,-675,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',3);
 }
 if (currentNum==3 ){
  moveElement('ifocus_piclist',0,0,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',0);
 }
 if (currentNum==1&&listLength==2 ){
  moveElement('ifocus_piclist',0,0,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',0);
 }
 if (currentNum==2&&listLength==3 ){
  moveElement('ifocus_piclist',0,0,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',0);
 }
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
addLoadEvent(iFocusChange);
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<div id="ifocus">
 <div id="ifocus_pic">
  <div id="ifocus_piclist" style="left:0; top:0;">
   <ul>
    <li><a href="#"><img src="../image/1.jpg" alt="zzjs net" /></a></li>
    <li><a href="#"><img src="../image/2.jpg" alt="zzjs net" /></a></li>
    <li><a href="#"><img src="../image/3.jpg" alt="zzjs net" /></a></li>
    <li><a href="#"><img src="../image/4.jpg" alt="zzjs net" /></a></li>
   </ul>
  </div>
  <div id="ifocus_opdiv"></div>
  <div id="ifocus_tx">
   <ul>
    <li class="current">站长特效网:www.zzjs.net</li>
    <li class="normal">专注于网页特效及广告代码。</li>
    <li class="normal">找js特效,来这里就对啦,做最帅最酷的js特效网站。</li>
    <li class="normal">站长,网页设计师,看了都会喜欢的网站,收藏起来吧。</li>
   </ul>
  </div>
 </div>
 <div id="ifocus_btn">
  <ul>
   <li class="current"><a href="http://www.zzjs.net/?cat=12" target="_blank"><img src="../image/1.jpg" alt="" /></a></li>
   <li class="normal"><a href="http://www.zzjs.net/?cat=10" target="_blank"><img src="../image/2.jpg" alt="" /></a></li>
   <li class="normal"><a href="http://www.zzjs.net/?cat=5" target="_blank"><img src="../image/3.jpg" alt="" /></a></li>
   <li class="normal"><a href="http://www.zzjs.net" target="_blank"><img src="../image/4.jpg" alt="" /></a></li>
  </ul>
 </div>
</div><!--ifocus end-->
</body>
</html>


(7)

<!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=utf-8" />
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
<title>精美图片展示效果代码十,sky整理收集,站长特效网欢迎您。</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)
{//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    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()
    {//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
        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()
    {//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
        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;
                    }
                }
            }
        }
    }//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    /* 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);
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
/* 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);
        }
    }
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
//-->
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<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="image/1.jpg" alt=""></span>
        <span style="left: 0px; top: 78px; width: 93px; height: 68px; z-index: 93;">
        <img style="left: -11px; top: -8px;" src="image/2.jpg" alt=""></span>
        <span style="left: 0px; top: 155px; width: 93px; height: 68px; z-index: 93;">
        <img style="left: -11px; top: -9px;" src="image/3.jpg" alt=""></span>
        <span style="left: 0px; top: 233px; width: 93px; height: 68px; z-index: 93;">
        <img style="left: -11px; top: -9px;" src="image/4.jpg" alt=""></span>
        <span style="left: 103px; top: 0px; width: 93px; height: 68px; z-index: 93;">
        <img style="left: -11px; top: -9px;" src="image/5.jpg" alt=""></span>
        <span style="left: 103px; top: 78px; width: 93px; height: 68px; z-index: 93;">
        <img style="left: -11px; top: -9px;" src="image/1.jpg" alt=""></span>
        <span style="left: 103px; top: 155px; width: 93px; height: 68px; z-index: 93;">
        <img style="left: -11px; top: -9px;" src="image/2.jpg" alt=""></span>
        <span style="left: 103px; top: 233px; width: 93px; height: 68px; z-index: 93;">
        <img style="left: -11px; top: -9px;" src="image/3.jpg" alt=""></span>
        <span style="left: 205px; top: 0px; width: 93px; height: 68px; z-index: 93;">
        <img style="left: -11px; top: -9px;" src="image/4.jpg" alt=""></span>
        <span style="left: 205px; top: 78px; width: 93px; height: 68px; z-index: 93;">
        <img style="left: -11px; top: -9px;" src="image/5.jpg" alt=""></span>
        <span style="left: 205px; top: 155px; width: 93px; height: 68px; z-index: 93;">
        <img style="left: -11px; top: -9px;" src="image/1.jpg" alt=""></span>
        <span style="left: 205px; top: 233px; width: 93px; height: 68px; z-index: 93;">
        <img style="left: -11px; top: -9px;" src="image/2.jpg" alt=""></span>
        <span style="left: 308px; top: 0px; width: 93px; height: 68px; z-index: 93;">
        <img style="left: -11px; top: -9px;" src="image/3.jpg" alt=""></span>
        <span style="left: 308px; top: 78px; width: 93px; height: 68px; z-index: 93;">
        <img style="left: -11px; top: -9px;" src="image/4.jpg" alt=""></span>
        <span style="left: 308px; top: 155px; width: 93px; height: 68px; z-index: 93;">
        <img style="left: -11px; top: -9px;" src="image/5.jpg" alt=""></span>
        <span style="left: 308px; top: 233px; width: 93px; height: 68px; z-index: 93;">
        <img style="left: -11px; top: -9px;" src="image/1.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>


(8)

<!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特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
<title>精美图片展示效果代码七,sky整理收集,站长特效网欢迎您。</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;
    }//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    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);
        }
    }//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    /* ==== 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;
        }
    }//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    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);
        }
    }//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    /* ==== 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>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<div id="center">
    <div id="slider">
        <div class="slide">
            <img class="diapo" src="image/1.jpg" alt="">
            <div class="text">
                <span class="title">站长特效网,专注于网页特效及广告代码,供站长和js爱好者参考。</div>
        </div>
        <div class="slide">
            <img class="diapo" src="image/2.jpg" alt="">
            <div class="text">
                <span class="title">zzjs.net,打造国内最帅的网页特效站。</div>
        </div>
        <div class="slide">
            <img class="diapo" src="image/3.jpg" alt="">
            <div class="text">
                <span class="title">觉得不错就收藏本站吧。</div>
        </div>
        <div class="slide">
            <img class="diapo" src="image/4.jpg" alt="">
            <div class="text">
                <span class="title">也可以推荐给你的朋友。</div>
        </div>
        <div class="slide">
            <img class="diapo" src="image/5.jpg" alt="">
            <div class="text">
                <span class="title">zzjs.net</span>站长zz,js特效,.net也精彩
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="image/1.jpg" alt="">
            <div class="text">
                <span class="title">站长特效</span>我们追求的不是数量,而是质量。 </div>
        </div>
        <div class="slide">
            <img class="diapo" src="image/2.jpg" alt="">
            <div class="text">
                <span class="title">zzjs.net</span>感谢您的光临,有什么意见或建议欢迎留言。</div>
        </div>
        <div class="slide">
            <img class="diapo" src="image/3.jpg" alt="">
            <div class="text">
                <span class="title">站长特效</span>有你更精彩。</div>
        </div>
        <div class="slide">
            <img class="diapo" src="image/4.jpg" alt="">
            <div class="text">
                <span class="title">zzjs.net</span>打造国内最帅的网页特效站。</div>
        </div>
        <div class="slide">
            <img class="diapo" src="image/5.jpg" alt="">
            <div class="text">
                <a class="title" href="http://www.zzjs.net">呵呵</a>这个特效挺酷吧。站长特效网,永不言败</div>
        </div>
    </div>
</div>
<script type="text/javascript">
/* ==== start script ==== */
slider.init();
</script>
</body>
</html>


(9)

<!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特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
<title>精美图片展示效果代码六,sky整理收集,站长特效网欢迎您。</title>
<style type="text/css">
html {
    overflow: hidden;
}
body {
    position: absolute;
    margin: 0px;
    padding: 0px;
    background: #111;
    width: 100%;
    height: 100%;
}
#screen {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 80%;
    height: 80%;
    background: #000;
}
#screen img {
    position: absolute;
    cursor: pointer;
    visibility: hidden;
    width: 0px;
    height: 0px;
}
#screen .tvover {
    border: solid #876;
    opacity: 1;
    filter: alpha(opacity=100);
}
#screen .tvout {
    border: solid #fff;
    opacity: 0.7;
}
#bankImages {
    display: none;
}
</style>
<script type="text/javascript">
var Library = {};
Library.ease = function () {
    this.target = 0;
    this.position = 0;
    this.move = function (target, speed)
    {
        this.position += (target - this.position) * speed;
    }
}
var tv = {
    /* ==== variables ==== */
    O : [],
    screen : {},
    grid : {
        size       : 4,  // 4x4 grid
        borderSize : 6,  // borders size
        zoomed     : false
    },
    angle : {
        x : new Library.ease(),
        y : new Library.ease()
    },
    camera : {
        x    : new Library.ease(),
        y    : new Library.ease(),
        zoom : new Library.ease(),
        focalLength : 750 // camera Focal Length
    },
    /* ==== init script ==== */
    init : function ()
    {//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
        this.screen.obj = document.getElementById('screen');
        var img = document.getElementById('bankImages').getElementsByTagName('img');
        this.screen.obj.onselectstart = function () { return false; }
        this.screen.obj.ondrag        = function () { return false; }
        /* ==== create images grid ==== */
        var ni = 0;
        var n = (tv.grid.size / 2) - .5;
        for (var y = -n; y <= n; y++)
        {
            for (var x = -n; x <= n; x++)
            {
                /* ==== create HTML image element ==== */
                var o = document.createElement('img');
                var i = img[(ni++) % img.length];
                o.className = 'tvout';
                o.src = i.src;
                tv.screen.obj.appendChild(o);
                /* ==== 3D coordinates ==== */
                o.point3D = {
                    x  : x,
                    y  : y,
                    z  : new Library.ease()
                };
                /* ==== push object ==== */
                o.point2D = {};
                o.ratioImage = 1;
                tv.O.push(o);
                /* ==== on mouse over event ==== */
                o.onmouseover = function ()
                {
                    if (!tv.grid.zoomed)
                    {
                        if (tv.o)
                        {
                            /* ==== mouse out ==== */
                            tv.o.point3D.z.target = 0;
                            tv.o.className = 'tvout';
                        }
                        /* ==== mouse over ==== */
                        this.className = 'tvover';
                        this.point3D.z.target = -.5;
                        tv.o = this;
                    }
                }
                /* ==== on click event ==== */
                o.onclick = function ()
                {
                    if (!tv.grid.zoomed)
                    {
                        /* ==== zoom in ==== */
                        tv.camera.x.target = this.point3D.x;
                        tv.camera.y.target = this.point3D.y;
                        tv.camera.zoom.target = tv.screen.w * 1.25;
                        tv.grid.zoomed = this;
                    } else {
                        if (this == tv.grid.zoomed){
                            /* ==== zoom out ==== */
                            tv.camera.x.target = 0;
                            tv.camera.y.target = 0;
                            tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
                            tv.grid.zoomed = false;
                        }
                    }
                }
                /* ==== 3D transform function ==== */
                o.calc = function ()
                {
                    /* ==== ease mouseover ==== */
                    this.point3D.z.move(this.point3D.z.target, .5);
                    /* ==== assign 3D coords ==== */
                    var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;
                    var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;
                    var z = this.point3D.z.position * tv.camera.zoom.position;
                    /* ==== perform rotations ==== */
                    var xy = tv.angle.cx * y  - tv.angle.sx * z;
                    var xz = tv.angle.sx * y  + tv.angle.cx * z;
                    var yz = tv.angle.cy * xz - tv.angle.sy * x;
                    var yx = tv.angle.sy * xz + tv.angle.cy * x;
                    /* ==== 2D transformation ==== */
                    this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
                    this.point2D.x = yx * this.point2D.scale;
                    this.point2D.y = xy * this.point2D.scale;
                    this.point2D.w = Math.round(
                                       Math.max(
                                         0,
                                         this.point2D.scale * tv.camera.zoom.position * .8
                                       )
                                     );
                    /* ==== image size ratio ==== */
                    if (this.ratioImage > 1)
                        this.point2D.h = Math.round(this.point2D.w / this.ratioImage);
                    else
                    {
                        this.point2D.h = this.point2D.w;
                        this.point2D.w = Math.round(this.point2D.h * this.ratioImage);
                    }
                }
                /* ==== rendering ==== */
                o.draw = function ()
                {
                    if (this.complete)
                    {
                        /* ==== paranoid image load ==== */
                        if (!this.loaded)
                        {
                            if (!this.img)
                            {
                                /* ==== create internal image ==== */
                                this.img = new Image();
                                this.img.src = this.src;
                            }
                            if (this.img.complete)
                            {
                                /* ==== get width / height ratio ==== */
                                this.style.visibility = 'visible';
                                this.ratioImage = this.img.width / this.img.height;
                                this.loaded = true;
                                this.img = false;
                            }
                        }
                        /* ==== HTML rendering ==== */
                        this.style.left = Math.round(
                                            this.point2D.x * this.point2D.scale +
                                            tv.screen.w - this.point2D.w * .5
                                          ) + 'px';
                        this.style.top  = Math.round(
                                            this.point2D.y * this.point2D.scale +
                                            tv.screen.h - this.point2D.h * .5
                                          ) + 'px';
                        this.style.width  = this.point2D.w + 'px';
                        this.style.height = this.point2D.h + 'px';
                        this.style.borderWidth = Math.round(
                                                   Math.max(
                                                     this.point2D.w,
                                                     this.point2D.h
                                                   ) * tv.grid.borderSize * .01
                                                 ) + 'px';
                        this.style.zIndex = Math.floor(this.point2D.scale * 100);
                    }
                }
            }
        }
        /* ==== start script ==== */
        tv.resize();
        mouse.y = tv.screen.y + tv.screen.h;
        mouse.x = tv.screen.x + tv.screen.w;
        tv.run();
    },
    /* ==== resize window ==== */
    resize : function ()
    {
        var o = tv.screen.obj;
        tv.screen.w = o.offsetWidth / 2;
        tv.screen.h = o.offsetHeight / 2;
        tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
        for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent)
        {
            tv.screen.x += o.offsetLeft;
            tv.screen.y += o.offsetTop;
        }
    },
    /* ==== main loop ==== */
    run : function ()
    {//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
        /* ==== motion ease ==== */
        tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);
        tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);
        tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);
        tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);
        tv.camera.zoom.move(tv.camera.zoom.target, .05);
        /* ==== angles sin and cos ==== */
        tv.angle.cx = Math.cos(tv.angle.x.position);
        tv.angle.sx = Math.sin(tv.angle.x.position);
        tv.angle.cy = Math.cos(tv.angle.y.position);
        tv.angle.sy = Math.sin(tv.angle.y.position);
        /* ==== loop through all images ==== */
        for (var i = 0, o; o = tv.O[i]; i++)
        {
            o.calc();
            o.draw();
        }
        /* ==== loop ==== */
        setTimeout(tv.run, 32);
    }
}
/* ==== global mouse position ==== */
var mouse = {
    x : 0,
    y : 0
}
document.onmousemove = function(e)
{
    if (window.event) e = window.event;
    mouse.x = e.clientX;
    mouse.y = e.clientY;
    return false;
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<div id="screen">
</div>
<div id="bankImages">
    <img alt="" src="/image/1.jpg">
    <img alt="" src="/image/2.jpg">
    <img alt="" src="/image/3.jpg">
    <img alt="" src="/image/4.jpg">
    <img alt="" src="/image/5.jpg">
    <img alt="" src="/image/1.jpg">
    <img alt="" src="/image/2.jpg">
    <img alt="" src="/image/3.jpg">
    <img alt="" src="/image/4.jpg">
    <img alt="" src="/image/5.jpg">
    <img alt="" src="/image/1.jpg">
    <img alt="" src="/image/2.jpg">
    <img alt="" src="/image/3.jpg">
    <img alt="" src="/image/4.jpg">
    <img alt="" src="/image/5.jpg">
    <img alt="" src="/image/1.jpg"> </div>
<script type="text/javascript">
    /* ==== start script ==== */
    onresize = tv.resize;
    tv.init();
</script>
</body>
</html>


(10)

<!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特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网,站长必备js特效及广告代码。大量高质量js特效,提供高质量广告代码下载,尽在站长特效网" />
<title>精美图片展示效果代码三,sky整理收集,站长特效网欢迎您。</title>
<style type="text/css">
html {
    overflow: hidden;
}
body {
    margin: 0px;
    padding: 0px;
    background: #000;
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: crosshair;
}
#diapoContainer {
    position: absolute;
    left: 10%;
    top: 10%;
    width: 80%;
    height: 80%;
    background: #222;
    overflow: hidden;
}
.imgDC {
    position: absolute;
    cursor: pointer;
    border: #000 solid 2px;
    filter: alpha(opacity=90);
    opacity: 0.9;
    visibility: hidden;
}
.spaDC {
    position: absolute;
    filter: alpha(opacity=20);
    opacity: 0.2;
    background: #000;
    visibility: hidden;
}
.imgsrc {
    position: absolute;
    width: 120px;
    height: 67px;
    visibility: hidden;
    margin: 4%;
}
#bkgcaption {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 6%;
    background:#1a1a1a;
}
#caption {
    position: absolute;
    font-family: arial, helvetica, verdana, sans-serif;
    white-space: nowrap;
    color: #fff;
    bottom: 0px;
    width: 100%;
    left: -10000px;
    text-align: center;
}
</style>
<script type="text/javascript">
var xm;
var ym;
/* ==== onmousemove event ==== */
document.onmousemove = function(e){
    if(window.event) e=window.event;
    xm = (e.x || e.clientX);
    ym = (e.y || e.clientY);
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
/* ==== window resize ==== */
function resize() {
    if(diapo)diapo.resize();
}
onresize = resize;
/* ==== opacity ==== */
setOpacity = function(o, alpha){
    if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
}
/* ===== encapsulate script ==== */
diapo = {
    O : [],
    DC : 0,
    img : 0,
    txt : 0,
    N : 0,
    xm : 0,
    ym : 0,
    nx : 0,
    ny : 0,
    nw : 0,
    nh : 0,
    rs : 0,
    rsB : 0,
    zo : 0,
    tx_pos : 0,
    tx_var : 0,
    tx_target : 0,
    /////// script parameters ////////
    attraction : 2,
    acceleration : .9,
    dampening : .1,
    zoomOver : 2,
    zoomClick : 6,
    transparency : .8,
    font_size: 18,
    //////////////////////////////////
    /* ==== diapo resize ==== */
    resize : function(){
        with(this){
            nx = DC.offsetLeft;
            ny = DC.offsetTop;
            nw = DC.offsetWidth;
            nh = DC.offsetHeight;
            txt.style.fontSize = Math.round(nh / font_size) + "px";
            if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();
            rsB = rs;
        }
    },
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    /* ==== create diapo ==== */
    CDiapo : function(o){
        /* ==== init variables ==== */
        this.o        = o;
        this.x_pos    = this.y_pos    = 0;
        this.x_origin = this.y_origin = 0;
        this.x_var    = this.y_var    = 0;
        this.x_target = this.y_target = 0;
        this.w_pos    = this.h_pos    = 0;
        this.w_origin = this.h_origin = 0;
        this.w_var    = this.h_var    = 0;
        this.w_target = this.h_target = 0;
        this.over     = false;
        this.click    = false;
        /* ==== create shadow ==== */
        this.spa = document.createElement("span");
        this.spa.className = "spaDC";
        diapo.DC.appendChild(this.spa);
        /* ==== create thumbnail image ==== */
        this.img = document.createElement("img");
        this.img.className = "imgDC";
        this.img.src = o.src;
        this.img.O = this;
        diapo.DC.appendChild(this.img);
        setOpacity(this.img, diapo.transparency);
        /* ==== mouse events ==== */
        this.img.onselectstart = new Function("return false;");
        this.img.ondrag = new Function("return false;");
        this.img.onmouseover = function(){
            diapo.tx_target=0;
            diapo.txt.innerHTML=this.O.o.alt;
            this.O.over=true;
            setOpacity(this,this.O.click?diapo.transparency:1);
        }
        this.img.onmouseout = function(){
            diapo.tx_target=-diapo.nw;
            this.O.over=false;
            setOpacity(this,diapo.transparency);
        }
        this.img.onclick = function() {
            if(!this.O.click){
                if(diapo.zo && diapo.zo != this) diapo.zo.onclick();
                this.O.click = true;
                this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;
                this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;
                diapo.zo = this;
                setOpacity(this,diapo.transparency);
            } else {
                this.O.click = false;
                this.O.over = false;
                this.O.resize();
                diapo.zo = 0;
            }
        }
        /* ==== rearrange thumbnails based on "imgsrc" images position ==== */
        this.resize = function (){
            with (this) {
                x_origin = o.offsetLeft;
                y_origin = o.offsetTop;
                w_origin = o.offsetWidth;
                h_origin = o.offsetHeight;
            }
        }
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
        /* ==== animation function ==== */
        this.position = function (){
            with (this) {
                /* ==== set target position ==== */
                w_target = w_origin;
                h_target = h_origin;
                if(over){
                    /* ==== mouse over ==== */
                    w_target = w_origin * diapo.zoomOver;
                    h_target = h_origin * diapo.zoomOver;
                    x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));
                    y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));
                } else {
                    /* ==== mouse out ==== */
                    x_target = x_origin;
                    y_target = y_origin;
                }
                if(click){
                    /* ==== clicked ==== */
                    w_target = w_origin * diapo.zoomClick;
                    h_target = h_origin * diapo.zoomClick;
                }
                /* ==== magic spring equations ==== */
                x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
                y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
                w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
                h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
                diapo.rs += (Math.abs(x_var) + Math.abs(y_var));
                /* ==== html animation ==== */
                with(img.style){
                    left   = Math.round(x_pos) + "px";
                    top    = Math.round(y_pos) + "px";
                    width  = Math.round(Math.max(0, w_pos)) + "px";
                    height = Math.round(Math.max(0, h_pos)) + "px";
                    zIndex = Math.round(w_pos);
                }
                with(spa.style){
                    left   = Math.round(x_pos + w_pos * .1) + "px";
                    top    = Math.round(y_pos + h_pos * .1) + "px";
                    width  = Math.round(Math.max(0, w_pos * 1.1)) + "px";
                    height = Math.round(Math.max(0, h_pos * 1.1)) + "px";
                    zIndex = Math.round(w_pos);
                }
            }
        }
    },
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
    /* ==== main loop ==== */
    run : function(){
        diapo.xm = xm - diapo.nx;
        diapo.ym = ym - diapo.ny;
        /* ==== caption anim ==== */
        diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
        diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
        /* ==== images anim ==== */
        for(var i in diapo.O) diapo.O[i].position();
        /* ==== loop ==== */
        setTimeout("diapo.run();", 16);
    },
    /* ==== load images ==== */
    images_load : function(){
        // ===== loop until all images are loaded =====
        var M = 0;
        for(var i=0; i<diapo.N; i++) {
            if(diapo.img[i].complete) {
                diapo.img[i].style.position = "relative";
                diapo.O[i].img.style.visibility = "visible";
                diapo.O[i].spa.style.visibility = "visible";
                M++;
            }
            resize();
        }
        if(M<diapo.N) setTimeout("diapo.images_load();", 128);
    },
    /* ==== init script ==== */
    init : function() {
        diapo.DC = document.getElementById("diapoContainer");
        diapo.img = diapo.DC.getElementsByTagName("img");
        diapo.txt = document.getElementById("caption");
        diapo.N = diapo.img.length;
        for(i=0; i<diapo.N; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));
        diapo.resize();
        diapo.tx_pos = -diapo.nw;
        diapo.tx_target = -diapo.nw;
        diapo.images_load();
        diapo.run();
    }
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<div id="diapoContainer">
    <img class="imgsrc" src="/image/1.jpg" alt="站长特效一号图片">
    <img class="imgsrc" src="/image/2.jpg" alt="站长特效二号图片">
    <img class="imgsrc" src="/image/3.jpg" alt="站长特效三号图片">
    <img class="imgsrc" src="/image/4.jpg" alt="站长特效四号图片">
    <img class="imgsrc" src="/image/5.jpg" alt="站长特效五号图片">
    <img class="imgsrc" src="/image/1.jpg" alt="站长特效六号图片">
    <img class="imgsrc" src="/image/2.jpg" alt="站长特效七号图片">
    <img class="imgsrc" src="/image/3.jpg" alt="站长特效八号图片">
    <div id="bkgcaption">
    </div>
    <div id="caption">
    </div>
</div>
<script type="text/javascript">
/* ==== start script ==== */
function dom_onload() {
    if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
</script>
</body>
</html>


阅读更多
个人分类: JavaScript
想对作者说点什么? 我来说一句

漂亮的图片转动代码

2012年12月19日 144KB 下载

JS图片上下切换效果

2011年07月01日 491KB 下载

图片的动态切换效果@@@

2009年08月04日 80KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭