body {
background: f5f5f5;
textalign: center;
padding: 20px;
}
h1 {
color: 333;
fontsize: 24px;
marginbottom: 15px;
}
img {
maxwidth: 100%;
margintop: 20px;
cursor: pointer;
}
p {
color: 666;
fontsize: 16px;
marginbottom: 10px;
}
a {
color: 007bff;
textdecoration: none;
marginright: 10px;
}
美食图片,与你共享爱的瞬间
点击图片,查看详细描述和烹饪建议,一起享受美食的乐趣吧!
function openDescription(imgId) {
var description = document.createElement('p');
description.innerHTML = `这是一道${getFoodName(imgId)}的美食,来自${getOrigin(imgId)},烹饪方法:...`;
var link = document.createElement('a');
link.href = `` imgId `recipe`;
link.textContent = '查看详细做法';
description.appendChild(link);
document.getElementById('gallery').appendChild(description);
}
// 这里是获取图片信息的逻辑,你可以根据实际API或数据库调用
function getFoodName(imgId) {
// 这里是根据图片ID获取美食名称的逻辑,例如:如果imgId为'food1',返回'巧克力蛋糕'
return imgId '的美食';
}
function getOrigin(imgId) {
// 获取图片来源,例如:如果imgId为'food1',返回'法国'
return '法国';
}