因为懒惰随大流使用了fly.js插件,今天用的时候遇到的两个坑坑~~
1. 有滚动条时,飞行目标(小圆球)的起点位置在Y轴方向位置偏移
2. 页面有滚动条时,飞行目标(小圆球)飞行的结束位置不一样
我:(⊙o⊙)…烦烦的。。。这就是用别人东西的代价 。。。。。。
黄黄:活该。。。
今天不解决问题都要打人,,,我走了。。。。。。
今天内心戏有点多,不好意思哈。。不管如何先来解决第一个坑吧,兵来将挡水来土掩
实现加入购物车效果,正常我们是这样使用的,官方的实例也这样使用
var offset = $('.shopcar .money .box').offset(); //飞行的结束位置:购物车
flyer = $('<div style="width: 15px;height: 15px;border-radius:100%;background: #0089DC;"></div>');//飞行目标:小圆球
flyer.fly({
start: {
left: e.pageX,
top: e.pageY
},
end: {
left: offset.left,
top: offset.top,
width: 15,
height: 15
}
});
页面有滚动条,我滑动有滚动条再去点击加入购物车的时候就发现了一个棘手的问题,什么问题呢?就下图这样的:小圆球出现的位置十分诡异但是又很巧合,没有滚动条的时候,他好好的出现在它该出现的位置,但是滚动条出现了他就完蛋了。。。
我就想这圆点出现的位置是不是和滚动条的高度有关呢?于是就减掉了那个高度,结果改完直接就好使了。。果然是这样的!
加上这行代码就可以了:
var hei=$(window).scrollTop();
于是乎,上面start部分代码就变这样:
start: {
left: e.pageX,
top: e.pageY -hei
},
这就KO掉第一个bug了,
接下来第二个
同样是有滚动条时候出来的bug,简单描述一下问题:我的购物车盒子是固定定位(fixed)的,那么滚动的时候,它相对于文档顶部的距离就会改变 也即是上面代码中的 top: offset.top,会改变,那么每次小圆球飞行的结束位置就保证不了了,那怎么办呢,
我们只要搞清楚一个概念这个问题就可以解决了,飞行的时候,小圆球的结束的位置应该在哪里?换句话说就是购物车的位置应该相对于谁而固定?
答案就是: 浏览器可视窗口
黄黄:懵逼脸~~~
大白:为啥?
我:只有这样才能保证小圆球每次飞行的结束位置不变吖
一开始我们把飞行目标的结束位置设置成这样:
end: {
left: offset.left,
top: offset.top,
width: 15,
height: 15
}
w3c爸爸:offset() 方法返回或设置匹配元素相对于文档的偏移(位置)
那么,这个left和top显然是相对于文档的位置,只要你滚动页面,点击之后,保证每次console.log(offset.left+"---"+offset.top);打印出来的结果都是不一样的,好吧,给你看看:
不一样的吧。。都说了不一样了
黄黄:怎么解决你到是说,逼逼半天了~~
我:文明
解决办法就是:
加两行代码:实际的top=浏览器窗口高度-购物车本身的高度;实际的left=浏览器窗口宽度-购物车宽度
var top = $(window).height()-$('.shopcar .money .box').height();//购物车相对窗口可视区域的top值
var left = $(window).width()-$('.shopcar .money').width();//购物车相对窗口可视区域的left值
于是其他的:
end: {
left: left,
top: top,
width: 15,
height: 15
}
填这两个小坑坑的全部代码就在这了:
//飞入动画
var offset = $('.shopcar .money .box').offset();
var top = $(window).height()-$('.shopcar .money .box').height();//购物车相对窗口可视区域的top值
var left = $(window).width()-$('.shopcar .money').width();//购物车相对窗口可视区域的left值
flyer = $('<div style="width: 15px;height: 15px;border-radius:100%;background: #0089DC;"></div>');
var hei = $(window).scrollTop();
flyer.fly({
start: {
left: e.pageX,
top: e.pageY - hei
},
end: {
left: left,
top: top,
width: 15,
height: 15
}
});
这样就KO掉第二个bug了
这两个坑还是很好解决的
点击查看这个demo
如果您有发现文中存在错误,欢迎留言指出,提前感谢!