翻页特效。。。

来源：互联网发布：淘宝买到烂水果怎么办编辑：程序博客网时间：2024/04/30 10:02

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Book</title>
<style type="text/css">
html, body {
margin:0px;
}

body {
text-align:center;
}

#book {
/*设置书本*/
width:700px;
margin:auto;
}

#book .left {
/*设置左边*/
float:left;
clear:left;
}

#book .right {
/*设置右边*/
float:right;
clear:right;
}

.book_text {
    width:100px;
    height:20px;
    line-height:20px;
    font-size:12px;
    position:absolute;
    z-index:9999;
}
</style>
<script type="text/javascript">
(function (bool) {
//兼容FF一些方法
    var html;

    window.IE = /MSIE/.test(window.navigator.userAgent);
    window.FF = bool;

    if (bool) {

        html = window.HTMLElement.prototype;

        window.__defineGetter__("event", function () {
        //兼容Event对象
            var o = arguments.callee;

            do {
                if (o.arguments[0] instanceof Event) return o.arguments[0];
            } while (o = o.caller);

            return null;
        });

        html.__defineSetter__("className", function (t_v) {
            this.setAttribute("class", t_v);
        });

        html.__defineGetter__("className", function () {
            return this.getAttribute("class");
        });

    }

})(/Firefox/.test(window.navigator.userAgent));

var Class = {
//创建类
    create : function () {
        return function () {
            this.initialize.apply(this, arguments);
        };
    }
};

var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};

var $A = function (a) {
//转换数组
return a ? Array.apply(null, a) : new Array;
};

Function.prototype.bind = function () {
//绑定事件
    var wc = this, a = $A(arguments), o = a.shift();
    return function () {
        wc.apply(o, a.concat($A(arguments)));
    };
};

Object.extend = function (a, b) {
//追加方法
for (var i in b) a[i] = b[i];
return a;
};

Object.extend(Object, {

    addEvent : function (a, b, c, d) {
    //添加函数
        var $ni, $nf;
        if (b.constructor != Array) { $ni = $nf = b; }
        else { $ni = b[0], $nf = b[1]; }

        if (a.attachEvent) a.attachEvent($ni, c);
        else a.addEventListener($nf.replace(/^on/, ""), c, d || false);
        return c;
    },

    delEvent : function (a, b, c, d) {
    //删除函数
        var $ni, $nf;
        if (b.constructor != Array) { $ni = $nf = b; }
        else { $ni = b[0], $nf = b[1]; }

        if (a.detachEvent) a.detachEvent($ni, c);
        else a.removeEventListener($nf.replace(/^on/, ""), c, d || false);
        return c;
    }

});

var Book = Class.create();

