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