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

  • 相关阅读:
    每天一个linux命令(22):find 命令的参数详解
    在gitlab中创建项目后如何用git初始上传项目
    TensorBoard可视化
    docker CMD 和 ENTRYPOINT 区别
    django 项目开发及部署遇到的坑
    nginx + uwsgi 部署django项目
    centos7 追加python3 + 使用pip + virtualenv
    docker 常用命令
    Django+celery+rabbitmq实现邮件发送
    web框架链接
  • 原文地址:https://www.cnblogs.com/luluping/p/1427198.html
Copyright © 2011-2022 走看看