我完全被https://paydirtapp.com/上的幻灯片所震撼，有人知道它是如何实现的吗？我猜这是一些复杂的 html5 canvas mumbo-jumbo 吗？
问问题
674 次
1 回答
2
TL;DR : 使用浏览器的检查器找出所有内容！
画布的使用可能没有您期望的那么多。使用浏览器检查器，您可以快速查看此处发生的基本情况：
从上面可以看出，有三个主要组件：放大镜、屏幕截图和消息。使用 CSS3，为放大镜的每个部分（阴影、发光和画布）制作投影和圆形效果（box-shadow 和border-radius）。
画布部分只是放大镜下的图像。使用画布可以模糊图像（当放大镜动画时。这三个元素的容器管理移动和调整大小（缩放）。圆形裁剪效果仅使用边框半径样式完成。
该image_wrapper课程包含游览所经过的所有个人屏幕截图。有比所需分辨率更高的图像可能是因为画布元素不必为版本中的“缩放”加载单独的图像。
然后是magnifier_message只包含文本的类。它是通过 javascript 更新的——这里没什么特别的。
总而言之，包含这三个元素的父级具有（OSX 桌面的）背景图像。
对于画布工作 - 它不适合胆小的人 - 它们位于/assets/promo-0e644...js文件下的 javascript 中。Webkit 的检查器可以重新格式化 javascript，因此如果您想好好阅读，它的可读性会更高（它是窗口底部的花括号按钮）：
可悲的是，杂耍并没有优雅地退化（或任何渐进增强的迹象）:(
于 2012-05-08T07:25:38.643 回答