为ECSHOP的添加购物车,加入图片飞入效果。
首先:
在goods.dwt中查找添加购物车按钮:
为添加购物车按钮加上id:
例如:
<a id="iproduct_{$goods.goods_id}"
href="javascript:{addToCart({$goods.goods_id})">

<img src="data:images/bnt_cat.gif"
/></a>
然后:在js中加入:
<script type="text/javascript">

var Cart = {
     
id: 'ECS_CARTINFO',
     
addProduct: function(cpid, num, t) {
//添加商品
var ops =
$("[id=iproduct_"+cpid+"]").parents("#goodsInfo").children(".goodsItem").find("[id=product_"+cpid+"]");

if(ops.length>0) {
   var nps =
ops.clone().css({"position":"absolute", "top": ops.offset().top,
"left": ops.offset().left, "z-index": 999999999}).show();
  
nps.appendTo("body").animate({top:$("#ECS_CARTINFO").offset().top,
left: $("#ECS_CARTINFO").offset().left, width: 50, height:50},
{duration: 1000,
          
callback: function(){}, complete:
function(){nps.remove();addToCart({$goods.goods_id});} });
}
var op =
$("[id=iproduct_"+cpid+"]").parents("#goodsInfo").children('.imgInfo').find("img:first");

if(op.length>0) {
    var np =
op.clone().css({"position":"absolute", "top": op.offset().top,
"left": op.offset().left, "z-index": 999999999}).show();
   
np.appendTo("body").animate({top:$("#ECS_CARTINFO").offset().top,
left: $("#ECS_CARTINFO").offset().left, width: 50, height:50},
{duration: 1000,
           
callback:function(){}, complete:
function(){np.remove();addToCart({$goods.goods_id});} });
}
      
}
    
}
    
$(function() {
$('[id^=iproduct_{$goods.goods_id}]').click(function() {
    var cpid =
this.id.replace('iproduct_{$goods.goods_id}','{$goods.goods_id}');

var
n=$('#number').val();
       
if(n!=null||n!=undefined) {
   
if(n<1) {n=1;}
Cart.addProduct(cpid, n, 0);
    }else{
Cart.addProduct(cpid, 1, 0);
    }
    return
false;
});
});
</script>
修改:
修改购物车函数:
   
添加购物车成功后:修改购物车显示信息:
回调函数后加入change_cart_info
   
在js中添加函数:
   
//ajax添加后更新购物车的显示信息
    function
change_cart_info(){
$.ajax({
type: "POST",
url: "flow.php",
data: "step=ajax_update_cart",
success:function(res){
$("#ECS_CARTINFO").html(res)
}
  })
    }
在flow.php中添加处理函数:

if ($_REQUEST['step'] == 'ajax_update_cart'){
// echo "ok";
    
$sql = 'SELECT SUM(goods_number) AS number, SUM(goods_price *
goods_number) AS amount' .
          
' FROM ' . $GLOBALS['ecs']->table('cart') .
          
" WHERE session_id = '" . SESS_ID . "' AND rec_type = '" .
CART_GENERAL_GOODS . "'";
    $row =
$GLOBALS['db']->GetRow($sql);

if
($row)
    {
       
$number = intval($row['number']);
       
$amount = floatval($row['amount']);
    }
    else
    {
       
$number = 0;
       
$amount = 0;
    }
    $str =
sprintf($GLOBALS['_LANG']['cart_info'], $number,
price_format($amount, false));

exit('<a href="flow.php" title="' .
$GLOBALS['_LANG']['view_cart'] . '">' . $str .
'</a>');
}

效果如图:
原始状态:

点击加入购物车:

起飞了:

降落了啊:

