求助：怎么样用jQuery制作出一个图片飞入购物车的动画？_IT百科

给你个示例吧，应该能帮助到你

这是html

<tr>

<td>

</td>

</tr>

<tr>

</tr>

<tr>

<td>

商品

</div>

</td>

</tr>

</table>

这个是jQuery代码：

$(function() {

$("#Button1").click(function() {

var shopOffset = $("#shop").offset()

var cloneDiv = $("#product").clone()

var proOffset = $("#product").offset()

cloneDiv.css({ "position": "absolute", "top": proOffset.top, "left": proOffset.left })

$("#product").parent().append(cloneDiv)

cloneDiv.animate({

left: shopOffset.left,

top: shopOffset.top

},"slow")

})

参考以下代码：

注意需要导入jquery.js.

<!DOCTYPE html>

<html>

<head>

<title>购物车----jQuery</title>

h1 {

text-align:center

}

table {

margin:0 auto

width:60%

border:2px solid #aaa

border-collapse:collapse

}

table th, table td {

border:2px solid #aaa

padding:5px

}

th {

background-color:#eee

}

</style>

function add_shoppingcart(btn){//将btn(dom)转换为jQuery对象

//先获取商品名字和单价还有库存以备后面使用

var $tds = $(btn).parent().siblings()

//$tds.eq(0)是jQuery对象 $tds[0]是DOM对象

var name = $tds.eq(0).html()//string

var price = $tds.eq(1).html()//string

var stock = $tds.eq(3).html()//string

//查看库存是否还有<=0

if(stock <= 0){

return

}

//无论购物车中是否有该商品,库存都要-1

$tds.eq(3).html(--stock)

//在添加之前确定该商品在购物车中是否存在,若存在,则数量+1,若不存在则创建行

var $trs = $("#goods>tr")

for(var i=0i<$trs.lengthi++){

var $gtds = $trs.eq(i).children()

var gName = $gtds.eq(0).html()

if(name == gName){//若存在

var num = parseInt($gtds.eq(2).children().eq(1).val())

$gtds.eq(2).children().eq(1).val(++num)//数量+1

//金额从新计算

$gtds.eq(3).html(price*num)

return//后面代码不再执行

}

//若不存在,创建后追加

var li =

"<tr>"+

"<td>"+name+"</td>"+

"<td>"+price+"</td>"+

"<td align='center'>"+

"<input type='button' value='-' onclick='decrease(this)'/> "+

"<input type='text' size='3' readonly value='1'/> "+

"<input type='button' value='+' onclick='increase(this)'/>"+

"</td>"+

"<td>"+price+"</td>"+

"<td align='center'>"+

"<input type='button' value='x' onclick='del(this)'/>"+

"</td>"+

"</tr>"

//追加到#goods后面

$("#goods").append($(li))

//总计功能

total()

}

//辅助方法--单击购物车中的"+" "-" "x"按钮是找到相关商品所在td,以jQuery对象返回

function findStock(btn){

var name = $(btn).parent().siblings().eq(0).html()//获取商品名字

//注意table默认有行分组,若此处使用 $("#table1>tr:gt(0)")则找不到任何tr

var $trs = $("#table1>tbody>tr:gt(0)")

for(var i=0i<$trs.lengthi++){

var fName = $trs.eq(i).children().eq(0).html()

if(name == fName){//找到匹配的商品

return $trs.eq(i).children().eq(3)

}

//增加"+"功能

function increase(btn){

//获取该商品库存看是否<=0

var $stock = findStock(btn)

var stock = $stock.html()

if(stock <= 0){

return

}

//库存-1

$stock.html(--stock)

//购物车数据改变

var $td = $(btn).prev()

var num = parseInt($td.val())//number

//num此时为number类型(在计算时会自动转换为number类型)

$td.val(++num)

//获取单价,再加计算前要先转换为number类型

var price = parseInt($(btn).parent().prev().html())

$(btn).parent().next().html(num*price)

//总计功能

total()

}

//减少"-"功能

function decrease(btn){

//该商品数量=1时候不能再减少

var num = parseInt($(btn).next().val())

if(num <= 1){

return

}

var $stock = findStock(btn)

//库存+1

var stock = $stock.html()

$stock.html(++stock)

//商品数量-1

$(btn).next().val(--num)

//从新计算金额

var price = parseInt($(btn).parent().prev().html())

$(btn).parent().next().html(price*num)

//总计功能

total()

}

//"x"删除按钮功能

function del(btn){

//将商品数量归还库存

var $stock = findStock(btn)

var stock = parseInt($stock.html())

var num = parseInt($(btn).parent().prev().prev().children().eq(1).val())

$stock.html(num + stock)

//清空改行商品列表

$(btn).parent().parent().remove()

//总计功能

total()

}

//总计功能

function total(){

//获取所有购物车中的trs

var $trs = $("#goods tr")

var amount = 0

for(var i=0i<$trs.lengthi++){

var money = parseInt($trs.eq(i).children().eq(3).html())

amount += money

}

//写入总计栏

$("#total").html(amount)

}

</script>

</head>

<body>

<tr>

</tr>

<tr>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td>洛克iphone6手机壳</td>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td>金士顿U盘</td>

</td>

</tr>

</table>

<table>

<thead>

<tr>

</tr>

</thead>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

</body>

</html>

最终效果图:

方法/步骤

首先需要引入一个jquery.fly.min.js文件（可自行搜索，也可以在本人的百度云盘中找到）

设置抛物线的位置（起点也可以是整个页面的可点击区域，即body）：

抛物线起点，此例中为.left_btn（标签的classname）

抛物线终点，此例中为.gwcimg（标签的classname）

创建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

}

})

}

大致有两种效果，一种是每添加一次就在购物车的数字上加一，数字显示的位置可以用CSS样式控制，然后把上一步中“抛物线完成后留在页面上的图片大小”中宽高值都设置为0，效果如下：

另一种是将数字用图片代替，此为默认的效果，改变浏览器大小的时候，用来代替的图片会一直停留在绝对位置，效果如下：

http://jingyan.baidu.com/article/ceb9fb10c13bac8cac2ba05a.html

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/bake/7906960.html

求助：怎么样用jQuery制作出一个图片飞入购物车的动画？

发表评论

评论列表（0条）