盒子的页面弹动

1·先设置一个外套盒子,让里面盒子用来定位
2。再套一个盒子,用来拖拽,拖拽他使内容弹动
3,最后套一个盒子装填内容


image.png
而这个效果要写在页面资源全部加载完成之后,因为如果写在前面,元素没有加载完,高度没有加载完等,会报错
//onload为页面加载完之后生效
widdow.onload = function () {
  //给body添加一个快速点击事件
  FastClick.attach(document.body);
 var bscroll = new BScroll('.bs-wrap',{
  scrollY: true, //设置为纵向
  probeType:2;  //函数节流  一共3个时间段1,2,3
});

//重新计算  better-scroll, 当dom结构发生变化的时候务必要调用确保滚动的效果正常
bscroll.refresh();
btn.onclick = function () {
//滚动到某个元素
  //元素
  //时长
  //相对于目标元素的X轴偏移量   true: 中心位置
  //相对于目标元素的Y轴偏移量   true: 中心位置
bscroll.scrollToElement('li:nth-of-type(70)',1000,true,true);

// bscroll.destroy(); //运行一次后销毁
}
};
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,086评论 1 45
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 13,806评论 1 32
  • 我第一次读到赵周老师的《这样读书就够了》了的这本书的时候,内心触动特别大!甚至可以说读过之后感到非常震撼,原来读书...
    梅飞菲阅读 1,072评论 0 8
  • 又见《水手》 偶然打...
    菊花加枸杞阅读 1,176评论 0 1
  • 三哥其实是个女孩。 她是我大学室友,那时候我是宿舍的大姐,她排行老三。刚开始其他几个女孩还叫她三姐,后来不知道怎么...
    星期八的夜阅读 3,541评论 1 2