Skip to content

Commit

Permalink
支持祝福文字显示图片
Browse files Browse the repository at this point in the history
  • Loading branch information
baker committed Dec 17, 2019
1 parent 3945c6e commit 6eed6ad
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 2 deletions.
9 changes: 9 additions & 0 deletions assets/stylesheet.css
Original file line number Diff line number Diff line change
Expand Up @@ -1279,6 +1279,15 @@ audio {
text-shadow: 2px 2px 2px #FFF;
display: none;
font-weight: bold;
text-align: center;
}
.message p img{
display: block;
max-width: 80%;
max-height: 200px;
margin: 5px auto;
border-radius: 50%;
box-shadow: #aaa 0 0 4px;
}

.btn-primary {
Expand Down
15 changes: 14 additions & 1 deletion config.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,21 @@ var config = {
"今年要吃好的喽哦",
"要把我家可爱猪猪喂饱饱",
"然后抱走",
"YAMI~~"
"YAMI~~",
],
/**
* imgs 可以不填, 但是如果要填写的话必须遵循下面的格式
* "对应上面的文字, 要完全一样" : "图片地址, 可以把图片放在imgs文件夹中"
* 例如
* "心爱的小可爱": "./imgs/xiaokeai.jpg"
*
* 如果不要图片的话, 直接在每行开头写两个斜杠注释即可, 例如下面的 "今天是你的生日" 的图片就不会展示了:)
* Tip: 图片最好用正方形or接近正方形, 看起来效果更好
*/
imgs: {
"心爱的小可爱": "./imgs/xiaokeai.png",
// "今天是你的生日": "./imgs/birthday.jpg",
},
// 按钮文字描述, 以下是默认的按钮文字,英文的,您可以改成你喜欢的文字
desc: {
turn_on: "开始",
Expand Down
6 changes: 6 additions & 0 deletions custom.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@ $(function () {
config.texts.forEach(function (item) {
let p = document.createElement("p");
p.innerHTML = item;
if (config.imgs[item]) {
let img = document.createElement("img");
img.src = config.imgs[item];
img.setAttribute("class", 'text-img');
p.appendChild(img);
}
dom.appendChild(p);
});
$("#texts-container").append(dom.innerHTML);
Expand Down
Binary file added imgs/xiaokeai.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 19 additions & 1 deletion readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,12 @@

> <b>修改config.js的配置就可以为您心爱的人做一个超具创意的网页生日快乐呀,喜欢的话fork or star一下呗~</b>
## TODO
* [x] 每行祝福文字可以配一张图片
* [-] 配图支持旋转

### config.js 说明
> 温馨提示: 每句话丶每个图片地址丶每个按钮文字的那一行,最后都要以**英文逗号**结尾哦!
```text
var config = {
// 句子的长度可以任意, 你可以写十句话, 二十句话都可以
Expand All @@ -18,8 +23,21 @@ var config = {
"今年要吃好的喽哦",
"要把我家可爱猪猪喂饱饱",
"然后抱走",
"YAMI~~"
"YAMI~~",
],
/**
* imgs 可以不填, 但是如果要填写的话必须遵循下面的格式
* "对应上面的文字, 要完全一样" : "图片地址, 可以把图片放在imgs文件夹中"
* 例如
* "心爱的小可爱": "./imgs/xiaokeai.jpg"
*
* 如果不要图片的话, 直接在每行开头写两个斜杠注释即可, 例如下面的 "今天是你的生日" 的图片就不会展示了:)
* Tip: 图片最好用正方形or接近正方形, 看起来效果更好
*/
imgs: {
"心爱的小可爱": "./imgs/xiaokeai.png",
// "今天是你的生日": "./imgs/birthday.jpg",
},
// 按钮文字描述, 以下是默认的按钮文字,英文的,您可以改成你喜欢的文字
desc: {
turn_on: "开始",
Expand Down

0 comments on commit 6eed6ad

Please sign in to comment.