HTML5酷炫动画集锦
HTML5酷炫动画集锦
本人根据CSDN上下载的html5页面源码整理的酷炫动画集锦，收藏起来以应对将来的项目开发。
1.HTML5 Canvas圆盘抽奖：
实现效果截图：
(1) jsp页面部分代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas圆盘抽奖应用DEMO演示</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/main.js">
</script>
</head>
<body>
<div class="turnplate_box">
<canvas id="myCanvas" width="300px" height="300px">抱歉！浏览器不支持。</canvas>
<canvas id="myCanvas01" width="200px" height="200px">抱歉！浏览器不支持。</canvas>
<canvas id="myCanvas03" width="200px" height="200px">抱歉！浏览器不支持。</canvas>
<canvas id="myCanvas02" width="150px" height="150px">抱歉！浏览器不支持。</canvas>
<button id="tupBtn" class="turnplatw_btn"></button>
</div>
<!-- 更改系统默认弹窗 -->
<script type="text/javascript">
window.alert = function(str)
{
var shield = document.createElement("DIV");
shield.id = "shield";
shield.style.position = "absolute";
shield.style.left = "50%";
shield.style.top = "50%";
shield.style.width = "280px";
shield.style.height = "150px";
shield.style.marginLeft = "-140px";
shield.style.marginTop = "-110px";
shield.style.zIndex = "25";
var alertFram = document.createElement("DIV");
alertFram.id="alertFram";
alertFram.style.position = "absolute";
alertFram.style.width = "280px";
alertFram.style.height = "150px";
alertFram.style.left = "50%";
alertFram.style.top = "50%";
alertFram.style.marginLeft = "-140px";
alertFram.style.marginTop = "-110px";
alertFram.style.textAlign = "center";
alertFram.style.lineHeight = "150px";
alertFram.style.zIndex = "300";
strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
strHtml += " <li style=\"background:#626262;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white\">[中奖提醒]</li>\n";
strHtml += " <li style=\"background:#787878;text-align:center;font-size:12px;height:95px;line-height:95px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#DCC722\">"+str+"</li>\n";
strHtml += " <li style=\"background:#626262;text-align:center;font-weight:bold;height:30px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\"确 定\" onclick=\"doOk()\" style=\"width:80px;height:20px;background:#626262;color:white;border:1px solid white;font-size:14px;line-height:20px;outline:none;margin-top: 4px\"/></li>\n";
strHtml += "</ul>\n";
alertFram.innerHTML = strHtml;
document.body.appendChild(alertFram);
document.body.appendChild(shield);
this.doOk = function(){
alertFram.style.display = "none";
shield.style.display = "none";
}
alertFram.focus();
document.body.onselectstart = function(){return false;};
}
</script>
<div style="text-align:center;clear:both;margin-top:50px">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html>
(2) js脚本：main.js
$(document).ready(function(){
//旋转角度
var angles;
//可抽奖次数
var clickNum = 5;
//旋转次数
var rotNum = 0;
//中奖公告
var notice = null;
//转盘初始化
var color = ["#626262","#787878","rgba(0,0,0,0.5)","#DCC722","white","#FF4350"];
var info = ["谢谢参与"," 1000"," 10"," 500"," 100"," 4999"," 1"," 20"];
var info1 = ['再接再厉',' 元',' 元',' 淘金币',' 元',' 淘金币',' 元',' 淘金币']
canvasRun();
$('#tupBtn').bind('click',function(){
if (clickNum >= 1) {
//可抽奖次数减一
clickNum = clickNum-1;
//转盘旋转
runCup();
//转盘旋转过程“开始抽奖”按钮无法点击
$('#tupBtn').attr("disabled", true);
//旋转次数加一
rotNum = rotNum + 1;
//“开始抽奖”按钮无法点击恢复点击
setTimeout(function(){
alert(notice);
$('#tupBtn').removeAttr("disabled", true);
},6000);
}
else{
alert("亲，抽奖次数已用光！");
}
});
//转盘旋转
function runCup(){
probability();
var degValue = 'rotate('+angles+'deg'+')';
$('#myCanvas').css('-o-transform',degValue); //Opera
$('#myCanvas').css('-ms-transform',degValue); //IE浏览器
$('#myCanvas').css('-moz-transform',degValue); //Firefox
$('#myCanvas').css('-webkit-transform',degValue); //Chrome和Safari
$('#myCanvas').css('transform',degValue);
}
//各奖项对应的旋转角度及中奖公告内容
function probability(){
//获取随机数
var num = parseInt(Math.random()*(7 - 0 + 0) + 0);
//概率
if ( num == 0 ) {
angles = 2160 * rotNum + 1800;
notice = info[0] + info1[0];
}
//概率
else if ( num == 1 ) {
angles = 2160 * rotNum + 1845;
notice = info[7] + info1[7];
}
//概率
else if ( num == 2 ) {
angles = 2160 * rotNum + 1890;
notice = info[6] + info1[6];
}
//概率
else if ( num == 3 ) {
angles = 2160 * rotNum + 1935;
notice = info[5] + info1[5];
}
//概率
else if ( num == 4 ) {
angles = 2160 * rotNum + 1980;
notice = info[4] + info1[4];
}
//概率
else if ( num == 5 ) {
angles = 2160 * rotNum + 2025;
notice = info[3] + info1[3];
}
//概率
else if ( num == 6 ) {
angles = 2160 * rotNum + 2070;
notice = info[2] + info1[2];
}
//概率
else if ( num == 7 ) {
angles = 2160 * rotNum + 2115;
notice = info[1] + info1[1];
}
}
//绘制转盘
function canvasRun(){
var canvas=document.getElementById('myCanvas');
var canvas01=document.getElementById('myCanvas01');
var canvas03=document.getElementById('myCanvas03');
var canvas02=document.getElementById('myCanvas02');
var ctx=canvas.getContext('2d');
var ctx1=canvas01.getContext('2d');
var ctx3=canvas03.getContext('2d');
var ctx2=canvas02.getContext('2d');
createCircle();
createCirText();
initPoint();
//外圆
function createCircle(){
var startAngle = 0;//扇形的开始弧度
var endAngle = 0;//扇形的终止弧度
//画一个8等份扇形组成的圆形
for (var i = 0; i< 8; i++){
startAngle = Math.PI*(i/4-1/8);
endAngle = startAngle+Math.PI*(1/4);
ctx.save();
ctx.beginPath();
ctx.arc(150,150,100, startAngle, endAngle, false);
ctx.lineWidth = 120;
if (i%2 == 0) {
ctx.strokeStyle = color[0];
}else{
ctx.strokeStyle = color[1];
}
ctx.stroke();
ctx.restore();
}
}
//各奖项
function createCirText(){
ctx.textAlign='start';
ctx.textBaseline='middle';
ctx.fillStyle = color[3];
var step = 2*Math.PI/8;
for ( var i = 0; i < 8; i++) {
ctx.save();
ctx.beginPath();
ctx.translate(150,150);
ctx.rotate(i*step);
ctx.font = " 20px Microsoft YaHei";
ctx.fillStyle = color[3];
ctx.fillText(info[i],-30,-115,60);
ctx.font = " 14px Microsoft YaHei";
ctx.fillText(info1[i],-30,-95,60);
ctx.closePath();
ctx.restore();
}
}
function initPoint(){
//箭头指针
ctx1.beginPath();
ctx1.moveTo(100,24);
ctx1.lineTo(90,62);
ctx1.lineTo(110,62);
ctx1.lineTo(100,24);
ctx1.fillStyle = color[5];
ctx1.fill();
ctx1.closePath();
//中间小圆
ctx3.beginPath();
ctx3.arc(100,100,40,0,Math.PI*2,false);
ctx3.fillStyle = color[5];
ctx3.fill();
ctx3.closePath();
//小圆文字
ctx3.font = "Bold 20px Microsoft YaHei";
ctx3.textAlign='start';
ctx3.textBaseline='middle';
ctx3.fillStyle = color[4];
ctx3.beginPath();
ctx3.fillText('开始',80,90,40);
ctx3.fillText('抽奖',80,110,40);
ctx3.fill();
ctx3.closePath();
//中间圆圈
ctx2.beginPath();
ctx2.arc(75,75,75,0,Math.PI*2,false);
ctx2.fillStyle = color[2];
ctx2.fill();
ctx2.closePath();
}
}
});
(3) 样式表css：mian.css
*{
padding: 0px;
margin: 0px;
font-size: 16px;
font-family: "Microsoft YaHei";
}
.turnplate_box{
width: 300px;
height: 300px;
margin: 100px auto;
position: relative;
}
.turnplate_box canvas{
position: absolute;
}
#myCanvas{
background-color: white;
border-radius: 100%;
}
#myCanvas01,#myCanvas03{
left: 50px;
top: 50px;
z-index: 30;
}
#myCanvas02{
left: 75px;
top: 75px;
z-index: 20;
}
#myCanvas{
-o-transform: transform 6s;
-ms-transform: transform 6s;
-moz-transform: transform 6s;
-webkit-transform: transform 6s;
transition: transform 6s;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.turnplatw_btn{
width: 60px;
height: 60px;
left: 120px;
top: 120px;
border-radius: 100%;
position: absolute;
cursor: pointer;
border: none;
background: transparent;
outline: none;
z-index: 40;
}
2.HTML5 电子书翻页动画：
实现效果图：
(1)jsp页面代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5电子书翻页动画特效DEMO演示</title>
<link type="text/css" href="css/main.css" rel="stylesheet" media="screen" />
</head>
<body>
<div id="shineflip">
<div id="shineflip-pages">
<canvas id="shineflip-canvas"></canvas>
<canvas id="shineflip-page-mid-canvas"></canvas>
<section class="page">
<div><img src="images/0.jpg" width="475" height="482" /></div>
<span style="left:18px;"><img src="images/zh.png" height="482" /></span>
</section>
<section class="page" style="background:url(images/left_pk.jpg)">
<div><img src="images/1.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>
</section>
<section class="page">
<div><img src="images/2.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>
</section>
<section class="page">
<div><img src="images/3.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>
</section>
<section class="page">
<div><img src="images/4.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>
</section>
<section class="page">
<div><img src="images/5.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></div>
</section>
<section class="page" style="background:url(images/right_pk.jpg)">
<div><img src="images/6.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></div>
</section>
<section class="page">
<div><img src="images/24.jpg" width="475" height="482" /></div>
<span style="right:18px;"><img src="images/zh.png" height="482" /></span>
</section>
</div>
</div>
<script type="text/javascript" src="js/shineflip_min.js"></script>
<script type="text/javascript">
var shineFlip = new ShineFlip({
// autoFitScreen: true,
width: 950,
height: 482,
page_width: 475,
page_height: 482
});
</script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html>
(2) js脚本：shineflip_min.js
(function(){"use strict";function n(n){this.OPEN=n.open||!0,this.FULL_SCREEN=n.autoFitScreen||!1,this.BOOK_WIDTH=n.width||950,this.BOOK_HEIGHT=n.height||482,this.PAGE_WIDTH=n.page_width||475,this.PAGE_HEIGHT=n.page_height||482,this.PAGE_IMG_URL=n.page_url||"background.jpg",this.setup()}n.prototype={setup:function(){function wt(){var i,r,n,t,u,f;return window.innerHeight&&window.scrollMaxY?(i=window.innerWidth+window.scrollMaxX,r=window.innerHeight+window.scrollMaxY):document.body.scrollHeight>document.body.offsetHeight?(i=document.body.scrollWidth,r=document.body.scrollHeight):document.body&&(i=document.body.offsetWidth,r=document.body.offsetHeight),window.innerHeight?(n=window.innerWidth,t=window.innerHeight):document.documentElement&&document.documentElement.clientHeight?(n=document.documentElement.clientWidth,t=document.documentElement.clientHeight):document.body&&(n=document.body.clientWidth,t=document.body.clientHeight),u=i<n?n:i,f=r<t?t:r,{PageW:u,PageH:f,WinW:n,WinH:t}}function ot(r){var e,o;if(r.touches?(u.x=r.touches[0].clientX-y.offsetLeft-v/2,u.y=r.touches[0].clientY-y.offsetTop):(u.x=r.clientX-y.offsetLeft-v/2,u.y=r.clientY-y.offsetTop),f>-2&&f<n.length)if(Math.abs(u.x)<t&&Math.abs(u.x)>t-g)u.x<0&&f>=0?n[f].onedge=!0:u.x>0&&h>=0&&(i[h].onedge=!0);else{for(e=0,o=n.length;e<o;e++)n[e].onedge=!1;for(e=0,o=i.length;e<o;e++)i[e].onedge=!1}}function ei(n){n.preventDefault(),ot(n)}function oi(n){ot(n)}function kt(r){Math.abs(u.x)<t&&f>-2&&f<n.length&&(u.x<0&&f>=0?n[f].dragging=!0:u.x>0&&h>=0&&h<i.length-1&&(i[h].dragging=!0),r.preventDefault()),it.x=u.x,it.y=u.y}function si(n){n.preventDefault(),ot(n),kt(n)}function hi(n){kt(n)}function dt(r){for(var e=0;e<n.length;e++)n[e].dragging&&u.x>-(t/2)&&(n[e].target=1,f=Math.max(f-1,-1),h=Math.max(h-1,0),i[h].target=1,i[h].progress=1),n[e].onedge=!1,n[e].dragging=!1;for(e=0;e<i.length;e++)i[e].dragging&&u.x<t/2&&(i[e].target=-1,h=Math.min(h+1,i.length-1),f=Math.min(f+1,n.length-1),n[f].target=-1,n[f].progress=-1),i[e].onedge=!1,i[e].dragging=!1;ot(r)}function ci(n){it.x==u.x&&it.y==u.y?gt(n):dt(n)}function lt(n){dt(n)}function gt(r){if(Math.abs(u.x)<t&&Math.abs(u.x)>t-g&&Math.abs(u.x-it.x)<5&&Math.abs(u.y-it.y)<5){var e=!1,o=!1;u.x>0&&h>=0&&h<i.length-1&&(i[h].dragging=!0,u.x=-1,lt(r),o=!0,e=!0),o||u.x<0&&f>=0&&f<n.length&&(n[f].dragging=!0,u.x=1,lt(r),e=!0)}}function li(){var a,e,o,f,c,l;for(r.clearRect(0,0,s.width,s.height),a=!1,e=0,o=n.length;e<o;e++)f=n[e],f.onedge&&(c=Math.max(e-1,0),l=Math.min(e+1,n.length-1),n[c].dragging||n[l].dragging||i[h].dragging?f.onedge=!1:f.target=Math.max(Math.min(u.x/t,1),-1)),f.dragging&&(f.target=Math.max(Math.min(u.x/t,1),-1)),f.progress+=(f.target-f.progress)*yt,!f.dragging&&!f.onedge&&Math.abs(f.progress)<nt&&(f.target=f.target<0?-1:1,f.progress+=(f.target-f.progress)*yt),Math.abs(f.progress)<nt&&(a=!0,ri(f),ii(f,e));if(!a)for(e=0,o=i.length;e<o;e++)f=i[e],f.onedge&&(c=Math.max(e-1,0),l=Math.min(e+1,i.length-1),e+1==i.length||i[c].dragging||i[l].dragging?f.onedge=!1:f.target=Math.max(Math.min(u.x/t,1),-1)),f.dragging&&(f.target=Math.max(Math.min(u.x/t,1),-1)),f.progress+=(f.target-f.progress)*pt,!f.dragging&&!f.onedge&&Math.abs(f.progress)<nt&&(f.target=f.target<0?-1:1,f.progress+=(f.target-f.progress)*pt),Math.abs(f.progress)<nt&&(ri(f),ii(f,e))}function ni(t){var u,r;k.style.zIndex=n.length+i.length+1,k.width=v+o*2,k.height=b+o*2,k.style.left=-(o+tt)+"px",k.style.top=-(o+p)+"px",c.clearRect(0,0,k.width,k.height),(t==0||t==1)&&f!=n.length&&(c.save(),c.translate(o+v/2,p+o),u=c.createLinearGradient(0,0,22,0),u.addColorStop(0,"rgba(0,0,0,0.2)"),u.addColorStop(.3,"rgba(0,0,0,0.08)"),u.addColorStop(1,"rgba(0,0,0,0)"),c.fillStyle=u,c.fillRect(0,0,22,e),c.fillStyle="rgba(0,0,0,0.2)",c.fillRect(0,-p,0,p),c.fillStyle="rgba(0,0,0,0.2)",c.fillRect(0,e,0,p),c.restore()),(t==0||t==-1)&&f!=-2&&(c.save(),c.translate(o+v/2,p+o),c.fillStyle="rgba(0,0,0,0.2)",c.fillRect(0,-p,0,p),c.fillStyle="rgba(0,0,0,0.2)",c.fillRect(0,e,0,p),c.translate(-100,0),r=c.createLinearGradient(0,0,100,0),r.addColorStop(0,"rgba(0,0,0,0)"),r.addColorStop(.8,"rgba(0,0,0,0.05)"),r.addColorStop(.9,"rgba(0,0,0,0)"),r.addColorStop(.92,"rgba(0,0,0,0.02)"),r.addColorStop(1,"rgba(0,0,0,0.1)"),c.fillStyle=r,c.fillRect(0,0,100,e),c.restore())}function ti(i,r,u){var f=t*.5*(1-i.progress),e=t*i.progress+f,o=Math.max(f,0),c;if(r<n.length-1&&n[r+1].progress>-1){var s=t*.5*(1-n[r+1].progress),h=t*n[r+1].progress+s,l=Math.max(s,0);e*2+f>h*2?(c=Math.max(Math.max(h-e,0)*2-g,0),u.page.style.width=c+"px"):u.page.style.width=o+"px"}else u.page.style.width=o+"px"}function ft(n,t,i,r,u,f){t=="L"?n.page.style.left=i:t=="R"&&(n.page.style.right=i),n.page.className=r,n.page.style.zIndex=u,n.page.style.width=f}function ii(u,e){var l,ut,y,c,b;s.style.zIndex=eval(k.style.zIndex)+1;var d=t*.5*(1-u.progress),p=t*u.progress+d,a=Math.max(d,0),o,w=v/2+p-a-tt;if(u.type==0)if(u.dragging)o=n[f],Math.abs(u.progress)>ht&&u.progress<0?(o.progress<0&&ft(o,"L","0px","page",o.index,t+"px"),s.style.zIndex=0):ft(o,"L",w+"px","pageflip",eval(s.style.zIndex)+1,a+"px"),h-1>=0&&(i[h-1].page.style.width=Math.max(p,0)+"px");else{if(u.onedge?(o=n[f],ti(u,e,o)):u.target==-1?(o=n[f],o.page.style.width=a+"px",h-1>=0&&(l=Math.max(p,0),l>t-1&&(l=t),i[h-1].page.style.width=l+"px")):(o=n[e],ti(u,e,o),h>=0&&(l=Math.max(p,0),l>t-1&&(l=t),i[h].page.style.width=l+"px")),o.page.className="pageflip",o.page.style.zIndex=eval(s.style.zIndex)+1,o.page.style.left=w+"px",a>t-2&&u.target==-1){for(y=!1,c=0;c<n.length;c++)if(n[c]!=o&&Math.abs(n[c].progress)<nt){y=!0;break}y||(s.style.zIndex=0,o.page.style.left="0px",o.page.className="page",o.page.style.zIndex=o.index,o.page.style.width=t+"px")}if(a<1){for(y=!1,c=0;c<n.length;c++)if(n[c]!=o&&Math.abs(n[c].progress)<nt){y=!0;break}y||(s.style.zIndex=0),o.page.style.left="0px",o.page.className="page",o.page.style.zIndex=o.index,o.page.style.width="0px"}}if(u.type==1)if(l=Math.max(p,0),l<2&&(l=0),u.page.style.width=l+"px",u.dragging)o=n[Math.min(f+1,n.length-1)],Math.abs(u.progress)>ht&&u.progress<0?(ft(o,"L","0px","page",o.index,t+"px"),s.style.zIndex=0):ft(o,"L",w+"px","pageflip",eval(s.style.zIndex)+1,a+"px");else{if(u.onedge)o=n[Math.min(f+1,n.length-1)],o.page.style.width=a+"px";else if(u.target==1)o=n[Math.min(f+1,n.length-1)],o.page.style.width=a+"px";else if(o=n[e],e!=h-1&&i[e+1].progress>-1){var it=t*.5*(1-i[e+1].progress),rt=t*i[e+1].progress+it,et=Math.max(it,0);p*2+d>rt*2&&(ut=Math.max(Math.max(rt-p,0)*2-g,0),o.page.style.width=ut+"px")}else o.page.style.width=a+"px";if(Math.abs(u.progress)>ht&&u.progress<0)ft(o,"L","0px","page",o.index,t+"px"),navigator.userAgent.indexOf("iPhone")==-1&&r.clearRect(0,0,s.width,s.height),s.style.zIndex=0;else if(o.page.className="pageflip",o.page.style.zIndex=eval(s.style.zIndex)+1,o.page.style.left=w+"px",a<2){for(y=!1,c=0,c=0;c<n.length;c++)if(n[c]==o)break;for(b=0;b<i.length;b++)if(i[b]!=i[c]&&Math.abs(i[b].progress)<nt){y=!0;break}y||(s.style.zIndex=0)}}}function ri(n){var a,y,h;try{var f=1-Math.abs(n.progress),u=t*.5*(1-n.progress),i=t*n.progress+u,s=20*f,w=t*.5*Math.max(Math.min(1-n.progress,.5),0),c=t*.5*Math.max(Math.min(f,.5),0),l=t*.5*Math.max(Math.min(f,.5),0);r.save(),r.translate(o+v/2,p+o),r.strokeStyle="rgba(0,0,0,"+.05*f+")",r.lineWidth=30*f,r.beginPath(),r.moveTo(i-u,-s*.5),r.lineTo(i-u,e+s*.5),r.stroke(),a=r.createLinearGradient(i,0,i+c,0),a.addColorStop(0,"rgba(0,0,0,"+f*.2+")"),a.addColorStop(.8,"rgba(0,0,0,0.0)"),r.fillStyle=a,r.beginPath(),r.moveTo(i,0),r.lineTo(i+c,0),r.lineTo(i+c,e),r.lineTo(i,e),r.fill(),y=r.createLinearGradient(i-u-l,0,i-u,0),y.addColorStop(0,"rgba(0,0,0,0.0)"),y.addColorStop(1,"rgba(0,0,0,"+f*.15+")"),r.fillStyle=y,r.beginPath(),r.moveTo(i-u-l,0),r.lineTo(i-u,0),r.lineTo(i-u,e),r.lineTo(i-u-l,e),r.fill(),h=r.createLinearGradient(i-w,0,i,0),h.addColorStop(.35,"#fafafa"),h.addColorStop(.73,"#eeeeee"),h.addColorStop(.9,"#fafafa"),h.addColorStop(1,"#e2e2e2"),r.fillStyle=h,r.strokeStyle="rgba(0,0,0,0.06)",r.lineWidth=.5,r.beginPath(),r.moveTo(i,0),r.lineTo(i,e),r.quadraticCurveTo(i,e+s*2,i-u,e+s),r.lineTo(i-u,-s),r.quadraticCurveTo(i,-s*2,i,0),r.fill(),r.stroke(),r.restore()}catch(b){r.restore();return}}var at=this.FULL_SCREEN,o=30,ui=this.OPEN,vt=.3,yt=vt,pt=vt,g=50,st=50,ai=1e8,ht=.99,nt=.997,fi=35,h=0,f=-1,y,w,ct,d,l,rt,bt,ut;ui||(h=-1,f=-2);var a=[],i=[],n=[];var v=this.BOOK_WIDTH,b=this.BOOK_HEIGHT,t=this.PAGE_WIDTH,e=this.PAGE_HEIGHT,et=wt();at?(v=et.WinW-o*2,b=et.WinH-o*2,t=(v-40)/2,e=b-10):(v=this.BOOK_WIDTH,b=this.BOOK_HEIGHT,t=this.PAGE_WIDTH,e=this.PAGE_HEIGHT);var p=(b-e)/2,tt=v/2-t,s=this.canvas=document.getElementById("shineflip-canvas"),r=this._=s.getContext("2d"),k=document.getElementById("shineflip-page-mid-canvas"),c=k.getContext("2d"),u={x:0,y:0},it={x:0,y:0};if(s.width=v+o*2,s.height=b+o*2,s.style.left=-(o+tt)+"px",s.style.top=-(o+p)+"px",y=document.getElementById("shineflip"),y.style.width=v+"px",y.style.height=b+"px",y.style.right=10+"px",y.style.left=10+"px",y.style.top=o+"px",w=document.getElementById("shineflip-pages"),w.style.left=tt+"px",w.style.top=p+"px",w.style.width=t*2+"px",w.style.height=e+"px",w.backgroundImage=w.style.backgroundImage,w.backgroundColor=w.style.backgroundColor,ct=y.getElementsByTagName("section"),ct.length!=0){for(l=0,rt=ct.length;l<rt;l++)a.push(ct[l]);for(a.length%2==0?(d=document.createElement("section"),w.appendChild(d),a.push(d)):(d=document.createElement("section"),w.appendChild(d),a.push(d),d=document.createElement("section"),w.appendChild(d),a.push(d)),l=0,rt=a.length;l<rt;l++)(l+1)%2==0?(a[l].style.zIndex=Math.ceil((rt+l+1)/2),a[l].style.left="0px",a[l].style.width="0px",a[l].style.height=e+"px",n.push({index:a[l].style.zIndex,type:0,progress:-1,target:-1,page:a[l],dragging:!1,onedge:!1})):(a[l].style.zIndex=Math.ceil((rt-l)/2),a[l].style.left=Math.ceil(t)+"px",a[l].style.width=t+"px",a[l].style.height=e+"px",i.push({index:a[l].style.zIndex,type:1,progress:1,target:1,page:a[l],dragging:!1,onedge:!1})),bt=a[l].getElementsByTagName("div2"),bt.length>0&&(ut=bt[0],ut.addEventListener("mousedown",function(n){n.stopPropagation()},!1),ut.style.width="",ut.style.height="",ut.style.left=0,ut.style.top=0);i.length!=1&&(at&&(window.onresize=function(){var f=et,u=wt(),k=u.WinW/f.WinW,d=u.WinH/f.WinH,l,h,c,r;for(v=u.WinW-o*2,b=u.WinH-o*2,t=(v-40)/2,e=b-10,p=(b-e)/2,tt=v/2-t,s.width=v+o*2,s.height=b+o*2,s.style.left=-(o+tt)+"px",s.style.top=-(o+p)+"px",y.style.width=v+"px",y.style.height=b+"px",w.style.left=tt+"px",w.style.top=p+"px",w.style.width=t*2+"px",w.style.height=e+"px",r=0,l=a.length;r<l;r++)h=a[r].getElementsByTagName("div2"),h.length>0&&(c=h[0],c.style.width=t-g*2+"px",c.style.height=e-st*2+"px");for(r=0;r<n.length;r++)n[r].page.style.width.replace("px","")>2&&(n[r].page.style.width=t+"px"),n[r].page.style.height=e+"px";for(r=0;r<i.length;r++)i[r].page.style.width.replace("px","")>2&&(i[r].page.style.width=t+"px"),i[r].page.style.left=Math.ceil(t)+"px",i[r].page.style.height=e+"px";ni(0),et=u}),setInterval(li,1e3/fi),ni(0),y.addEventListener("touchmove",ei),y.addEventListener("touchstart",si),y.addEventListener("touchend",ci),y.addEventListener("mousemove",oi,!1),y.addEventListener("mousedown",hi,!1),y.addEventListener("mouseup",lt,!1),y.addEventListener("click",gt,!1))}}},window.ShineFlip=n})()
(3)样式表：main.css
body, h2, p {
margin: 0;
padding: 0;
}
body {
background: url("../images/cover.jpg") no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #333;
font-family: Helvetica, sans-serif;
text-align:center;
}
#shineflip {
/*background: url("../images/cover.jpg") no-repeat;*/
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
position: absolute;
}
#shineflip-pages
{
/* background-color:#fafafa;*/
background-repeat: repeat;
position: absolute;
z-index: 2;
}
#shineflip-pages section.cover_front, #shineflip-pages section.cover_background{
position: absolute;
overflow: hidden;
color: #ffffff;
}
#shineflip-pages .cover_front_content
{
position: absolute;
z-index: 1;
overflow:hidden;
white-space:nowrap;
-ms-user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
}
#shineflip-pages .cover_front_back
{
position: absolute;
z-index: 0;
}
#shineflip-pages .cover_background_content
{
position: absolute;
z-index: 1;
overflow:hidden;
white-space:nowrap;
-ms-user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
}
#shineflip-pages .cover_background_back
{
position: absolute;
z-index: 0;
}
#shineflip-pages section.pageflip
{
display: block;
position: absolute;
overflow: hidden;
}
#shineflip-pages section.page {
//background-color: #fafafa;
display: block;
position: absolute;
overflow: hidden;
}
#shineflip-pages-flipcontent,#shineflip-pages section>div {
display: block;
font-size: 12px;
position: absolute;
overflow: hidden;
width:100%;
height:100%;
}
#shineflip-pages-flipcontent,#shineflip-pages section>span {
display: block;
font-size: 12px;
position: absolute;
overflow: hidden;
}
#shineflip-pages-flipcontent p,
#shineflip-pages-flipcontent h2,
#shineflip-pages section p,
#shineflip-pages section h2 {
line-height: 1.4em;
text-align: justify;
}
#shineflip-canvas {
position: absolute;
z-index: 0;
}
#shineflip-page-mid-canvas {
position: absolute;
pointer-events: none;
z-index: 0;
}
3.jQuery/CSS3实现小鸟飞翔动画：
实现效果图：
jsp页面代码：index.jsp
<!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>jQuery/CSS3实现小鸟飞翔动画DEMO演示</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 564px;
height: 170px;
}
.box div{
width: 141px;
height: 85px;
float: left;
margin-top: 150px;
margin-left: 50px;
background:url(images/bird1.png);/* 用于Firefox 可无视 */
-webkit-animation: myFrist 1s linear infinite;
-moz-animation: myFrist 1s linear infinite;
-o-animation: myFrist 1s linear infinite;
animation: myFrist 1s linear infinite;
}
@-webkit-keyframes myFrist
{
0% {background:url(images/bird1.png);background-size: 100% 100%}
12.5% {background:url(images/bird2.png);background-size: 100% 100%}
25% {background:url(images/bird3.png);background-size: 100% 100%}
37.5% {background:url(images/bird4.png);background-size: 100% 100%}
50% {background:url(images/bird5.png);background-size: 100% 100%}
65.7% {background:url(images/bird6.png);background-size: 100% 100%}
75% {background:url(images/bird7.png);background-size: 100% 100%}
87.5% {background:url(images/bird8.png);background-size: 100% 100%}
100% {background:url(images/bird1.png);background-size: 100% 100%}
}
@-moz-keyframes myFrist
{
0% {background:url(images/bird1.png);background-size: 100% 100%}
12.5% {background:url(images/bird2.png);background-size: 100% 100%}
25% {background:url(images/bird3.png);background-size: 100% 100%}
37.5% {background:url(images/bird4.png);background-size: 100% 100%}
50% {background:url(images/bird5.png);background-size: 100% 100%}
65.7% {background:url(images/bird6.png);background-size: 100% 100%}
75% {background:url(images/bird7.png);background-size: 100% 100%}
87.5% {background:url(images/bird8.png);background-size: 100% 100%}
100% {background:url(images/bird1.png);background-size: 100% 100%}
}
@-o-keyframes myFrist
{
0% {background:url(images/bird1.png);background-size: 100% 100%}
12.5% {background:url(images/bird2.png);background-size: 100% 100%}
25% {background:url(images/bird3.png);background-size: 100% 100%}
37.5% {background:url(images/bird4.png);background-size: 100% 100%}
50% {background:url(images/bird5.png);background-size: 100% 100%}
65.7% {background:url(images/bird6.png);background-size: 100% 100%}
75% {background:url(images/bird7.png);background-size: 100% 100%}
87.5% {background:url(images/bird8.png);background-size: 100% 100%}
100% {background:url(images/bird1.png);background-size: 100% 100%}
}
@keyframes myFrist
{
0% {background:url(images/bird1.png);background-size: 100% 100%}
12.5% {background:url(images/bird2.png);background-size: 100% 100%}
25% {background:url(images/bird3.png);background-size: 100% 100%}
37.5% {background:url(images/bird4.png);background-size: 100% 100%}
50% {background:url(images/bird5.png);background-size: 100% 100%}
65.7% {background:url(images/bird6.png);background-size: 100% 100%}
75% {background:url(images/bird7.png);background-size: 100% 100%}
87.5% {background:url(images/bird8.png);background-size: 100% 100%}
100% {background:url(images/bird1.png);background-size: 100% 100%}
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
<script type="text/javascript">
var timer = setInterval(function(){
$(".box > div").animate({
'marginLeft': 1000,
},{queue:true, duration:5000,complete:function a(){
$(".box > div").css('transform','rotateY(180deg)');
}}).animate({
'marginLeft': 50,
},5000,function(){
$(".box > div").css('transform','rotateY(0deg)');
});
},1000);
</script>
<div style="text-align:center;clear:both;padding-top:30px">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html>
4.酷炫的CSS3多窗口邮件阅读器：
实现效果图：
(1) 页面代码：index.jsp
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>很酷的CSS3多窗口邮件阅读器DEMO演示</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div style="text-align:center;clear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<iframe frameborder="0" scrolling="no" src="index2.html" width="100%" height="500px"></iframe>
</body>
</html>
(2)样式表：default.css
@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);
@font-face {
font-family: 'icomoon';
src:url('../fonts/icomoon.eot?rretjt');
src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),
url('../fonts/icomoon.woff?rretjt') format('woff'),
url('../fonts/icomoon.ttf?rretjt') format('truetype'),
url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body, html { font-size: 100%; padding: 0; margin: 0;}
/* Reset */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
body{
background: #f9f7f6;
color: #404d5b;
font-weight: 500;
font-size: 1.05em;
font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
a{color: #2fa0ec;text-decoration: none;outline: none;}
a:hover,a:focus{color:#74777b;}
.htmleaf-container{
margin: 0 auto;
text-align: center;
overflow: hidden;
}
.htmleaf-content {
font-size: 150%;
padding: 1em 0;
}
.htmleaf-content h2 {
margin: 0 0 2em;
opacity: 0.1;
}
.htmleaf-content p {
margin: 1em 0;
padding: 5em 0 0 0;
font-size: 0.65em;
}
.bgcolor-1 { background: #f0efee; }
.bgcolor-2 { background: #f9f9f9; }
.bgcolor-3 { background: #e8e8e8; }/*light grey*/
.bgcolor-4 { background: #2f3238; color: #fff; }/*Dark grey*/
.bgcolor-5 { background: #df6659; color: #521e18; }/*pink1*/
.bgcolor-6 { background: #2fa8ec; }/*sky blue*/
.bgcolor-7 { background: #d0d6d6; }/*White tea*/
.bgcolor-8 { background: #3d4444; color: #fff; }/*Dark grey2*/
.bgcolor-9 { background: #ef3f52; color: #fff;}/*pink2*/
.bgcolor-10{ background: #64448f; color: #fff;}/*Violet*/
.bgcolor-11{ background: #3755ad; color: #fff;}/*dark blue*/
.bgcolor-12{ background: #3498DB; color: #fff;}/*light blue*/
/* Header */
.htmleaf-header{
padding: 1em 190px 1em;
letter-spacing: -1px;
text-align: center;
}
.htmleaf-header h1 {
font-weight: 600;
font-size: 2em;
line-height: 1;
margin-bottom: 0;
font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
.htmleaf-header h1 span {
font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
display: block;
font-size: 60%;
font-weight: 400;
padding: 0.8em 0 0.5em 0;
color: #c3c8cd;
}
/*nav*/
.htmleaf-demo a{color: #1d7db1;text-decoration: none;}
.htmleaf-demo{width: 100%;padding-bottom: 1.2em;}
.htmleaf-demo a{display: inline-block;margin: 0.5em;padding: 0.6em 1em;border: 3px solid #1d7db1;font-weight: 700;}
.htmleaf-demo a:hover{opacity: 0.6;}
.htmleaf-demo a.current{background:#1d7db1;color: #fff; }
/* Top Navigation Style */
.htmleaf-links {
position: relative;
display: inline-block;
white-space: nowrap;
font-size: 1.5em;
text-align: center;
}
.htmleaf-links::after {
position: absolute;
top: 0;
left: 50%;
margin-left: -1px;
width: 2px;
height: 100%;
background: #dbdbdb;
content: '';
-webkit-transform: rotate3d(0,0,1,22.5deg);
transform: rotate3d(0,0,1,22.5deg);
}
.htmleaf-icon {
display: inline-block;
margin: 0.5em;
padding: 0em 0;
width: 1.5em;
text-decoration: none;
}
.htmleaf-icon span {
display: none;
}
.htmleaf-icon:before {
margin: 0 5px;
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-family: 'icomoon';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
}
/* footer */
.htmleaf-footer{width: 100%;padding-top: 10px;}
.htmleaf-small{font-size: 0.8em;}
.center{text-align: center;}
/****/
.related {
color: #fff;
background: #333;
text-align: center;
font-size: 1.25em;
padding: 0.5em 0;
overflow: hidden;
}
.related > a {
vertical-align: top;
width: calc(100% - 20px);
max-width: 340px;
display: inline-block;
text-align: center;
margin: 20px 10px;
padding: 25px;
font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
.related a {
display: inline-block;
text-align: left;
margin: 20px auto;
padding: 10px 20px;
opacity: 0.8;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
-webkit-backface-visibility: hidden;
}
.related a:hover,
.related a:active {
opacity: 1;
}
.related a img {
max-width: 100%;
opacity: 0.8;
border-radius: 4px;
}
.related a:hover img,
.related a:active img {
opacity: 1;
}
.related h3{font-family: "Microsoft YaHei", sans-serif;}
.related a h3 {
font-weight: 300;
margin-top: 0.15em;
color: #fff;
}
/* icomoon */
.icon-htmleaf-home-outline:before {
content: "\e5000";
}
.icon-htmleaf-arrow-forward-outline:before {
content: "\e5001";
}
@media screen and (max-width: 50em) {
.htmleaf-header {
padding: 3em 10% 4em;
}
.htmleaf-header h1 {
font-size:2em;
}
}
@media screen and (max-width: 40em) {
.htmleaf-header h1 {
font-size: 1.5em;
}
}
@media screen and (max-width: 30em) {
.htmleaf-header h1 {
font-size:1.2em;
}
}
(3)样式表：styles.css
@import url(http://fonts.useso.com/css?family=Raleway:300,500,600,700,800,400);
body {
background-image: url("../img/blurred_bg.jpg");
font-family: 'Raleway', sans-serif;
background-size: 100% 100%;
height: 100vh;
}
body .title {
width: 750px;
text-align: center;
height: 500px;
position: absolute;
left: 0;
right: 0;
margin: auto;
color: white;
top: 0;
bottom: 0;
}
body .title_inner {
float: right;
width: 260px;
text-align: left;
position: relative;
top: 160px;
}
body .title_inner h1 {
margin: 0;
text-transform: uppercase;
}
body .title_inner h2 {
margin: 0;
font-weight: 500;
font-size: 14px;
line-height: 24px;
margin-top: 15px;
}
body .container {
width: 800px;
width: 750px;
text-align: center;
height: 500px;
position: absolute;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
}
body .container_ui {
width: 350px;
background: white;
height: 486px;
box-shadow: 20px 20px 0px rgba(0, 0, 0, 0.16);
-webkit-transition-property: opacity,top;
transition-property: opacity,top;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
-webkit-animation: pop .5s forwards;
animation: pop .5s forwards;
}
body .container_ui__heading {
height: 60px;
width: 100%;
background: #333658;
}
body .container_ui__heading .header_icon {
float: left;
text-align: left;
}
body .container_ui__heading .header_icon img {
margin: 17px 20px 20px 20px;
cursor: pointer;
}
body .container_ui__heading h1 {
color: #aeb1d8;
text-transform: uppercase;
font-weight: 700;
height: 10px;
margin: 0;
font-size: 12px;
float: left;
width: 33%;
letter-spacing: 1px;
line-height: 64px;
}
body .container_ui__heading .header_icon {
float: left;
width: 33%;
height: 40px;
}
body .container_ui__heading .menu_icon {
width: 33%;
float: left;
text-align: right;
position: relative;
top: 25px;
right: 20px;
cursor: pointer;
}
body .container_ui__heading .menu_icon div {
width: 21px;
height: 2px;
float: right;
display: block;
margin-bottom: 3px;
border-radius: 1px;
clear: both;
background: rgba(0, 0, 0, 0.26);
}
body .container_ui input[type="checkbox"] {
display: none;
}
body .container_ui label:hover > .container_ui__item .face .color_bar {
width: 81px;
-webkit-transition-property: width;
transition-property: width;
-webkit-transition-duration: .4s;
transition-duration: .4s;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
body .container_ui label:hover > .container_ui__item .face .color_bar span {
opacity: 1;
-webkit-transition-property: opacity;
transition-property: opacity;
-webkit-transition-duration: .2s;
transition-duration: .2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: .3s;
transition-delay: .3s;
}
body .container_ui label:hover > .container_ui__item .face .color_bar p {
opacity: 0;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__expand {
-webkit-transition-property: left,opacity;
transition-property: left,opacity;
-webkit-transition-duration: .4s;
transition-duration: .4s;
left: 380px;
z-index: -1;
opacity: 1;
-webkit-transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
pointer-events: none;
}
body .container_ui .container_ui__expand label {
width: 10px;
position: absolute;
right: 10px;
top: 20px;
font-size: 12px;
font-weight: 700;
color: #a6a6a6;
}
body .container_ui .container_ui__expand label:hover {
color: #444444;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__expand label {
pointer-events: auto;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__expand .body .user .face img {
-webkit-animation: pop .5s .5s forwards;
animation: pop .5s .5s forwards;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__expand .body .user .details {
-webkit-animation: popup .5s .5s forwards;
animation: popup .5s .5s forwards;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__expand .body .content {
-webkit-animation: popup .5s .7s forwards;
animation: popup .5s .7s forwards;
}
body .container_ui input[type="checkbox"]:not(:checked) + label > .container_ui__expand .body .user .face img {
-webkit-animation: poprev .5s .5s forwards;
animation: poprev .5s .5s forwards;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition-property: -webkit-transform;
transition-property: transform;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__item .face .color_bar {
right: auto;
width: 350px;
height: 71px;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__item .face .color_bar p {
opacity: 1;
-webkit-transition-duration: .3s;
transition-duration: .3s;
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
-webkit-transition-property: opacity;
transition-property: opacity;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__item .face .color_bar span {
display: none;
}
body .container_ui label {
cursor: pointer;
display: block;
max-height: 71px;
float: left;
width: 100%;
overflow: hidden;
}
body .container_ui label:hover > .container_ui__item {
background-color: #EAEAEA !important;
}
body .container_ui label .container_ui__item {
pointer-events: none;
}
body .container_ui__item {
width: 100%;
float: left;
height: 74px;
text-align: left;
color: black;
box-shadow: 0px -1px rgba(0, 0, 0, 0.07);
color: white;
background: #F5F5F5;
cursor: pointer;
}
body .container_ui__item h2, body .container_ui__item h3, body .container_ui__item h4 {
color: black;
}
body .container_ui__item h2 {
font-size: 11px;
display: inline-block;
color: #515151;
text-transform: uppercase;
font-weight: 800;
margin: 10px 0px 0px 0px;
padding-top: 0px;
}
body .container_ui__item h3 {
font-size: 8px;
font-weight: 800;
margin: 5px 0px 10px 0px;
text-transform: uppercase;
color: #B2B2B2;
}
body .container_ui__item h4 {
font-size: 10px;
font-weight: 600;
margin: 0;
color: #919191;
}
body .container_ui__item .face {
float: left;
clear: left;
margin: 0;
margin-right: 10px;
position: relative;
}
body .container_ui__item .face img {
height: 81px;
/* margin: 10px; */
/* border-radius: 5px; */
}
body .container_ui__item .face .color_bar {
float: right;
width: 6px;
background: #56b699;
position: absolute;
right: 0;
text-align: center;
height: 71px;
top: 0;
z-index: 1;
}
body .container_ui__item .face .color_bar p {
opacity: 0;
margin-top: 26px;
}
body .container_ui__item .face .color_bar span {
opacity: 0;
font-size: 12px;
position: relative;
top: -56px;
}
body .container_ui .dot {
width: 6px;
height: 6px;
background: #cdcdcd;
border-radius: 100%;
display: inline-block;
position: relative;
top: -1px;
z-index: -0;
left: 3px;
}
body .container_ui .active {
background: #6cbe63;
}
body .container_ui__expand {
width: 350px;
box-shadow: 20px 20px 0px rgba(0, 0, 0, 0.16);
height: 486px;
position: absolute;
top: 0;
-webkit-transition-delay: .2s;
transition-delay: .2s;
-webkit-transition-property: left,opacity;
transition-property: left,opacity;
opacity: 0;
-webkit-transition-duration: .4s;
transition-duration: .4s;
left: 0;
z-index: -1;
background: white;
}
body .container_ui__expand .body .content {
text-align: left;
position: relative;
top: 10px;
opacity: 0;
}
body .container_ui__expand .body .content p {
text-align: justify;
font-size: 10px;
line-height: 20px;
padding: 25px;
color: #9b9b9b;
font-weight: 500;
}
body .container_ui__expand .body .content p b {
color: #444444;
}
body .container_ui__expand .body .content span {
display: block;
padding: 0px 25px;
font-weight: 800;
position: relative;
top: -10px;
font-size: 10px;
color: #7d7d7d;
}
body .container_ui__expand .body .content textarea {
margin: 0px 25px;
width: 295px;
resize: none;
border: 1px solid #e0e0e0;
height: 60px;
border-radius: 3px;
}
body .container_ui__expand .body .user {
border-bottom: 1px solid #ececec;
height: 65px;
}
body .container_ui__expand .body .user .details {
opacity: 0;
top: 10px;
position: relative;
float: left;
width: 240px;
text-align: left;
}
body .container_ui__expand .body .user .details h2 {
font-size: 14px;
display: inline-block;
color: #515151;
text-transform: uppercase;
font-weight: 800;
margin: 13px 0px 0px 0px;
padding-top: 0px;
}
body .container_ui__expand .body .user .details h3 {
font-size: 12px;
font-weight: 300;
margin: 5px 0px 10px 0px;
text-transform: uppercase;
color: #B2B2B2;
}
body .container_ui__expand .body .user .details h4 {
font-size: 10px;
font-weight: 600;
margin: 0;
color: #919191;
}
body .container_ui__expand .body .user .face {
float: left;
}
body .container_ui__expand .body .user .face img {
width: 40px;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
border-radius: 100%;
border: 2px solid white;
margin: 10px 25px;
}
body .container_ui__expand .heading {
height: 10px;
width: 100%;
background: #56b699;
}
body .container_ui__expand .heading_head h1 {
color: #aeb1d8;
text-transform: uppercase;
font-weight: 700;
height: 10px;
margin: 0;
font-size: 12px;
float: left;
width: 100%;
letter-spacing: 1px;
line-height: 64px;
}
.two {
background: #5674B6 !important;
}
.three {
background: #D05E5E !important;
}
.four {
background: #ACD35D !important;
}
.five {
background: #EA9739 !important;
}
.six {
background: #B6568D !important;
}
body .container_ui input[type="checkbox"]:checked + label > .container_ui__expand a {
pointer-events: auto;
}
/* Let's do some animations! */
@-webkit-keyframes pop {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pop {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes poprev {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
@keyframes poprev {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
@-webkit-keyframes popup {
from {
top: 10px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
@keyframes popup {
from {
top: 10px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
5.HTML5 3D立体图片相册效果
(1)效果截图：
(2)示例代码：index.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=utf-8" />
<title>HTML5 3D立体图片相册代码</title>
<style type="text/css">
html {
overflow:hidden;
-ms-touch-action:none;
-ms-content-zooming:none;
}
body {
position:absolute;
margin:0px;
padding:0px;
background:#fff;
width:100%;
height:100%;
}
#canvas {
position:absolute;
width:100%;
height:100%;
background:#fff;
}
</style>
<script type="text/javascript" src="js/ge1doot.js"></script>
<script type="text/javascript">
"use strict";
(function () {
/* ==== definitions ==== */
var diapo = [], layers = [], ctx, pointer, scr, camera, light, fps = 0, quality = [1,2],
// ---- poly constructor ----
Poly = function (parent, face) {
this.parent = parent;
this.ctx = ctx;
this.color = face.fill || false;
this.points = [];
if (!face.img) {
// ---- create points ----
for (var i = 0; i < 4; i++) {
this.points[i] = new ge1doot.transform3D.Point(
parent.pc.x + (face.x[i] * parent.normalZ) + (face.z[i] * parent.normalX),
parent.pc.y + face.y[i],
parent.pc.z + (face.x[i] * parent.normalX) + (-face.z[i] * parent.normalZ)
);
}
this.points[3].next = false;
}
},
// ---- diapo constructor ----
Diapo = function (path, img, structure) {
// ---- create image ----
this.img = new ge1doot.transform3D.Image(
this, path + img.img, 1, {
isLoaded: function(img) {
img.parent.isLoaded = true;
img.parent.loaded(img);
}
}
);
this.visible = false;
this.normalX = img.nx;
this.normalZ = img.nz;
// ---- point center ----
this.pc = new ge1doot.transform3D.Point(img.x, img.y, img.z);
// ---- target positions ----
this.tx = img.x + (img.nx * Math.sqrt(camera.focalLength) * 20);
this.tz = img.z - (img.nz * Math.sqrt(camera.focalLength) * 20);
// ---- create polygons ----
this.poly = [];
for (var i = -1, p; p = structure[++i];) {
layers[i] = (p.img === true ? 1 : 2);
this.poly.push(
new Poly(this, p)
);
}
},
// ---- init section ----
init = function (json) {
// draw poly primitive
Poly.prototype.drawPoly = ge1doot.transform3D.drawPoly;
// ---- init screen ----
scr = new ge1doot.Screen({
container: "canvas"
});
ctx = scr.ctx;
scr.resize();
// ---- init pointer ----
pointer = new ge1doot.Pointer({
tap: function () {
if (camera.over) {
if (camera.over === camera.target.elem) {
// ---- return to the center ----
camera.target.x = 0;
camera.target.z = 0;
camera.target.elem = false;
} else {
// ---- goto diapo ----
camera.target.elem = camera.over;
camera.target.x = camera.over.tx;
camera.target.z = camera.over.tz;
// ---- adapt tesselation level to distance ----
for (var i = 0, d; d = diapo[i++];) {
var dx = camera.target.x - d.pc.x;
var dz = camera.target.z - d.pc.z;
var dist = Math.sqrt(dx * dx + dz * dz);
var lev = (dist > 1500) ? quality[0] : quality[1];
d.img.setLevel(lev);
}
}
}
}
});
// ---- init camera ----
camera = new ge1doot.transform3D.Camera({
focalLength: Math.sqrt(scr.width) * 10,
easeTranslation: 0.025,
easeRotation: 0.06,
disableRz: true
}, {
move: function () {
this.over = false;
// ---- rotation ----
if (pointer.isDraging) {
this.target.elem = false;
this.target.ry = -pointer.Xi * 0.01;
this.target.rx = (pointer.Y - scr.height * 0.5) / (scr.height * 0.5);
} else {
if (this.target.elem) {
this.target.ry = Math.atan2(
this.target.elem.pc.x - this.x,
this.target.elem.pc.z - this.z
);
}
}
this.target.rx *= 0.9;
}
});
camera.z = -10000;
camera.py = 0;
// ---- create images ----
for (var i = 0, img; img = json.imgdata[i++];) {
diapo.push(
new Diapo(
json.options.imagesPath,
img,
json.structure
)
);
}
// ---- start engine ---- >>>
setInterval(function() {
quality = (fps > 50) ? [2,3] : [1,2];
fps = 0;
}, 1000);
run();
},
// ---- main loop ----
run = function () {
// ---- clear screen ----
ctx.clearRect(0, 0, scr.width, scr.height);
// ---- camera ----
camera.move();
// ---- draw layers ----
for (var k = -1, l; l = layers[++k];) {
light = false;
for (var i = 0, d; d = diapo[i++];) {
(l === 1 && d.draw()) ||
(d.visible && d.poly[k].draw());
}
}
// ---- cursor ----
if (camera.over && !pointer.isDraging) {
scr.setCursor("pointer");
} else {
scr.setCursor("move");
}
// ---- loop ----
fps++;
requestAnimFrame(run);
};
/* ==== prototypes ==== */
Poly.prototype.draw = function () {
// ---- color light ----
var c = this.color;
if (c.light || !light) {
var s = c.light ? this.parent.light : 1;
// ---- rgba color ----
light = "rgba(" +
Math.round(c.r * s) + "," +
Math.round(c.g * s) + "," +
Math.round(c.b * s) + "," + (c.a || 1) + ")";
ctx.fillStyle = light;
}
// ---- paint poly ----
if (!c.light || this.parent.light < 1) {
// ---- projection ----
for (
var i = 0;
this.points[i++].projection();
);
this.drawPoly();
ctx.fill();
}
}
/* ==== image onload ==== */
Diapo.prototype.loaded = function (img) {
// ---- create points ----
var d = [-1,1,1,-1,1,1,-1,-1];
var w = img.texture.width * 0.5;
var h = img.texture.height * 0.5;
for (var i = 0; i < 4; i++) {
img.points[i] = new ge1doot.transform3D.Point(
this.pc.x + (w * this.normalZ * d[i]),
this.pc.y + (h * d[i + 4]),
this.pc.z + (w * this.normalX * d[i])
);
}
}
/* ==== images draw ==== */
Diapo.prototype.draw = function () {
// ---- visibility ----
this.pc.projection();
if (this.pc.Z > -(camera.focalLength >> 1) && this.img.transform3D(true)) {
// ---- light ----
this.light = 0.5 + Math.abs(this.normalZ * camera.cosY - this.normalX * camera.sinY) * 0.6;
// ---- draw image ----
this.visible = true;
this.img.draw();
// ---- test pointer inside ----
if (pointer.hasMoved || pointer.isDown) {
if (
this.img.isPointerInside(
pointer.X,
pointer.Y
)
) camera.over = this;
}
} else this.visible = false;
return true;
}
return {
// --- load data ----
load : function (data) {
window.addEventListener('load', function () {
ge1doot.loadJS(
"js/imageTransform3D.js",
init, data
);
}, false);
}
}
})().load({
imgdata:[
// north
{img:'imgs/1.jpg', x:-1000, y:0, z:1500, nx:0, nz:1},
{img:'imgs/2.jpg', x:0, y:0, z:1500, nx:0, nz:1},
{img:'imgs/3.jpg', x:1000, y:0, z:1500, nx:0, nz:1},
// east
{img:'imgs/4.jpg', x:1500, y:0, z:1000, nx:-1, nz:0},
{img:'imgs/5.jpg', x:1500, y:0, z:0, nx:-1, nz:0},
{img:'imgs/6.jpg', x:1500, y:0, z:-1000, nx:-1, nz:0},
// south
{img:'imgs/7.jpg', x:1000, y:0, z:-1500, nx:0, nz:-1},
{img:'imgs/8.jpg', x:0, y:0, z:-1500, nx:0, nz:-1},
{img:'imgs/9.jpg', x:-1000, y:0, z:-1500, nx:0, nz:-1},
// west
{img:'imgs/10.jpg', x:-1500, y:0, z:-1000, nx:1, nz:0},
{img:'imgs/11.jpg', x:-1500, y:0, z:0, nx:1, nz:0},
{img:'imgs/12.jpg', x:-1500, y:0, z:1000, nx:1, nz:0}
],
structure:[
{
// wall
fill: {r:255, g:255, b:255, light:1},
x: [-1001,-490,-490,-1001],
z: [-500,-500,-500,-500],
y: [500,500,-500,-500]
},{
// wall
fill: {r:255, g:255, b:255, light:1},
x: [-501,2,2,-500],
z: [-500,-500,-500,-500],
y: [500,500,-500,-500]
},{
// wall
fill: {r:255, g:255, b:255, light:1},
x: [0,502,502,0],
z: [-500,-500,-500,-500],
y: [500,500,-500,-500]
},{
// wall
fill: {r:255, g:255, b:255, light:1},
x: [490,1002,1002,490],
z: [-500,-500,-500,-500],
y: [500,500,-500,-500]
},{
// shadow
fill: {r:0, g:0, b:0, a:0.2},
x: [-420,420,420,-420],
z: [-500,-500,-500,-500],
y: [150, 150,-320,-320]
},{
// shadow
fill: {r:0, g:0, b:0, a:0.2},
x: [-20,20,20,-20],
z: [-500,-500,-500,-500],
y: [250, 250,150,150]
},{
// shadow
fill: {r:0, g:0, b:0, a:0.2},
x: [-20,20,20,-20],
z: [-500,-500,-500,-500],
y: [-320, -320,-500,-500]
},{
// shadow
fill: {r:0, g:0, b:0, a:0.2},
x: [-20,20,10,-10],
z: [-500,-500,-100,-100],
y: [-500, -500,-500,-500]
},{
// base
fill: {r:32, g:32, b:32},
x: [-50,50,50,-50],
z: [-150,-150,-50,-50],
y: [-500,-500,-500,-500]
},{
// support
fill: {r:16, g:16, b:16},
x: [-10,10,10,-10],
z: [-100,-100,-100,-100],
y: [300,300,-500,-500]
},{
// frame
fill: {r:255, g:255, b:255},
x: [-320,-320,-320,-320],
z: [0,-20,-20,0],
y: [-190,-190,190,190]
},{
// frame
fill: {r:255, g:255, b:255},
x: [320,320,320,320],
z: [0,-20,-20,0],
y: [-190,-190,190,190]
},
{img:true},
{
// ceilingLight
fill: {r:255, g:128, b:0},
x: [-50,50,50,-50],
z: [450,450,550,550],
y: [500,500,500,500]
},{
// groundLight
fill: {r:255, g:128, b:0},
x: [-50,50,50,-50],
z: [450,450,550,550],
y: [-500,-500,-500,-500]
}
],
options:{
imagesPath: ""
}
});
</script>
</head>
<body>
<canvas id="canvas">你的浏览器不支持HTML5画布技术，请使用谷歌浏览器。</canvas>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>
(3)ge1doot.js
////////////////////////////////////////////////////////////
// ============= micro HTML5 library =====================
// @author Gerard Ferrandez / http://www.dhteumeuleu.com/
// last update: May 27, 2013
// Released under the MIT license
// http://www.dhteumeuleu.com/LICENSE.html
////////////////////////////////////////////////////////////
// ===== ge1doot global =====
var ge1doot = ge1doot || {
json: null,
screen: null,
pointer: null,
camera: null,
loadJS: function (url, callback, data) {
if (typeof url == "string") url = [url];
var load = function (src) {
var script = document.createElement("script");
if (callback) {
if (script.readyState){
script.onreadystatechange = function () {
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
if (--n === 0) callback(data || false);
}
}
} else {
script.onload = function() {
if (--n === 0) callback(data || false);
}
}
}
script.src = src;
document.getElementsByTagName("head")[0].appendChild(script);
}
for (var i = 0, n = url.length; i < n; i++) load(url[i]);
}
}
// ===== html/canvas container =====
ge1doot.Screen = function (setup) {
ge1doot.screen = this;
this.elem = document.getElementById(setup.container) || setup.container;
this.ctx = this.elem.tagName == "CANVAS" ? this.elem.getContext("2d") : false;
this.style = this.elem.style;
this.left = 0;
this.top = 0;
this.width = 0;
this.height = 0;
this.cursor = "default";
this.setup = setup;
this.resize = function () {
var o = this.elem;
this.width = o.offsetWidth;
this.height = o.offsetHeight;
for (this.left = 0, this.top = 0; o != null; o = o.offsetParent) {
this.left += o.offsetLeft;
this.top += o.offsetTop;
}
if (this.ctx) {
this.elem.width = this.width;
this.elem.height = this.height;
}
this.setup.resize && this.setup.resize();
}
this.setCursor = function (type) {
if (type !== this.cursor && 'ontouchstart' in window === false) {
this.cursor = type;
this.style.cursor = type;
}
}
window.addEventListener('resize', function () {
ge1doot.screen.resize();
}, false);
!this.setup.resize && this.resize();
}
// ==== unified touch events handler ====
ge1doot.Pointer = function (setup) {
ge1doot.pointer = this;
var self = this;
var body = document.body;
var html = document.documentElement;
this.setup = setup;
this.screen = ge1doot.screen;
this.elem = this.screen.elem;
this.X = 0;
this.Y = 0;
this.Xi = 0;
this.Yi = 0;
this.bXi = 0;
this.bYi = 0;
this.Xr = 0;
this.Yr = 0;
this.startX = 0;
this.startY = 0;
this.scale = 0;
this.wheelDelta = 0;
this.isDraging = false;
this.hasMoved = false;
this.isDown = false;
this.evt = false;
var sX = 0;
var sY = 0;
// prevent default behavior
if (setup.tap) this.elem.onclick = function () { return false; }
if (!setup.documentMove) {
document.ontouchmove = function(e) { e.preventDefault(); }
}
document.addEventListener("MSHoldVisual", function(e) { e.preventDefault(); }, false);
if (typeof this.elem.style.msTouchAction != 'undefined') this.elem.style.msTouchAction = "none";
this.pointerDown = function (e) {
if (!this.isDown) {
if (this.elem.setCapture) this.elem.setCapture();
this.isDraging = false;
this.hasMoved = false;
this.isDown = true;
this.evt = e;
this.Xr = (e.clientX !== undefined ? e.clientX : e.touches[0].clientX);
this.Yr = (e.clientY !== undefined ? e.clientY : e.touches[0].clientY);
this.X = sX = this.Xr - this.screen.left;
this.Y = sY = this.Yr - this.screen.top + ((html && html.scrollTop) || body.scrollTop);
this.setup.down && this.setup.down(e);
}
}
this.pointerMove = function(e) {
this.Xr = (e.clientX !== undefined ? e.clientX : e.touches[0].clientX);
this.Yr = (e.clientY !== undefined ? e.clientY : e.touches[0].clientY);
this.X = this.Xr - this.screen.left;
this.Y = this.Yr - this.screen.top + ((html && html.scrollTop) || body.scrollTop);
if (this.isDown) {
this.Xi = this.bXi + (this.X - sX);
this.Yi = this.bYi - (this.Y - sY);
}
if (Math.abs(this.X - sX) > 11 || Math.abs(this.Y - sY) > 11) {
this.hasMoved = true;
if (this.isDown) {
if (!this.isDraging) {
this.startX = sX;
this.startY = sY;
this.setup.startDrag && this.setup.startDrag(e);
this.isDraging = true;
} else {
this.setup.drag && this.setup.drag(e);
}
} else {
sX = this.X;
sY = this.Y;
}
}
this.setup.move && this.setup.move(e);
}
this.pointerUp = function(e) {
this.bXi = this.Xi;
this.bYi = this.Yi;
if (!this.hasMoved) {
this.X = sX;
this.Y = sY;
this.setup.tap && this.setup.tap(this.evt);
} else {
this.setup.up && this.setup.up(this.evt);
}
this.isDraging = false;
this.isDown = false;
this.hasMoved = false;
this.setup.up && this.setup.up(this.evt);
if (this.elem.releaseCapture) this.elem.releaseCapture();
this.evt = false;
}
this.pointerCancel = function(e) {
if (this.elem.releaseCapture) this.elem.releaseCapture();
this.isDraging = false;
this.hasMoved = false;
this.isDown = false;
this.bXi = this.Xi;
this.bYi = this.Yi;
sX = 0;
sY = 0;
}
if ('ontouchstart' in window) {
this.elem.ontouchstart = function (e) { self.pointerDown(e); return false; }
this.elem.ontouchmove = function (e) { self.pointerMove(e); return false; }
this.elem.ontouchend = function (e) { self.pointerUp(e); return false; }
this.elem.ontouchcancel = function (e) { self.pointerCancel(e); return false;}
}
document.addEventListener("mousedown", function (e) {
if (
e.target === self.elem ||
(e.target.parentNode && e.target.parentNode === self.elem) ||
(e.target.parentNode.parentNode && e.target.parentNode.parentNode === self.elem)
) {
if (typeof e.stopPropagation != "undefined") {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
e.preventDefault();
self.pointerDown(e);
}
}, false);
document.addEventListener("mousemove", function (e) { self.pointerMove(e); }, false);
document.addEventListener("mouseup", function (e) {
self.pointerUp(e);
}, false);
document.addEventListener('gesturechange', function(e) {
e.preventDefault();
if (e.scale > 1) self.scale = 0.1; else if (e.scale < 1) self.scale = -0.1; else self.scale = 0;
self.setup.scale && self.setup.scale(e);
return false;
}, false);
if (window.navigator.msPointerEnabled) {
var nContact = 0;
var myGesture = new MSGesture();
myGesture.target = this.elem;
this.elem.addEventListener("MSPointerDown", function(e) {
if (e.pointerType == e.MSPOINTER_TYPE_TOUCH) {
myGesture.addPointer(e.pointerId);
nContact++;
}
}, false);
this.elem.addEventListener("MSPointerOut", function(e) {
if (e.pointerType == e.MSPOINTER_TYPE_TOUCH) {
nContact--;
}
}, false);
this.elem.addEventListener("MSGestureHold", function(e) {
e.preventDefault();
}, false);
this.elem.addEventListener("MSGestureChange", function(e) {
if (nContact > 1) {
if (e.preventDefault) e.preventDefault();
self.scale = e.velocityExpansion;
self.setup.scale && self.setup.scale(e);
}
return false;
}, false);
}
if (window.addEventListener) this.elem.addEventListener('DOMMouseScroll', function(e) {
if (e.preventDefault) e.preventDefault();
self.wheelDelta = e.detail * 10;
self.setup.wheel && self.setup.wheel(e);
return false;
}, false);
this.elem.onmousewheel = function () {
self.wheelDelta = -event.wheelDelta * .25;
self.setup.wheel && self.setup.wheel(event);
return false;
}
}
// ===== request animation frame =====
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( run ){
window.setTimeout(run, 16);
};
})();
(4) imageTransform3D.js
////////////////////////////////////////////////////////////
// ==== HTML5 CANVAS transform Image ====
// full 3D version
// @author Gerard Ferrandez / http://www.dhteumeuleu.com/
// last update: Dec 8, 2012
// Released under the MIT license
// http://www.dhteumeuleu.com/LICENSE.html
////////////////////////////////////////////////////////////
"use strict";
var ge1doot = ge1doot || {};
ge1doot.transform3D = {};
/* ==== draw Poly ==== */
ge1doot.transform3D.drawPoly = function () {
this.ctx.beginPath();
this.ctx.moveTo(this.points[0].X, this.points[0].Y);
this.ctx.lineTo(this.points[1].X, this.points[1].Y);
this.ctx.lineTo(this.points[2].X, this.points[2].Y);
this.ctx.lineTo(this.points[3].X, this.points[3].Y);
this.ctx.closePath();
}
/* =============== camera constructor ================= */
ge1doot.transform3D.Camera = function (setup, func) {
ge1doot.camera = this;
this.x = 0;
this.y = 0;
this.z = 0;
this.rx = 0;
this.ry = 0;
this.rz = 0;
this.focalLength = setup.focalLength || 500;
this.easeTranslation = setup.easeTranslation || 0.1;
this.easeRotation = setup.easeRotation || 0.025;
this.enableRx = setup.disableRx ? false : true;
this.enableRy = setup.disableRy ? false : true;
this.enableRz = setup.disableRz ? false : true;
this.cmov = false;
this.cosX = 1;
this.sinX = 0;
this.cosY = 1;
this.sinY = 0;
this.cosZ = 1;
this.sinZ = 0;
this.target = {
over: false,
elem: false,
x: 0,
y: 0,
z: 0,
rx: 0,
ry: 0,
rz: 0
};
// ---- def custom move ----
if (func && func.move) this.cmov = func.move;
}
/* ==== easing ==== */
ge1doot.transform3D.Camera.prototype.ease = function (target, value) {
while (Math.abs(target - value) > Math.PI) {
if (target < value) value -= 2 * Math.PI;
else value += 2 * Math.PI;
}
return (target - value) * this.easeRotation;
}
/* ==== move / rotate camera ==== */
ge1doot.transform3D.Camera.prototype.move = function () {
// ---- run custom function ----
this.cmov && this.cmov();
// ---- translations ----
this.x += (this.target.x - this.x) * this.easeTranslation;
this.y += (this.target.y - this.y) * this.easeTranslation;
this.z += (this.target.z - this.z) * this.easeTranslation;
// ---- rotation rx ----
if (this.enableRx) {
this.rx += this.ease(this.target.rx, this.rx);
this.cosX = Math.cos(this.rx);
this.sinX = Math.sin(this.rx);
}
// ---- rotation ry ----
if (this.enableRy) {
this.ry += this.ease(this.target.ry, this.ry);
this.cosY = Math.cos(this.ry);
this.sinY = Math.sin(this.ry);
}
// ---- rotation rz ----
if (this.enableRz) {
this.rz += this.ease(this.target.rz, this.rz);
this.cosZ = Math.cos(this.rz);
this.sinZ = Math.sin(this.rz);
}
}
/* =============== point constructor ================= */
ge1doot.transform3D.Point = function (x, y, z, tx, ty) {
this.x = x;
this.y = y;
this.z = z;
this.tx = tx || 0;
this.ty = ty || 0;
this.visible = false;
this.scale = 0;
this.X = 0;
this.Y = 0;
this.Z = 0;
this.next = true;
}
/* ==== perspective projection ==== */
ge1doot.transform3D.Point.prototype.projection = function () {
var sw = this.scr.width >> 1;
var sh = this.scr.height >> 1;
// ---- 3D coordinates ----
var nx = this.x - this.camera.x;
var ny = this.y - this.camera.y;
var nz = this.z - this.camera.z;
// ---- 3D rotation and projection ----
if (this.camera.enableRz) {
var u = this.camera.sinZ * ny + this.camera.cosZ * nx;
var t = this.camera.cosZ * ny - this.camera.sinZ * nx;
} else {
var u = nx;
var t = ny;
}
var s = this.camera.cosY * nz + this.camera.sinY * u;
this.Z = this.camera.cosX * s - this.camera.sinX * t;
this.scale = this.camera.focalLength / Math.max(1, this.Z);
this.X = sw + (this.camera.cosY * u - this.camera.sinY * nz) * this.scale;
this.Y = -(this.camera.y >> 1) + sh - (this.camera.sinX * s + this.camera.cosX * t) * this.scale;
// ---- visibility test ----
this.visible = (
this.X > -sw * 0.5 && this.X < sw * 2.5
) && (
this.Y > -sh * 0.5 && this.Y < sh * 2.5
);
// ----return next (fast loop) ----
return this.next;
}
/* ==== triangle constructor ==== */
ge1doot.transform3D.Triangle = function (parent, p0, p1, p2) {
this.ctx = parent.ctx;
this.texture = parent.texture;
this.p0 = p0;
this.p1 = p1;
this.p2 = p2;
this.d = p0.tx * (p2.ty - p1.ty) - p1.tx * p2.ty + p2.tx * p1.ty + (p1.tx - p2.tx) * p0.ty;
this.pmy = p1.ty - p2.ty;
this.pmx = p1.tx - p2.tx;
this.pxy = p2.tx * p1.ty - p1.tx * p2.ty;
if (parent.t) parent.t.next = true;
}
/* ==== draw triangle ==== */
ge1doot.transform3D.Triangle.prototype.draw = function () {
if (this.p0.visible || this.p1.visible || this.p2.visible) {
var dx, dy, d;
// ---- centroid ----
var xc = (this.p0.X + this.p1.X + this.p2.X) / 3;
var yc = (this.p0.Y + this.p1.Y + this.p2.Y) / 3;
// ---- clipping ----
this.ctx.save();
this.ctx.beginPath();
dx = xc - this.p0.X;
dy = yc - this.p0.Y;
d = Math.max(Math.abs(dx), Math.abs(dy));
this.ctx.moveTo(this.p0.X - 2 * (dx / d), this.p0.Y - 2 * (dy / d));
dx = xc - this.p1.X;
dy = yc - this.p1.Y;
d = Math.max(Math.abs(dx), Math.abs(dy));
this.ctx.lineTo(this.p1.X - 2 * (dx / d), this.p1.Y - 2 * (dy / d));
dx = xc - this.p2.X;
dy = yc - this.p2.Y;
d = Math.max(Math.abs(dx), Math.abs(dy));
this.ctx.lineTo(this.p2.X - 2 * (dx / d), this.p2.Y - 2 * (dy / d));
this.ctx.closePath();
this.ctx.clip();
// ---- transform ----
var t0 = this.p2.X - this.p1.X,
t1 = this.p1.Y - this.p2.Y,
t2 = this.p2.ty * this.p1.X,
t3 = this.p1.tx * this.p2.X,
t4 = this.p2.ty * this.p1.Y,
t5 = this.p1.ty * this.p2.X,
t6 = this.p1.ty * this.p2.Y,
t7 = this.p2.tx * this.p1.X,
t8 = this.p1.tx * this.p2.Y,
t9 = this.p2.tx * this.p1.Y;
this.ctx.transform(
-(this.p0.ty * t0 - t5 + t2 + this.pmy * this.p0.X) / this.d, // m11
(t6 + this.p0.ty * t1 - t4 - this.pmy * this.p0.Y) / this.d, // m12
(this.p0.tx * t0 - t3 + t7 + this.pmx * this.p0.X) / this.d, // m21
-(t8 + this.p0.tx * t1 - t9 - this.pmx * this.p0.Y) / this.d, // m22
(this.p0.tx * (t2 - t5) + this.p0.ty * (t3 - t7) + this.pxy * this.p0.X) / this.d, // dx
(this.p0.tx * (t4 - t6) + this.p0.ty * (t8 - t9) + this.pxy * this.p0.Y) / this.d // dy
);
// ---- draw ----
this.ctx.drawImage(this.texture, 0, 0);
this.ctx.restore();
}
return this.next;
}
/* ===================== image constructor ========================== */
ge1doot.transform3D.Image = function (parent, imgSrc, lev, callback) {
this.parent = parent;
this.points = [];
this.triangles = [];
this.ctx = ge1doot.screen.ctx;
this.pointer = ge1doot.pointer;
this.texture = new Image();
this.texture.src = imgSrc;
this.isLoading = true;
this.callback = callback;
this.textureWidth = 0;
this.textureHeight = 0;
this.level = lev || 1;
this.visible = false;
this.t = false;
if (!ge1doot.transform3D.Point.prototype.scr) {
ge1doot.transform3D.Point.prototype.scr = ge1doot.screen;
ge1doot.transform3D.Point.prototype.camera = ge1doot.camera;
}
}
/* ==== drawPoly prototype ==== */
ge1doot.transform3D.Image.prototype.drawPoly = ge1doot.transform3D.drawPoly;
/* ==== change tessellation level prototype ==== */
ge1doot.transform3D.Image.prototype.setLevel = function (level) {
this.points.length = 0;
this.triangles.length = 0;
this.level = level;
this.loading();
}
/* ==== loading prototype ==== */
ge1doot.transform3D.Image.prototype.loading = function () {
if (this.texture.complete) {
var dir = [0,1,1,0,0,0,1,1];
this.isLoading = false;
// ---- image size ----
this.textureWidth = this.texture.width;
this.textureHeight = this.texture.height;
// ---- isLoaded callback ---
this.callback && this.callback.isLoaded && this.callback.isLoaded(this);
// ---- texture position ----
for (var i = -1, p; p = this.points[++i];) {
p.tx = this.textureWidth * dir[i];
p.ty = this.textureHeight * dir[i+4];
}
// ---- triangularization ----
this.triangulate(this.points[0], this.points[1], this.points[2], this.level);
this.triangulate(this.points[0], this.points[2], this.points[3], this.level);
// ---- last point ----
this.points[this.points.length - 1].next = false;
}
}
/* ==== vector bisection function ==== */
ge1doot.transform3D.Image.prototype.subdivise = function (p0, p1) {
return {
x: (p1.x + p0.x) * 0.5,
y: (p1.y + p0.y) * 0.5,
z: (p1.z + p0.z) * 0.5,
tx: (p1.tx + p0.tx) * 0.5,
ty: (p1.ty + p0.ty) * 0.5
};
}
/* ==== triangulation ==== */
ge1doot.transform3D.Image.prototype.triangulate = function (p0, p1, p2, level) {
level--;
if (level === 0) {
// final triangle
this.t = new ge1doot.transform3D.Triangle(this, p0, p1, p2);
this.triangles.push(this.t);
} else {
// ---- subdivision ----
var p01 = this.subdivise(p0, p1);
var p12 = this.subdivise(p1, p2);
var p20 = this.subdivise(p2, p0);
// ---- insert new points ----
this.points.push(p01 = new ge1doot.transform3D.Point(p01.x, p01.y, p01.z, p01.tx, p01.ty));
this.points.push(p12 = new ge1doot.transform3D.Point(p12.x, p12.y, p12.z, p12.tx, p12.ty));
this.points.push(p20 = new ge1doot.transform3D.Point(p20.x, p20.y, p20.z, p20.tx, p20.ty));
// ---- recursive triangulation ----
this.triangulate(p0, p01, p20, level);
this.triangulate(p01, p1, p12, level);
this.triangulate(p20, p12, p2, level);
this.triangulate(p01, p12, p20, level);
}
}
/* ==== transform prototype ==== */
ge1doot.transform3D.Image.prototype.transform3D = function (backfaceTest) {
if (this.isLoading) {
// ---- image is loading ----
this.loading();
return false;
} else {
// ---- project points ----
for (
var i = 0;
this.points[i++].projection();
);
if (backfaceTest) {
var p0 = this.points[0];
var p1 = this.points[1];
var p2 = this.points[2];
return (
((p1.Y - p0.Y) / (p1.X - p0.X) -
(p2.Y - p0.Y) / (p2.X - p0.X) < 0) ^
(p0.X <= p1.X == p0.X > p2.X)
);
} else return true;
}
}
/* ==== draw prototype ==== */
ge1doot.transform3D.Image.prototype.draw = function () {
if (!this.isLoading) {
// ---- draw triangles ----
for (
var i = 0;
this.triangles[i++].draw();
);
}
}
/* ==== isPointerInside prototype ==== */
ge1doot.transform3D.Image.prototype.isPointerInside = function (x, y) {
this.drawPoly(this.points);
return this.ctx.isPointInPath(x, y);
}