1
首先需要引入一个jquery.fly.min.js文件(可自行搜索,也可以在本人的百度云盘中找到)
2
设置抛物线的位置(起点也可以是整个页面的可点击区域,即body):
抛物线起点,此例中为.left_btn(标签的classname)
抛物线终点,此例中为.gwcimg(标签的classname)
3
创建JS方法:
$('.left_btn').on('click', addProduct)
function addProduct(event){
var offset = $(".gwcimg").offset(),
//抛物线图片,可自行更改
flyer = $('<img src="brandmarket/image/gwc.png" width="36" height="36">')
flyer.fly({
start: {
left: event.pageX,
top: event.pageY
},
end: {
left: offset.left,
top: offset.top,
//抛物线完成后留在页面上的图片大小
width: 20,height: 20
}
})
}
4
大致有两种效果,一种是每添加一次就在购物车的数字上加一,数字显示的位置可以用CSS样式控制,然后把上一步中“抛物线完成后留在页面上的图片大小”中宽高值都设置为0,效果如下:
5
另一种是将数字用图片代替,此为默认的效果,改变浏览器大小的时候,用来代替的图片会一直停留在绝对位置,效果如下:
http://jingyan.baidu.com/article/ceb9fb10c13bac8cac2ba05a.html
这种做法其实不难的 不知道你需要的来回自己移动到地点了回滚还是到地点了停住??这个要用的无非就是一个定时器来回重复执行改变这个div的left和top坐标(因为你要的斜线移动),来达到移动的效果,其实真正的难点就应该是这个公式了,比如你是要它匀速还是加速运动? 这个公式就要好好考虑了