网页翻页效果的实现

转载 2007年09月21日 10:04: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 != "object") { $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 != "object") { $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> 


 

静态页面翻页效果

灵感缘自经典里面的静态页面分页效果。我换了一种方式来完成静态页面翻页效果。如果不喜欢有滚动条,可以在CSS里面拿掉。我个人偏向这种翻页效果,即使客户屏蔽了js,还是能够完整浏览 。兼容 IE/Fire...
  • sailflying
  • sailflying
  • 2006年12月14日 14:25
  • 1125

纯CSS3实现真实翻书效果

研读以下代码及其注释,让你轻松掌握如何用 纯CSS3实现真实翻书效果。 可以参考代码下的参考内容...
  • b954960630
  • b954960630
  • 2016年12月02日 13:36
  • 1984

实现手机滑动翻页效果

var nStartX,nEndX,nDetalX;          function touchToNextPage(){              document.addEventListen...
  • u011011025
  • u011011025
  • 2015年06月11日 16:32
  • 2188

html中翻书特效实现

本实例采用html5+CSS3,使用DIV布局,代码中加入了一些函数
  • u014687186
  • u014687186
  • 2014年07月05日 12:36
  • 781

js实现翻页效果

js实现翻页效果 转自:http://blog.csdn.net/redeagle_gbf/article/details/20044199 分页 ...
  • cai7095576
  • cai7095576
  • 2014年03月10日 20:21
  • 2198

布局demo三:viewPager实现翻页效果

使用ViewPager实现高仿launcher拖动效果            今天用ViewPager 这个类实现了同样的效果,这样代码更少,但是效果是一样的。ViewPager是实现左右...
  • hualizide
  • hualizide
  • 2012年12月21日 14:43
  • 3072

Android翻页效果原理实现之曲线的实现

尊重原创转载请注明:From AigeStudio(http://blog.csdn.net/aigestudio)Power by Aige 侵权必究! 炮兵镇楼 上一节我们通过引入折线实现...
  • aigestudio
  • aigestudio
  • 2015年01月14日 16:58
  • 14284

自定义View很简单 - Android翻页效果原理实现之翻页的尝试

尊重原创转载请注明:From AigeStudio(http://blog.csdn.net/aigestudio)Power by Aige 侵权必究! 炮兵镇楼 在《自定义控件其实很简...
  • sun20209527
  • sun20209527
  • 2015年11月05日 15:43
  • 7748

cocos2d - JS 实现翻页效果

cocos2d - JS 实现翻页效果 :显示效果 :说明 :Demo实现了常见的翻页效果 , 还有点击选关模式的放大效果 . 翻页效果主层 JavaScript 代码 :var SelectPage...
  • yu__jiaoshou
  • yu__jiaoshou
  • 2017年01月17日 15:38
  • 1457

viewpager实现翻页效果(fragment)

viewpager的运用核心在于适配器的编写,及最终的setadapter(adapter) 谷歌官方认为,ViewPager应该和Fragment一起使用时,此时ViewPager的适配器是Fra...
  • qq_31443653
  • qq_31443653
  • 2016年05月25日 20:15
  • 724
收藏助手
不良信息举报
您举报文章:网页翻页效果的实现
举报原因:
原因补充:

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