zoukankan      html  css  js  c++  java
  • jQuery教程20行代码的购物车效果

      
      

    演示:
    http://www.cssrain.cn/demo/addCart/cart1.html

    代码注释:
    $(function(){
            $("#productlist ul li a").click(function(){
                  //删除页面中已经有的 阴影
                  $("#cart_shadow").remove();
                  //创建阴影div
                  var $shadow = $('<div id="cart_shadow" style="display: none; background-color: #bbb; border:1px solid #aaa;z-index: 9999;"> </div>').prependTo("body");       
                  //获取当前点击的前一个img标签
                  var $img = $(this).prev("img");
                  //利用img标签的宽度,高度,上边距等属性来设置阴影div
                  $shadow.css({
                            'width' : $img.css('width'),
                            'height': $img.css('height') ,
                            'position' : 'absolute',
                            'top' : $img.offset().top,
                            'left' : $img.offset().left,
                            'opacity' : 0.6                
                         })
                         .show();

                  //获取购物车标签
                  var $cart = $("#cart");
                  //利用购物车表情按的宽度,高度,上边距等属性来设置阴影div的动画效果
                  $shadow.animate({
                              $cart.innerWidth(),
                              height: $cart.innerHeight(),
                              top: $cart.offset().top,
                              left: $cart.offset().left,
                              opacity: 0
                         },  { duration: 600 , complete: function(){
                                 $cart.append("<div>"+$img.attr('alt') +" 添加成功.</div>");
                             }
                         })
                //阻止超链接跳转
                return false;
            });
        });

    本篇文章来源于 cssrain.cn 原文链接:http://www.cssrain.cn/article.asp?id=1311

  • 相关阅读:
    oracle数据泵导入导出命令
    深入理解JVM—JVM内存模型
    JVM 内存初学 堆(heap)、栈(stack)和方法区(method)
    Java中Comparable和Comparator接口区别分析
    Java中的匿名内部类总结
    Git版本控制软件结合GitHub从入门到精通常用命令学习手册
    Git客户端图文详解如何安装配置GitHub操作流程攻略
    Java内部类详解
    Java类加载原理解析
    OracleDBconsoleorcl服务无法启动的原因及解决思路
  • 原文地址:https://www.cnblogs.com/luluping/p/1427198.html
Copyright © 2011-2022 走看看