18 Star 27 Fork 12

荣木 / cardmaker

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
Clone or download
index.html 3.46 KB
Copy Edit Web IDE Raw Blame History
stuart authored 2015-02-06 14:48 . 完成基本功能
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="telephone=no" name="format-detection" />
<title>自制拜年贺卡</title>
<link rel="stylesheet" href="css/card.css"></head>
<body>
<img class="shareimg" src="images/share.jpg" alt="" />
<div class="mask"></div>
<div class="wrapper">
<input type="hidden" name="base64" id="base64" />
<!--上传-->
<div class="upform">
<div class="uploadbox">
<img src="images/blank.gif" class="blank" alt="">
<input id="image_uploader" name="pic" class="fileupload-new" type="file" />
</div>
</div>
<!--图片编辑-->
<div class="cardwrapper hide" id="createbox">
<div class="cardbox">
<img src="" id="preview" alt="">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="cards/c1.png" id="theme" alt="" />
</div>
<div class="swiper-slide">
<img src="cards/c2.png" alt="" />
</div>
<div class="swiper-slide">
<img src="cards/c3.png" alt="" />
</div>
<div class="swiper-slide">
<img src="cards/1.png" id="theme" alt="" />
</div>
<div class="swiper-slide">
<img src="cards/2.png" alt="" />
</div>
<div class="swiper-slide">
<img src="cards/3.png" alt="" />
</div>
<div class="swiper-slide">
<img src="cards/4.png" id="theme" alt="" />
</div>
<div class="swiper-slide">
<img src="cards/5.png" alt="" />
</div>
<div class="swiper-slide">
<img src="cards/6.png" alt="" />
</div>
</div>
</div>
</div>
<div class="btbt create" onclick="Card.previewCard();">合成</div>
</div>
<!--合成预览-->
<div class="imgbox hide">
<div class="imgtitle">合成中...</div>
<div class="sharetipbox">分享给好友,邀他们一起制作贺卡吧</div>
<div class="cardresult">
<img id="cardresult" src="http://tpl-thumb.qiniudn.com/no.gif" alt="" />
</div>
</div>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/postcard.js" type="text/javascript"></script>
<script src="js/card.js" type="text/javascript"></script>
<script src="js/up.js"></script>
<script src="js/swiper.js"></script>
<script>
$("#upc").delegate("#image_uploader", "click", function() {
Card.showLoading();
});
$(function() {
//选择图片预览
$('#image_uploader').makeThumb({
width: 400,
height: 400,
success: function(dataURL, tSize, file, sSize, fEvt) {
Card.hideLoading();
$("#base64").val(dataURL);
$("#preview").attr("src", dataURL).css({
"height":$(window).height()
});
Card.postImg();
}
});
Card.fixBox();
});
</script>
</div>
<div id="shadow" class="maskboxer">
<img src="images/loading.gif" />
</div>
<div class="maskboxer orientation-tips">
<span>亲,竖屏操作体验更好哦</span>
</div>
</body>
</html>

Comment ( 0 )

Sign in for post a comment

JavaScript
1
https://gitee.com/stuart/cardmaker.git
git@gitee.com:stuart/cardmaker.git
stuart
cardmaker
cardmaker
master

Search