美文网首页让前端飞Web 前端开发
移动端利用重力控制屏幕滚动

移动端利用重力控制屏幕滚动

作者: 希伯来没有雨 | 来源:发表于2017-07-21 10:00 被阅读139次

gravityScroll

移动端利用重力控制屏幕滚动,基于DOM

Demo

Demo 点击查看

Github 点击查看

qr-code

使用说明

引用组件

<script src="js/jquery-1.9.1.min.js"></script>
<!-- 重力感应 -->
<script src="js/orienter.min.js"></script>
<!-- 配置 -->
<script src="js/gravityScroll.js"></script>

JavaScript 初始化

// 初始化
$('.map').pos({
  // 起始位置
  'lastPageX': -100,
  // 开启循环
  'loop': true
});

HTML

<div class="map">
  <div class="map-box"></div>
</div>

CSS

.map-box{
  width: 2270px;
  height: 1030px;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  margin: auto;
  background: url("../img/bg2.jpg") no-repeat center; 
}

相关文章

  • 移动端利用重力控制屏幕滚动

    gravityScroll 移动端利用重力控制屏幕滚动,基于DOM Demo Demo 点击查看 Github 点...

  • iscroll和hammer/transitionend事件/p

    移动端常用库 iscroll控制滚动 hammer控制手势 扩展

  • 屏幕滚动到指定位置

    将屏幕滚动到指定位置 1、例如:设置屏幕滚动到id为div的顶部注意移动端要使用 $("body,html"),使...

  • 移动端滑动卡顿问题

    移动端手指触摸屏幕过于频繁,移动端会出现卡顿的现象,下面介绍几种顺畅滚动的解决办法。 一、 -webkit-ove...

  • 重力感应控制方向

    设计目的 重力感应控制方向的设计目的是:利用手机的重力感应器来控制页面上元素的移动方向,进而实现页面上的某种动画效...

  • Vue 移动端webApp填坑

    1.IOS滚动不平滑的问题 在移动端特别是iOS中,当滚动屏幕时会发现手指一拿开滚动就停止,这种用户体验效果很不好...

  • 移动端适配屏幕滚动贴合问题

    下面是css代码 当你监听app的变化去触发各种操作的时候完全可以,但是ios上面自带的弹簧效果就会导致类似双滚的...

  • Vim 移动操作

    屏幕滚动 行移动 列移动 文本块移动 搜索与标记

  • h5移动端调用系统传感器事件

    移动端实现摇一摇以及重力感应事件

  • 开发之随手记

    类数组转换为数组 重力感应事件 注意移动端和PC端的属性不相同,当重力感应事件 onorientationchan...

网友评论

    本文标题:移动端利用重力控制屏幕滚动

    本文链接:https://www.haomeiwen.com/subject/ajmskxtx.html