<!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=utf-8" />
<title>自定义div用滚动条</title>
<meta name="description" content=" 内容介绍不超过100个中文">
<meta name="keywords" content=" 内容相关关键词3-5个">
<link href="../css/base.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.4.3.min.js"></script>
<style type="text/css">
.book{ position:relative; left:50%; top:30px; width:1200px; height:800px; border:1px solid #ccc; margin-left:-600px; background:#eee;}
.page_left_old{ position:absolute; left:0; top:0; height:100%; width:50%; z-index:10; z-index:20;}
.page_left_new{ position:absolute; left:100%; top:0; height:100%; width:0; z-index:10; z-index:60; overflow:hidden;}
.page_left_new .overlight{ position:absolute; right:0; top:0; max-width:200px; width:100%; height:100%; background:url(../images/overlight.png) repeat-y right 0; z-index:70;}
.page_right_new{ position:absolute; left:50%; top:0; width:50%; height:100%; background:url(../images/loading.gif) no-repeat center center; z-index:30;}
.left_page img, .right_page img{ max-width:100%;}
.page_right_old{ position:absolute; left:50%; top:0; width:50%; height:100%; overflow:hidden; z-index:50;}
.btn_next{ position:absolute; width:50%; height:100%; left:50%; top:0; background:transparent; z-index:100;}
.btn_prev{ position:absolute; width:50%; height:100%; left:0; top:0; background:transparent; z-index:100;}
.book .content{ position:relative; overflow:hidden;}
.book .content img{ position:relative; width:600px; height:800px;}
.book .wrap{ position:relative; width:100%; height:100%; overflow:hidden;}
</style>
</head>
<body>
<div class="book" id="book">
<a class="btn_prev" onclick="book.goPrev();"></a>
<a class="btn_next" onclick="book.goNext();"></a>
<div class="page_left_old">
<div class="content"></div>
</div>
<div class="page_left_new">
<div class="wrap">
<div class="overlight"></div>
<div class="content"></div>
</div>
</div>
<div class="page_right_old">
<div class="content"></div>
</div>
<div class="page_right_new">
<div class="content"></div>
</div>
</div>
<script type="text/javascript">
var pageData = ["../images/cover1.jpg","../images/1.jpg","../images/2.jpg","../images/3.jpg","../images/4.jpg","../images/5.jpg","../images/6.jpg","../images/7.jpg"];
var book = new JWBook('book',pageData);
function JWBook(id,data){
var wrapper = $("#"+id);
var SLOWINOUT = [0,0.006,0.018,0.036,0.06,0.09,0.126,0.168,0.216,0.27,0.33,0.396,0.468,0.54,0.612,0.678,0.738,0.792,0.84,0.882,0.918,0.948,0.972,0.99,1];
var pageLeftOld = wrapper.find(".page_left_old");
var pageLeftOldContent = pageLeftOld.find(".content");
var pageLeftNew = wrapper.find(".page_left_new");
var pageLeftNewContent = pageLeftNew.find(".content");
var pageLeftNewWrap = pageLeftNew.find(".wrap");
var pageRightOld = wrapper.find(".page_right_old");
var pageRightOldContent = pageRightOld.find(".content");
var pageRightNew = wrapper.find(".page_right_new");
var pageRightNewContent = pageRightNew.find(".content");
var overLight = wrapper.find(".overlight");
var pageData = data;
var index;
var step;
var pageWidth = 600;
var pageHeight = 800;
var radius;
var ifUnderMove = false;
var baseDeg;
function init(){
index = 0;
pagePrepare(); //加载第一张页面
wrapper.find(".content").css({width:"600px"});
radius = Math.sqrt((pageWidth*pageWidth+pageHeight*pageHeight)*0.25);
baseDeg = Math.atan(pageWidth/pageHeight);
}
//下一页
function _goNext(){
if(ifUnderMove){
return;
}
if(index>pageData.length-1){
//没有页面了
alert("没有页面了");
return;
}
index = index + 2;
step = 0;
console.debug("index:"+index);
pageLeftNew.css({left:"100%",width:"50%"});
pageSliding();
ifUnderMove = true;
}
this.goNext = _goNext;
//上一页
function _goPrev(){
if(ifUnderMove){
return;
}
if(index==0){
//没有页面了
alert("到最前面了");
return;
}
step = 0;
index = index - 2;
pageLeftOldContent[0].cancelload = true;
pageLeftNewContent[0].cancelload = true;
pageRightNewContent[0].cancelload = true;
pageLeftNewContent.find('img')[0].src = pageData[index+1];
if(index+3<pageData.length){
if(pageRightNewContent.find('img').length==0){
pageRightNewContent.html("<img src=\""+pageData[index+2]+"\" />");
}else{
pageRightNewContent.find('img')[0].src = pageData[index+2];
}
}else{
pageRightNewContent.empty();
}
pageLeftNew.css({right:"50%",width:"50%",left:"auto",zIndex:10});
setTimeout(pageSlidingBack,25);
ifUnderMove = true;
}
this.goPrev = _goPrev;
//加载页面到pageNext中
function pagePrepare(){
if(index==0){
//第一次加载需要加载三张,第一页，左边的第一页，和右边的下一页
loadPage(pageData[index],pageRightOldContent);
}
if(index+1 < pageData.length){
loadPage(pageData[index+1],pageLeftNewContent);
}else{
//没有页面了
//pageLeftNewContent.html("");
}
if(index+2 < pageData.length){
loadPage(pageData[index+2],pageRightNewContent);
}else{
pageRightNewContent.html("");
pageRightNew.css({background:"#ffffff"});
//没有页面了
}
}
function loadPage(url,wrap){
console.debug("loadpage");
wrap[0].cancelload = false;
var img = new Image();
/*img.onload = (function(){ return function(){
alert('s');
wrap.append(img);
}})()
*/
img.onload = function(){
if(wrap[0].cancelload != true){
wrap.html("").append(img);
}
}
img.src = url;
}
function pageSliding(){
step++;
if(step==SLOWINOUT.length){
//最后一步后的收尾工作
pageRightOld.css({width:"50%"});
pageLeftNew.css({left:"100%", width:0});
pagePrepare();
ifUnderMove = false;
return;
}
//overlight, opacity from 0 -> 100 -> 0;
var opacity;
var stepRate = step/(SLOWINOUT.length-1);
if(stepRate<0.5){
opacity = stepRate*2;
}else{
opacity = (1-stepRate)*2;
}
overLight.css({opacity:opacity});
var pageRightOldWidth = (1-SLOWINOUT[step])*50;
pageRightOld.css({width:pageRightOldWidth+"%"});
var pageLeftNewWidth = SLOWINOUT[step]*50;
var pageLeftNewLeft = (1-SLOWINOUT[step]*0.5)*100 - pageLeftNewWidth;
if(pageLeftNewLeft < 0){
pageLeftNewLeft = 0;
}
//rotate of pageLeftNew: from 10deg - 0deg;
var rotate = (1-stepRate)*10;
rotateArc = Math.round(rotate/180*Math.PI*1000)/1000; //转化成弧度, 保留三位小数;
var pageLeftNewWrapWidth = pageLeftNewWidth*0.01*2*pageWidth;
//console.debug("pageLeftNewWrapWidth:"+pageLeftNewWrapWidth);
var _baseDeg = Math.atan(pageLeftNewWrapWidth/pageHeight);
var _radius = Math.sqrt((pageLeftNewWrapWidth*pageLeftNewWrapWidth+pageHeight*pageHeight)*0.25); //为pageLeftNew显示出来的矩形部分中心点到其中一个角的距离。
var leftOffset = Math.sin(_baseDeg+rotateArc)*_radius - pageLeftNewWrapWidth/2;
//var topOffset = pageHeight*0.5 - Math.cos(_baseDeg+rotateArc)*_radius;
var pageLeftNewHeight = Math.sin(rotateArc)*pageLeftNewWrapWidth+Math.cos(rotateArc)*pageHeight;
console.debug("_radius:"+_radius+",_baseDeg:"+_baseDeg+",pageLeftNewHeight:"+pageLeftNewHeight);
//console.debug("pageLeftNewWidth:"+pageLeftNewWidth+"");
var pageLeftNewWrapTop = (pageLeftNewHeight-pageHeight)/2;
var pageLeftNewTop = pageLeftNewHeight-pageHeight;
//元素偏转后的左偏移
pageLeftNewWrap.css({transf
HTML5 杂志翻页效果
5星 · 超过95%的资源 需积分: 50 198 浏览量
2014-04-01
14:32:26
上传
评论
收藏 3.48MB RAR 举报 
.rar （33个子文件） 
html5 书本翻页效果v2.0 
html5 书本翻页效果v2.0.rar 1.16MB images 
overlight.png 2KB
2.jpg 131KB 6.jpg 159KB 1.jpg 95KB ico_12.png 1KB 4.jpg 181KB 5.jpg 153KB cover1.jpg 147KB
loading.gif 5KB 7.jpg 119KB ico_13.png 2KB 3.jpg 178KB js 
jwscroll.js 4KB jquery-1.4.3.min.js 76KB html 
demo.html 11KB css base.css 1KB html5 书本单面翻页效果 images overlight.png 2KB 2.jpg 131KB 6.jpg 159KB 1.jpg 95KB ico_12.png 1KB 4.jpg 181KB 5.jpg 153KB cover1.jpg 147KB loading.gif 5KB 7.jpg 119KB ico_13.png 2KB 3.jpg 178KB js jwscroll.js 4KB jquery-1.4.3.min.js 76KB html demo.html 8KB css base.css 1KB
- 1
- 2
前往页