添加到购物车动画特效jQuery插件

创客云


这是一款jQuery添加到购物车动画特效插件。该插件可以非常方便的制作出点击商品购买按钮,商品飞入购物车的动画特效。

使用方法

在页面中引入jquery和jquery.animate_from_to-1.0.js文件。

  1. <script src="js/jquery.min.js" type="text/javascript"></script>
  2. <script src="js/jquery.animate_from_to-1.0.js"></script>

HTML结构

使用下面的HTML结果来创建购物车和购买按钮。

  1. <span id="cart">
  2.     购物车
  3. </span>
  4. <div id="prod_123" style="height: 100px; width:300px; margin-top: 300px; background: pink">
  5.     <form onsubmit="return false;">
  6.         <button type="submit" id="button1">添加到购物车 (默认)</button>
  7.     </form>
  8. </div>

初始化插件

在页面DOM元素加载完毕之后,通过下面的方法来初始化该jQuery添加到购物车动画特效插件。

  1. $("#button1").click(function(){
  2.   $("#prod_123").animate_from_to("#cart");
  3. })

Github网址:添加到购物车动画特效插件

演示地址 下载地址
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/42077.html
云模板

发表评论

热销模板

高端信息技术产品展示DedeCMS织梦中英文模板

Envato

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!