翻页特效。。。

原创 2007年09月20日 14:09:00

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

Android实现翻页特效

android-flip 是一个能够轻松帮你实现水平以及竖直翻页特效的库,但是在判断翻页的时候有bug,我们需要在FlipCards.java中找到这一段: if (Math....
  • syfyw
  • syfyw
  • 2014年01月17日 18:29
  • 3024

UIKit 图片的移动、位移、旋转、缩放、翻转、翻页等特效的使用

UIKit 图片的移动、位移、旋转、缩放、翻转、翻页等特效的使用 OC的UIKit的框架,提供了许多对图片的出来函数,在这里只做几种简单的图片处理特效。 一边情况下 ,移动imageview ...

Shader特效——“翻页”的实现 【GLSL】

参考自:http://webvfx.rectalogic.com/examples_2transition-shader-pagecurl_8html-example.html 效果图 ...

Jquery 鼠标等待1秒后 翻页特效(下到上)

今天项目碰到了这个特效需求~~ 搞了一个下午 终于与现在这个时候写出来了   特此留念----   var myTimer; var runStatu = 0; $(".wall-la...

图片翻页特效

1. 图片翻页特效:效果:多张图片逐个翻页显示,也可用鼠标点击图片区域下方的页码手动翻页。每张图片上都可添加链接引向不同位置的帖子。演示:在专刊盛世奥运之奢华盘点上半部分中间“华美谢幕”那部分有演示,...
  • Jikycc
  • Jikycc
  • 2011年04月25日 22:57
  • 2041

HTML5电子书翻页动画特效

  • 2017年09月08日 10:24
  • 861KB
  • 下载

相册翻页效果div+css+jquery特效

  • 2014年09月16日 02:24
  • 1.69MB
  • 下载

移动端webApp滚屏特效、HTML5+CSS3手机整屏滚动 、mobile网站翻页滚屏特效!

HTML5+CSS3动画滚屏,jQuery触摸手机全屏上下滑动滚屏特效,JS+css3实现手机端滚屏效果,移动端制作满屏滚动效果, 移动端web网站(移动端web开发/APP开发)、移动端App模版、...

左右翻页相册功能插件特效代码

  • 2012年10月12日 20:06
  • 345KB
  • 下载

横向图片滚动带翻页特效

  • 2016年03月18日 16:28
  • 59KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:翻页特效。。。
举报原因:
原因补充:

(最多只允许输入30个字)