Commit c67021c7 authored by liujiangnan's avatar liujiangnan

feat: 闪卡模板

parent 885cdb10
.edit-data{ .edit-data{
padding: 10px; padding: 10px;
}
.el-input {
position: relative;
font-size: 14px;
display: inline-block;
width: 100%;
}
.el-input__inner {
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
line-height: 40px;
outline: none;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
width: 100%;
} }
\ No newline at end of file
...@@ -11,9 +11,10 @@ ...@@ -11,9 +11,10 @@
</head> </head>
<body> <body>
<div class="edit-data"> <div class="edit-data">
<!-- 简单的例子,一个输入框+一个按钮,保存输入框的信息 --> <div class="el-input">
test: <input type="text" name="test" /> <textarea type="text" rows="5" data_id="text" class="el-input__inner" placeholder="请输入文字,用逗号隔开"></textarea>
<input id="save" type="button" value="保存" > </div>
<p style="color: #F56C6C;">备注:四个字以内逗号间隔效果最好</p>
</div> </div>
</body> </body>
<script src="./index.js"></script> <script src="./index.js"></script>
......
...@@ -10,26 +10,20 @@ var uploadData = window.courseware.uploadData(); //上传文件必须要的参 ...@@ -10,26 +10,20 @@ var uploadData = window.courseware.uploadData(); //上传文件必须要的参
*/ */
//对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱 //对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
var key = "h5_test"; var key = "hw_020";
$(function(){ $(function(){
window.courseware.getData(function(data){ window.courseware.getData(function(data){
//数据加载完,才算页面加载完成 //数据加载完,才算页面加载完成
//获取数据 //获取数据
if(data&&data.test){ if(data&&data.text){
$("[name='test']").val(data.test); $("[data_id='text']").val(data.text);
} }
//绑定点击事件 $("[data_id='text']").change(function(){
$('#save').on('click',function(){
var test = $("[name='test']").val();
//保存新增或修改的数据 //保存新增或修改的数据
window.courseware.setData({test: test},function(){ window.courseware.setData({text: $(this).val()}, null, key);
//保存数据也是异步的 });
alert("保存成功!");
},key);
})
},key); },key);
}) })
\ No newline at end of file
body { .bg {
background: #fff; position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
background: url(../lib/images/bg.jpg);
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
} }
#test{ .card {
margin: 80px; width: 60vw;
height: 50vw;
text-align: center;
line-height: 50vw;
font-weight: bold;
font-size: 10vw;
}
.card-bg-1 {
background: url(../lib/images/frame_1.png);
background-size: 100% 100%;
color: #fed939;
}
.card-bg-2 {
background: url(../lib/images/frame_2.png);
background-size: 100% 100%;
color: #c5f54d;
}
.card-bg-3 {
background: url(../lib/images/frame_3.png);
background-size: 100% 100%;
color: #55ecfd;
}
.pipo {
position: relative;
animation: pipo .4s forwards ease-in-out;
}
.moveout {
position: relative;
animation: moveout .8s forwards;
}
@keyframes moveout {
0% { top: 0vw; right: 0vw; transform: rotate(0deg); }
100% { top: -50vw; right: -100vw; transform: rotate(90deg); }
}
@keyframes pipo {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
} }
\ No newline at end of file
...@@ -10,7 +10,9 @@ ...@@ -10,7 +10,9 @@
<script type="text/javascript" src="//staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script> <script type="text/javascript" src="//staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
</head> </head>
<body> <body>
<h1 id="test"></h1> <div class="bg">
<div class="card card-bg-1"></div>
</div>
</body> </body>
<script src="./index.js"></script> <script src="./index.js"></script>
</html> </html>
\ No newline at end of file
...@@ -9,35 +9,68 @@ window.air.hideAirClassLoading(key,data); //页面加载完成时,必须调 ...@@ -9,35 +9,68 @@ window.air.hideAirClassLoading(key,data); //页面加载完成时,必须调
//对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱 //对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
var key = "h5_test"; var key = "hw_020";
$(function(){ // 分别为一个字、两个字、三个字.... 的字体大小
const fontSizes = ["30vw", "23vw", "15vw", "10vw"];
// 默认数据
let textArr = ["A","B"];
function getRandom(index){
const arr = [1, 2, 3];
arr.splice(arr.indexOf(index), 1);
const i = Math.ceil( Math.random() * 2 );
return arr[i-1];
}
function getFontSize(txt) {
return txt.length-1>3?3:txt.length-1;
}
$(function(){
window.courseware.getData(function(data){ window.courseware.getData(function(data){
//数据加载完,才算页面加载完成 //数据加载完,才算页面加载完成
//获取数据 //获取数据
if(data&&data.test){ if(data&&data.text){
$("#test").html("Hello "+data.test); textArr = data.text.replace(/,/g, ",").split(",");
} else{ const len = getFontSize(textArr[0]);
//一般来讲,如果没有获取到数据的话,给一组默认数据,用于演示模板的展示效果,方便别人了解这个模板 $(".card").css("font-size", fontSizes[len]).html(textArr[0]);
$("#test").html("Hello 我是演示信息!"); }
}
//数据渲染完成后,添加各种交互或者动画效果
//我这里简单做一个渐入渐出效果的例子
var flag = true;
setInterval(function(){
if(flag){
$("#test").fadeIn(500);
}else{
$("#test").fadeOut(500);
}
flag = !flag;
},1000)
//在页面加载、事件、动画等都初始化完成后,一定要记得调用此方法,否则模板将是不可用的 //在页面加载、事件、动画等都初始化完成后,一定要记得调用此方法,否则模板将是不可用的
window.air.hideAirClassLoading(key,data); window.air.hideAirClassLoading(key,data);
},key); },key);
var clickFlag = false;
var bgRandom = 1;
var fontIndex = 1;
$(".bg").click(function (){
if(clickFlag){
return;
}
clickFlag = true;
const realCard = $(".card");
const cloneCard = realCard.clone(true).css({
"position": "absolute",
"top": realCard.position().y,
"left": realCard.position().x,
});
$(this).append(cloneCard);
cloneCard.on('animationend', function(e) {
$(this).remove();
clickFlag = false;
}).addClass("moveout");
bgRandom = getRandom(bgRandom);
const len = getFontSize(textArr[fontIndex]);
realCard.css("font-size", fontSizes[len]).html(textArr[fontIndex]);
realCard.attr("class", `card card-bg-${bgRandom} pipo`);
if(fontIndex>=textArr.length-1){
fontIndex = 0;
}else{
fontIndex ++;
}
});
$(".card").on('animationend', function(e) {
$(this).removeClass("pipo");
});
}) })
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment