I am NingBo

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

gravityScroll

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

Demo

Demo 点击查看

Github 点击查看

qr-code

使用说明

引用组件

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

JavaScript 初始化

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

HTML

1
2
3
<div class="map">
  <div class="map-box"></div>
</div>

CSS

1
2
3
4
5
6
7
8
9
10
.map-box{
  width: 2270px;
  height: 1030px;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  margin: auto;
  background: url("../img/bg2.jpg") no-repeat center; 
}
打赏