ECSHOP添加购物车加图片飞入效果的更多相关文章

  1. Java 在Word中添加多行图片水印

    Word中设置水印效果时,不论是文本水印或者是图片水印都只能添加单个文字或者图片到Word页面,效果比较单一,本文通过Java代码示例介绍如何在页面中添加多行图片水印效果,即水印效果以多个图片平铺到页 ...

  2. 基于jQuery的图片加载loading效果插件

    基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...

  3. CSS3实现的图片加载动画效果

    来源:GBin1.com 使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强! HTML <ul class="grid effect- ...

  4. JS实现有点炫的图片展示效果-图片解体和组合

    经过4个月的努力学习,迎来了进入市场的最后一个学习项目.自己模仿了一个图片展示效果,用在了项目中,感觉挺炫的.在这里分享一下,希望大家喜欢~! bomb-showImg : 在线演示http://ru ...

  5. Java Web之网上购物系统(注册、登录、浏览商品、添加购物车)

    眼看就要期末了,我的专业课也迎来了第二次的期末作业---------<网上购物系统>.虽然老师的意图是在锻炼我们后台的能力,但是想着还是不利用网上的模板,准备自己写,以来别人写的静态页看不 ...

  6. SlipHover,能感知鼠标方向的图片遮罩效果jQuery插件

    接上一篇博文,介绍完jQuery插件开发后这里上一个自己的作品,也是初次实践,小有成就的感觉. 话说这个插件年前就写好了,然后挂到GitHub,然后就偷偷看着Google Analysis心中暗自激动 ...

  7. 使用 CSS3 实现 3D 图片滑块效果【附源码下载】

    使用 CSS3 的3D变换特性,我们可以通过让元素在三维空间中变换来实现一些新奇的效果. 这篇文章分享的这款 jQuery 立体图片滑块插件,利用了 3D transforms(变换)属性来实现多种不 ...

  8. 原生javascript实现图片放大镜效果

    当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...

  9. 【京东账户】——Mysql/PHP/Ajax爬坑之添加购物车

    一.引言 做京东账户项目中的购物车模块,功能之一就是添加购物车.要用到的是Apach环境,Mysql.PHP以及Ajax. 预计效果:用户点击->"加入购物车"  添加成功 ...

随机推荐

  1. 炼数成金hadoop视频干货06-10

    视频地址:http://pan.baidu.com/s/1dDEgKwD 第六课统讲了hadoop几个子项目和HBase,第七课还是讲的HBase 第八课讲了PIG 第九课讲了Hive和Zookeep ...

  2. objc_msgSend消息传递学习笔记 – 消息转发

    该文是 objc_msgSend消息传递学习笔记 – 对象方法消息传递流程 的基础上继续探究源码,请先阅读上文. 消息转发机制(message forwarding) Objective-C 在调用对 ...

  3. Myeclipse8.5注册码

    今天安装了Myeclipse8.5,记录一下. 一般官网上下载的都只能使用30天,要想使用更长时间,需要注册. 有一个生成注册码的网站:http://www.lephones.info 使用这个网站, ...

  4. css笔记17:盒子模型加强版的案例

    1.先看看经典案例效果图,导出思路: 分析:思路 基本结构 <div> <ul> <li><img src=""/> </li ...

  5. python(6)- json和pickle模块

    这是用于序列化的两个模块: json: 用于字符串和python数据类型间进行转换 pickle: 用于python特有的类型和python的数据类型间进行转换 Json模块提供了四个功能:dumps ...

  6. linux - 输入输出重定向 及 管道

    > 正确结果重定向 2> 错误结果重定向 &> 正确和错误全部重定向 >> 追加,其它同> 标准输出实际上就是显示器,比如我们使用cat命令打开一个文件,文 ...

  7. Linux学习之路:命令别名、历史记录和命令查找执行顺序

    一.命令别名 alias rm='rm –i':删除命令时会随时出现提示;alias vi=vim alias 不加参数,显示系统内所以命令别名 unalias 取消别名 二.历史命令 history ...

  8. Adobe Edge Animate--关于全局变量和全局方法的定义

    Adobe Edge Animate--关于全局变量和全局方法的定义 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. BY:sonicxsxs 前文中有关音 ...

  9. [改善Java代码]用偶判断,不用奇判断

    建议21: 用偶判断,不用奇判断 public class Client { public static void main(String[] args) { Scanner in = new Sca ...

  10. 关于HTML的总结

    现在最新的Html版本是Html5,以前想在网页中做一个效果很费劲,但是现在Html5对标签都进行了封装,想做效果直接用标签就可以了. 以后百分之百是标签的时代.以后写java 就可以用标签.自定义标 ...