QQ信息弹窗效果组件
QQ 风格的信息弹窗，视觉上挺熟悉的那一套。用CSS加JavaScript撸出来的，结构不复杂，挺适合平时做些提醒、消息通知用的那种小功能，像右下角弹个‘你有新消息’，蛮像模像样的。
弹出效果比较顺滑，position: absolute加一点动画就能搞定，代码也不多。一套下来响应快、兼容性还不错，放在项目里基本不用太操心。尤其是窗口消失和滑出的那块，用setTimeout定时配合opacity渐变，效果还蛮细腻。
如果你想快速上手看看别人是怎么做的，建议去瞄一眼这几个参考文章：模仿 QQ 弹出窗口 2这种是比较典型的写法；还有用jQuery的也有，像jQuery popup javascript 弹出窗口，封装得更清爽些。
不过建议你不要一股脑全贴代码。可以拆一下逻辑，比如：消息展示区独立成一个div，动画用类名控制；监听触发事件写在，结构清晰不少。嗯，如果你还在用老项目的 UI 风格，这一套套进去效果肯定比原来那个生硬弹窗好太多。
提醒一下，移动端不太适合用这种右下角弹窗的方式，交互逻辑不一样。如果你主要是桌面端，放心用就行。
文件大小：110.67KB
评论区