JavaScript网页特效实例
网页的动效要玩得漂亮，JavaScript肯定少不了。从淡入淡出，到复杂的拖拽上传，效果多、玩法广，灵活性也挺高。
页面的交互设计，比如弹出框、模态对话框，用几个 API 就能整出花活。比如alert和confirm，不麻烦，改改样式也挺能唬人。
要做点动画，比如按钮的渐变、图片的滑入滑出，requestAnimationFrame是个好帮手。配合 CSS3 的transition、transform，响应也快，代码也简单。
事件这块，addEventListener用得熟，出 bug 的机会就少。你还可以玩点高级的，比如事件委托，页面复杂了才知道它多省事。
想做拖放？HTML5 自带的拖放 API 配上点逻辑判断，拖文件、换位置，都不在话下。像图片上传、卡片排序，JavaScript 都能搞。
响应式设计也不只靠 CSS，用window.innerWidth这些配合媒体查询，JavaScript 可以动态改布局。你可以做出不同屏幕自适应的悬浮按钮、导航栏啥的。
AJAX方面，fetch和XMLHttpRequest是老熟人了。表单提交不用刷新、异步加载数据，用户体验一下就提上来了。
存储这块，用localStorage、sessionStorage存点状态或者临时数据挺方便。不够用？那就上IndexedDB，做个离线应用也没问题。
你要是图省事，jQuery还不错，DOM 操作快又稳。要上点档次的，React和Vue现在也都流行，组件化、省事，还方便维护。
如果你正要做点网页上的特效互动，或者在琢磨怎么优化用户体验，推荐你看看这些例子，说不定就有灵感了：
嗯，如果你是前端新手，建议从动画和事件练手，熟了之后再去搞 AJAX 和 Web 存储，效率会高不少。
文件大小：4.92MB
评论区