【收藏】类似于书本的翻页特效 -- 叁柒設計_三七设计 Three Seven Design Workroom -- 日志展示

HTML代码

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