创建胡桃名片

当青训营遇上码上掘金

最终效果展示

技术路线

1. 获得焦点后图片预览，下一章
2. 图片自适应大小
   • 等比例缩放

问题

1. 期望鼠标在图片上——获取焦点时，图片放大，并放到页面中心，但是会出现闪屏问题

因为在图片移动后，鼠标不再焦点时，图片移动回去；移动回去又触发焦点事件 陷入循环的闪烁

通过在原状态上设置transition属性，即可实现节流功能，不再闪烁 # 还在用 JS 做节流吗？CSS 也可以防止按钮重复点击

.img {
    transition: all 2s;
    width: clamp(70px, 80px + 15%, 180px);
    /* padding: 20px; */
    margin: 20px;
}
.img:hover{
    scale: clamp(120%, 150%, 200%);
    transform: translate(50%, 50%);
}

但是鼠标在图片边缘时仍出现抖动问题 什么动画, 都很少用css的hover写了 因为鼠标滑动到元素边缘, 会疯狂执行动画, 而且还是疯狂循环执行, 所以一般都用JavaScript控制

参考 JavaScript按钮hover抖动效果

因此，可以采用onmouseover事件 注意点

• 对象.onmouseover()绑定函数，不能使用addEventListener
• 图片无法onfocus，不明白为什么

2. sclae放大，并使用限制函数 如果scale等比放大，会造成可能过大的情况 媒体查询过于繁琐，使用clamp()设置scale的上下限

.img {
    transition: all 2s;
    width: clamp(70px, 80px + 15%, 180px);
}
.img:hover{
    scale: clamp(120%, 150%, 200%);
    transform: translate(50%, 50%);
}

3. 代码块上传图片技巧

掘进的代码块上传网络图片无法正常显示，我猜是同源策略问题 但是只要在文章中上传一次，即可生成掘金地址的图片链接

4. 名片居中

position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%);

5. 字体为华文行楷  

font-family: 'STXingkai';

6. 胡桃名片背景图 可惜只在米游社找到了这张图片 胡桃的背景有点糊，在百科上找的

之后有时间用画图尝试一下

7. 音频 设想：鼠标在图片上划过时开始播放音频， 找本堂主有何贵干啊

问题：

• 无法利用url获取本地音频资源
• chrome规定：必须先有一次交互，才能播放声音
• audio需要单例设计模式

已实现最初效果，可惜掘金上不知如何上传资源url，网易云歌曲有跨域限制

    const audio = null;
     document.getElementById("hutao").onmouseover = function contollerplay(e, audio){
        console.log('ssss');
        // console.log(audio);
        if(audio==null){
            audio = document.getElementById("myplayer");
            audio.play()
        }
    };

8. 移动端适配

这部分明天再做，主要是名片的大小比例问题 9. 采用grid布局