EricJeffrey的博客

HTML5中的canvas提供了使用JS脚本在网页上绘制图形的能力，传统的HTML对象往往只能作为矩形或者圆形容器存在，而直接使用图片又比较复杂，且需要适配不同分辨率。因此，本着试一试也不亏想法，作者使用canvas创建了一个抽奖圆盘，配合动画实现抽奖地效果，整个转盘封装成了一个类，并且提供了抽奖方法。

文章目录简介动机功能实现翻译翻页动画其它总结简介一个阅读英文版哈利波特的小网站reader，源码放到GitHub上了，感兴趣的可以看看。打开书籍后双击单词能够显示释义(如果有的话)，如下图。推荐使用chromium-edge阅读，翻页动画更舒服。动机大概是一两年前吧，因为想看看哈利波特英文原版，就在网上找了epub格式的电子书来看。当时用win10的edge浏览器看epub还是非常舒服的...

文章目录目的函数原型使用目的由于前端的浏览器兼容性问题，很多比较优雅的动画往往只在某些浏览器中可以使用，而在其它浏览器无效。所有浏览器都兼容的requestAnimationFrame便是用来解决这种问题。它能够按照规定的"路线"对帧进行更新，从而实现动画效果。函数原型window.requestAnimationFrame(callback)，callback(DOMHighResTim...

先上效果图通过一个父div和两个子div即可实现，主要考虑三点两个子div重叠在一起设置父元素position: relative，然后设置子元素position: absolute就可以使子元素的div重合，然后配合left: calc(20% - 3px)使两个子元素的div居中子div的border的设置使用border-radius: 50%使之成为圆形，然后使用bo...

文章目录横向滚动使用flex容器使用column总结横向滚动虽然大多数网页都是垂直滚动的，但对于以页显示地网站来说，横向滚动翻页(就像word的阅读视图那样)往往也是个不错的选择。如下为几种横向滚动的实现方式，不论哪种方式中，overflow-y: hidden都是必须的，该属性会禁用竖直方向的溢出。笔者才疏学浅，如有问题还望评论指正。使用flex容器flex容器详细使用可以参考阮一峰老师...