先给大家看下页面效果: 一键圣诞帽
------这张图片源码到手后大家可以随便换的！！！
废话不多说，直接上源码：
这里是部分代码！！！
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一键圣诞帽</title>
<meta name="description" itemprop="description" content="我刚更新了圣诞头像，你们也来试试吧！" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="static/global.css" />
<link rel="stylesheet" type="text/css" href="static/main.css" />
</head>
<body>
<img id="defaultImg" class="invisible" src="static/home-default.png" />
<input id="uploadInput" class="invisible" type="file" accept="image/*" />
<div id="wrapperOuter" class="wrapper-outer">
<div id="welcomeSection" class="wrapper-inner welcome-section" style="background-image:url(static/home-bg.png);display:none;">
<img class="title" src="static/home-title.png" />
<img class="default" src="static/home-default.png" />
<img class="choose-btn" src="static/home-choose-btn.png" />
</div>
<div id="resultSection" class="wrapper-inner result-section" style="background-image:url(static/home-bg.png);display:none;">
<img class="title" src="static/home-title.png" />
<img id="resultImg" class="photo" />
<img class="choose-btn" src="static/home-choose-btn.png" />
<img class="choose-btn" style="cursor:default;width:24%;bottom:1%;left:37%;" src="static/pitu_logo.png" />
</div>
<div id="cropSection" class="wrapper-inner crop-section" style="display:none;">
<div id="cropLayer" class="crop-layer">
<canvas id="cropCanvas" width="420" height="420"></canvas>
<img id="cropImg" style="display:none;" />
<div class="background"> </div>
</div>
<div id="cropMaskUp" class="crop-mask" style="visibility:hidden;"> </div>
<div id="cropMaskDown" class="crop-mask" style="visibility:hidden;"> </div>
<div id="cropBar" class="crop-bar">
<div class="choose-btn">重新选图</div>
<div class="next-btn">下一步</div>
</div>
</div>
<div id="hatSection" class="wrapper-inner hat-section" style="display:none;">
<div id="hatLayer" class="hat-layer">
<img id="hatFace" />
<div class="background"> </div>
<div id="hatStamp" class="hat-stamp-on" style="left:0;top:0;" scale="1.0" rotation="0">
<img class="hat-icon" src="static/icon-hat.png" />
<div class="background"> </div>
<div class="hat-anchor-ld" anchor="1" style="background-image:url(static/icon-anchor.png);"> </div>
<div class="hat-anchor-rd" anchor="1" style="background-image:url(static/icon-anchor.png);"> </div>
</div>
</div>
<div id="hatMaskUp" class="hat-mask" style="visibility:hidden;"> </div>
<div id="hatMaskDown" class="hat-mask" style="visibility:hidden;"> </div>
<div id="hatBar" class="hat-bar">
<div class="move-tips">移动圣诞帽到恰当位置</div>
<div class="confirm-btn">确定</div>
</div>
</div>
<div id="saveSection" class="wrapper-inner save-section" style="background-image:url(static/home-bg.png);display:none;">
<div class="share-img">
<img id="shareImg" />
<div class="save-tips">长按可保存头像</div>
<div class="qzcache-tips" style="display:none;">QQ空间头像若未显示，清除缓存后再试</div>
</div>
<div class="retry-btn">再定制一张</div>
</div>
<div id="loadingSection" class="wrapper-inner loading-section">
<div class="body">
<p>loading...</p>
<img class="animate" src="" style="display: none" />
<p></p>
<div style="display:none;">关闭</div>
</div>
</div>
<div id="shareSection" class="wrapper-inner share-section" style="display:none;">
<div class="background"> </div>
<img src="static/share-guide.png" />
</div>
<div id="qrcodeSection" class="wrapper-inner qrcode-section" style="display:none;">
<div class="background"> </div>
<div class="body">
<img id="qrcodeImg" />
<p>请使用手机扫码体验</p>
</div>
</div>
</div>
<!-- <div class="weixin">感兴趣的朋友可以加下方微信：</br>
<span style="color:cyan;"> woshishichunyuya</span>
</div> -->
<div style="
position: fixed;
top: 0;
left: 0;
width: 100px;
height: 40px;
z-index: 99999999999;
"><a href="../index.html"><img style="width:100%" src="../index/images/toindex.png" alt=""></a></div>
<div style=
"color: rgba(255, 255, 255, 0.5);
font-size: 0.9em;
margin: 0 0 2em 0;
padding: 0;
text-align: center;
position: fixed;
width: 100%;
margin: 0 auto;
bottom: 0;
z-index: 9999999999;">Copyright © 2019.Shichunyu All rights reserved.</div>
<script src="static/html2canvas.min.js"></script>
<script type="text/javascript">
function loadScript(filepath, onloadCallback) {
var scriptDom = document.createElement("script");
scriptDom.onload = scriptDom.onreadystatechange = onloadCallback;
scriptDom.type = "text/javascript";
scriptDom.src = filepath;
document.body.appendChild(scriptDom);
}
var zeptoScriptLoaded = false;
var extScriptLoaded = false;
var globalScriptLoaded = false;
var mainScriptLoaded = false;
var scriptAllLoaded = false;
function scriptLoadFinish() {
if (!scriptAllLoaded && zeptoScriptLoaded && extScriptLoaded && globalScriptLoaded && mainScriptLoaded) {
scriptAllLoaded = true;
window.setTimeout(function(){
pageReady(indexPageReady, indexPageResize);
}, 0);
}
}
loadScript("static/zepto-1.1.4.js", function(){
if (!zeptoScriptLoaded && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
zeptoScriptLoaded = true;
window.setTimeout(scriptLoadFinish, 0);
}
});
loadScript("static/ext-1.0.1.js", function(){
if (!extScriptLoaded && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
extScriptLoaded = true;
window.setTimeout(scriptLoadFinish, 0);
}
});
loadScript("static/global.js", function(){
if (!globalScriptLoaded && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
globalScriptLoaded = true;
window.setTimeout(scriptLoadFinish, 0);
}
});
loadScript("static/main.js", function(){
if (!mainScriptLoaded && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
mainScriptLoaded = true;
window.setTimeout(scriptLoadFinish, 0);
}
});
</script>
</body>
</html>
核心代码以及全部文件夹可以这这里下载：制作圣诞帽源码！！！_海龟编辑器源码-互联网文档类资源-CSDN下载
没有积分的同学可以关注我，然后私信我给你发。
1210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
