商品飞入购物车特效
Posted 熊熊之火
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了商品飞入购物车特效相关的知识，希望对你有一定的参考价值。
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>购物车特效</title> | |
| <script src="http://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script> | |
| <style type="text/css"> | |
| *{ | |
| margin:0px; | |
| padding:0px; | |
| border:0px; | |
| } | |
| #container{ | |
| width:1000px; | |
| height:600px; | |
| border:1px solid gray; | |
| position:relative; | |
| padding:10px; | |
| } | |
| .shangpin{ | |
| width:230px; | |
| height:auto; | |
| border:1px solid aquamarine; | |
| text-align: center; | |
| float: left; | |
| margin:0px 20px 20px 0px; | |
| } | |
| .shangpin button{ | |
| background: lightblue; | |
| cursor:pointer; | |
| height:20px; | |
| width:100px; | |
| } | |
| .clearflo{ | |
| clear:both; | |
| } | |
| #shopingcar{ | |
| width:100px; | |
| height:50px; | |
| border:1px solid red; | |
| position:absolute; | |
| top:0px; | |
| right:0px; | |
| background:gray; | |
| color:red; | |
| } | |
| #shopingcar img{ | |
| width:50px; | |
| height:50px; | |
| } | |
| #shopingcar .num{ | |
| position:absolute; | |
| top:2px; | |
| left:15px; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| $(function(){ | |
| var carnum=0; | |
| $(".shangpin button").on("click",function(){ | |
| var shopcar=$("#shopingcar"); | |
| var img=$(this).parents(".shangpin").find("img"); | |
| var cloneimg=img.clone(); | |
| cloneimg.css({ | |
| "width":"230px", | |
| "height":"230px", | |
| "opacity":"0.5", | |
| "position":"absolute", | |
| "top":img.offset().top, | |
| "left":img.offset().left, | |
| "z-index":"1111" | |
| }).appendTo($("body")).animate({ | |
| "width":"50px", | |
| "height":"50px", | |
| "top":shopcar.offset().top, | |
| "left":shopcar.offset().left | |
| },2000,function(){ | |
| cloneimg.animate({ | |
| "width":"0", | |
| "height":"0" | |
| },function(){ | |
| $("#shopingcar .num").html(++carnum) | |
| $(this).detach() | |
| }) | |
| }) | |
| }) | |
| }) | |
| </script> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div class="shangpin"> | |
| <img src="img/1.jpg" id="img" /> | |
| <p class="price"> price:15.55 </p> | |
| <button>加入购物车</button> | |
| </div> | |
| <div class="shangpin"> | |
| <img src="img/2.jpg" id="img" /> | |
| <p class="price">price:</p> | |
| <button>加入购物车</button> | |
| </div> | |
| <div class="shangpin"> | |
| <img src="img/3.jpg" id="img" /> | |
| <p class="price">price:</p> | |
| <button>加入购物车</button> | |
| </div> | |
| <div class="shangpin"> | |
| <img src="img/4.jpg" id="img" /> | |
| <p class="price">price:</p> | |
| <button>加入购物车</button> | |
| </div> | |
| <div class="shangpin"> | |
| <img src="img/5.jpg" id="img" /> | |
| <p class="price">price:</p> | |
| <button>加入购物车</button> | |
| </div><div class="shangpin"> | |
| <img src="img/6.jpg" id="img" /> | |
| <p class="price">price:</p> | |
| <button>加入购物车</button> | |
| </div> | |
| <div class="clearflo"></div> | |
| <div id="shopingcar"> | |
| <img src="img/car.png" /> | |
| <p class="num">0</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |
以上是关于商品飞入购物车特效的主要内容，如果未能解决你的问题，请参考以下文章