Book.prototype = {

    initialize : function (book, ltext, rtext, width, height) {
    //初始化参数
        var wc = this;
        wc.book = book, wc.width = width, wc.height = height;
        (wc.left = { img : wc.create_img(), text : ltext }).text.onclick = wc.previous.bind(wc);
        (wc.right = { img : wc.create_img(), text : rtext }).text.onclick = wc.next.bind(wc);
        wc.temp = { left : null, right : null };
        wc.mark = 1, wc.ing = false, wc.images = [];
        wc.timer = 0, wc.time = window.FF ? 10 : 1;
    },

    offset : function (o) {
    //设置定位
        var $x = $y = 0;
        do { $x += o.offsetLeft, $y += o.offsetTop; }
        while (o = o.offsetParent);
        return { x : $x, y : $y };
    },

    load_image : function (url) {
    //加载图片
        return (new Image).src = url;
    },

    create_img : function (n) {
    //返回图片元素对象
        var wc = this, img = document.createElement("img");
        if (!n) { img.style.width = wc.width + "px", img.style.height = wc.height + "px"; }
        return img;
    },

    previous : function () {
        var wc = this, temp = wc.temp, lpos = wc.offset(wc.left.img), rpos = wc.offset(wc.right.img);
        if (!wc.ing && wc.mark > 2) {
            wc.ing = true;
            temp.left = wc.left.img.cloneNode(true), (temp.right = wc.right.img.cloneNode(true)).src = wc.images[wc.mark - 2];
            temp.left.style.position = temp.right.style.position = "absolute";
            temp.right.style.width = "0px";
            temp.left.style.left = lpos.x + "px", temp.right.style.left = rpos.x + "px";
            temp.left.style.top = temp.right.style.top = rpos.y + "px";

            wc.left.img.src = wc.images[wc.mark - 3];
            wc.mark -= 2;
            document.body.appendChild(temp.right), document.body.appendChild(temp.left)
            wc.timer = window.setInterval(
                wc.change.bind(
                    wc
                    , { img : temp.right, width : 0 }
                    , { img : temp.left, width : wc.offset(wc.left.img).x + wc.width }
                    , { n : 0 }
                    , wc.right.img
                )
            , wc.time);
        }
    },

    next : function () {
        var wc = this, temp = wc.temp, lpos = wc.offset(wc.left.img), rpos = wc.offset(wc.right.img);
        if (!wc.ing && wc.mark < wc.images.length - 2) {
            wc.ing = true;
            (temp.left = wc.left.img.cloneNode(true)).src = wc.images[++ wc.mark], temp.right = wc.right.img.cloneNode(true);
            temp.left.style.position = temp.right.style.position = "absolute";
            temp.left.style.width = "0px";
            temp.left.style.left = lpos.x + wc.width + "px", temp.right.style.left = rpos.x + "px";
            temp.left.style.top = temp.right.style.top = rpos.y + "px";

            wc.right.img.src = wc.images[++ wc.mark];
            document.body.appendChild(temp.left), document.body.appendChild(temp.right);
            wc.timer = window.setInterval(
                wc.change.bind(
                    wc
                    , { img : temp.left, width : wc.offset(wc.left.img).x + wc.width }
                    , { img : temp.right, width : 0 }
                    , { n : 0 }
                    , wc.left.img
                )
            , wc.time);
        }
    },

    change : function (a, b, c, o) {
    //未知
        var wc = this, width = Math.floor(wc.width / 6);
        if (c.n < 10) {
            if (c.n < 6) {
                b.img.style.width = (c.n < 5 ? b.img.offsetWidth - width : "0") + "px";
                if (b.width) b.img.style.left = b.width - parseInt(b.img.style.width) + "px";
            } else if (c.n == 6) b.img.parentNode.removeChild(b.img);
            if (c.n > 3) {
                a.img.style.width = a.img.offsetWidth + width + "px";
                if (a.width) a.img.style.left = a.width - parseInt(a.img.style.width) + "px";
            }
            c.n ++;
            //window.setTimeout(arguments.callee.bind(wc, a, b, ++ c, o), 10);
        } else {
            window.clearInterval(wc.timer);
            wc.timer = 0, wc.ing = false, o.src = a.img.src;
            a.img.parentNode.removeChild(a.img);
            wc.temp.left = wc.temp.right = null;
        }
    },

    init : function (is) {
    //加载所有图片
        var wc = this, imgs = wc.images, boks = wc.book.getElementsByTagName("div"), i = 0, lpos = rpos = null;

        for (; i < is.length ; i ++) imgs[i] = wc.load_image(is[i]);
        if (imgs.length > 0) wc.left.img.src = imgs[0];
        if (imgs.length > 1) wc.right.img.src = imgs[1];
        boks[0].appendChild(wc.left.img), boks[1].appendChild(wc.right.img);

        lpos = wc.offset(wc.left.img), rpos = wc.offset(wc.right.img);

        with (wc) {
            left.text.style.left = lpos.x + "px"
            , right.text.style.left = rpos.x + wc.width - right.text.offsetWidth + "px"
            , left.text.style.top = right.text.style.top = lpos.y + wc.height - left.text.offsetHeight + "px";
        }
    }

};

window.onload = function () {
    var wc = new Book($("book"), $("book_previous"), $("book_next"), 350, 480);

    wc.init([
        "EbookPicHandler1.gif"
        , "EbookPicHandler2.gif"
        , "EbookPicHandler3.gif"
        , "EbookPicHandler4.gif"
    ]);
};

//javascript:(function(is){var i,r=/"([^"]+)"/,o={},a=[];for(i=0;i<is.length;i++){if(is[i].nodeType!=3){if(is[i].tagName=="IMG"){if(!o[is[i].src])o[is[i].src]=1;}else if(r.test(is[i].currentStyle.backgroundImage)){if(!o[RegExp.$1])o[RegExp.$1]=1;}}}for(i in o)a[a.length]=i;document.write('<img alt="" src="'+a.join('" //><br //><img alt="" src="')+'" //>')})(document.getElementsByTagName("*"));
</script>
</head>
<body>

<div id="book">
<div class="left"></div>
<div class="right"></div>
</div>
<div id="book_previous" class="book_text">previous</div>
<div id="book_next" class="book_text">next</div>

</body>
</html>