工作日志 2020-03-04

工作日志 2020 年 03 月 04 日

第1工时

TABLE 行点击可用

第2工时

制作一个 3D翻转效果

第3工时

图片居中

.photo{
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-100px; /*设置宽度的一半*/
    margin-top:-100px; /*设置高度的一半*/
}

3个知识点

.side {
  backface-visibility: hidden; /*当元素不面向屏幕时隐藏,防止反面图片覆盖正面*/
}
.side-back {
  transform: rotateY(180deg); /*沿Y轴旋转180°*/
}
.photo-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d; /*使子元素支持3D效果*/
}

第4工时

from 控件更改计划... 无果

第5工时

使用js 进行图片翻转

const template = document.getElementsByClassName('wrap')[0].innerHTML
const _html = template.replace('{{caption}}', '白上吹雪')
document.getElementsByClassName('wrap')[0].innerHTML = _html

读取{{}}模板字符串 ,类似Vue ,读取方式,jq难以实现.

第6工时

完成图片数据DATA,引入数据.查找官网大数据相关素材.

第7工时

讨论FORM得实现方式,最终决定单独使用控件.不强行更改规则.

第8工时

开始更改单独控件得 接口