这次给大家带来H5+C3+JS实现楼层跳跃特效，H5+C3+JS实现楼层跳跃特效的注意事项有哪些，下面就是实战案例，一起来看一下。
楼层跳跃式的页面布局 *{ margin: 0; padding: 0; } body, html{ height: 100%; } ul{ list-style: none; height: 100%; } ul li{ height: 100%; } ol{ list-style: none; position: fixed; top:200px; left: 50px; } ol li{ width: 50px; height: 50px; border: 1px solid #000; text-align: center; line-height: 50px; margin-top: -1px; cursor: pointer; }
- 第一区域
- 第二区域
- 第三区域
- 第四区域
- 1
- 2
- 3
- 4
myScroll.js
function scroll() { // 开始封装自己的scrollTop if(window.pageYOffset !== undefined) { // ie9+ 高版本浏览器 // 因为 window.pageYOffset 默认的是0,所以需要判断 return { left: window.pageXOffset, top: window.pageYOffset } } else if(document.compatMode === "CSS1Compat") { // 标准浏览器,来判断有没有声明DTD return { left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop } } return { // 未声明 DTD left: document.body.scrollLeft, top: document.body.scrollTop }}
相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
推荐阅读：
Echarts实现动态变色柱状图
jquery实现全选反选单选
jQuery操作背景颜色渐变动画效果
以上就是H5+C3+JS实现楼层跳跃特效的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1546030.html
微信扫一扫 
支付宝扫一扫 
