Web APIs：PC 端网页特效--常见网页特效案例--带有动画的返回顶部和筋斗云案例
创始人
2024-03-30 19:50:34
0次
案例：返回顶部
滚动窗口至文档中的特定位置。
window.scroll(x, y)
注意，里面的x和y 不跟单位，直接写数字
案例分析
① 带有动画的返回顶部
② 此时可以继续使用我们封装的动画函数
③ 只需要把所有的left 相关的值改为跟页面垂直滚动距离相关就可以了
④ 页面滚动了多少，可以通过 window.pageYOffset 得到
⑤ 最后是页面滚动，使用 window.scroll(x,y)
现在是飞快的返回顶部，现在要实现缓慢的返回
Document
返回顶部头部区域banner区域主体部分
筋头云案例
鼠标经过某个小li， 筋斗云跟这到当前小li位置
鼠标离开这个小li， 筋斗云复原为原来的位置
鼠标点击了某个小li， 筋斗云就会留在点击这个小li 的位置
案例分析
① 利用动画函数做动画效果
② 原先筋斗云的起始位置是0
③ 鼠标经过某个小li， 把当前小li 的 offsetLeft 位置 做为目标值即可
④ 鼠标离开某个小li， 就把目标值设为 0
⑤ 如果点击了某个小li， 就把li当前的位置存储起来，做为筋斗云的起始位置
相关内容
热门资讯
货币政策工具加力支持
□ 本报记者 詹 超 【场景】 昆山开发区，苏州清陶动力科技有限公司车间的固态电池生产线嗡嗡作响，金...
我国继续实施更加积极的财政政策
经济日报北京12月28日讯（记者曾金华）记者从全国财政工作会议获悉，今年财政工作取得新成效，为推动完...
吴中区“三强化”促进法律服务业...
苏州市吴中区锚定“升级服务产业、优化营商环境、赋能高质量发展”核心目标，以政策为引领、平台为支撑、人...
央行：稳妥有序完善房地产信贷基...
｜2025年12月29日 星期一｜ NO.1 央行：稳妥有序完善房地产信贷基础性制度 12月26日，...
大金重工[002487]关于诉...
本版导读 2025-12-29 2025-12-29 2025-12-29 2025...
国务院国资委：完善国有资产管理...
国务院国资委党委书记、主任张玉卓在学习时报刊发文章《坚定不移做强做优做大国有企业和国有资本》。其中提...
“惠民政策落不到村”，紧抓！（...
本报记者 郑洋洋 “重点研究周武村党组织软弱涣散的问题，大家直奔主题，谈谈看法。”山西长治市潞城区店...
财政政策如何继续“更加积极”
记者从27日至28日举行的全国财政工作会议获悉：2026年要继续实施更加积极的财政政策，扩大财政支出...
落户政策居然考虑放开！
怎么，我能落户北京了？ 大家好，我是孙少睡，这是我的第467篇楼市评论。 很多人的第一反应肯定是有没...
股市必读：ST泉为股东因涉嫌违...
截至2025年12月26日收盘，ST泉为(300716)报收于9.96元，下跌0.8%，换手率0.9...