javascript开发商城网站必备购物车抛物线效果

前端开发 简书

购物车抛物线效果

知识点:静态布局技巧,定位,浮动,背景设置,CSS样式选择器javascript特效,jquery库调用,插件调用,如果使用插件,编程思维与技巧。

:point_down:源码:

天猫购物车

*{margin:0;padding:0;}

.banner{width:100%;height:160px;background:url(“images/banner.jpg”) center top;}

.par_list{width:990px;height:310px;margin:40px auto;}

.par_list ul li{width:220px;height:300px;border:1px solid #ddd;list-style-type:none;

float:left;margin:0 7px;padding:5px;

}

.par_list ul li p.title{color:#666;font-size:12px;line-height:40px;}

.par_list ul li p.jg{color:red;}

.par_list ul li p.jg span{float:right;width:80px;height:30px;background:red;color:#fff;

line-height:30px;font-size:12px;text-align:center;

border-radius:5px;

}

.carbox{width:260px;height:100%;background:green;position:fixed;

top:0;right:-220px;

}

.carbox .left{width:40px;height:100%;background:#000;position:relative;

float:left;

}

.carbox .left span{color:#fff;font-size:12px;width:12px;display:block;background:red;

padding:10px 14px;position:absolute;top:50%;left:0;margin-top:-42px;

}
.carbox .con{width:220px;height:100%;background:#ddd;float:left;}
.carbox .con dl{width:200px;height:60px;border-bottom:1px solid #fff;padding:10px;}
.carbox .con dl dt{width:60px;height:60px;float:left;}
.carbox .con dl dd{width:120px;float:right;font-size:12px;line-height:20px;margin-right:10px;}
 
 

  • 2015夏季新品海澜之家男装正品1

    ¥193.0加入购物车

  • 2015夏季新品海澜之家男装正品2

    ¥175.0加入购物车

  • 2015夏季新品海澜之家男装正品3

    ¥389.0加入购物车

  • 2015夏季新品海澜之家男装正品4

    ¥499.0加入购物车

    
    
    
        
    加入购物车
    <!--
    美女
    2015夏季新品海澜之家男装正品1
    ¥193.0
    -->
    var k =0 ; $(".carbox .left span").click(function(){ if(k==0){ $(".carbox").animate({right:"0px"},500); k=1; }else if(k==1){ $(".carbox").animate({right:"-220px"},500); k=0; } }); $(".par_list ul li p.jg span").click(function(){ var img = $(this).parent().siblings("img").attr("src"); var text = $(this).parent().siblings("p.title").html(); var money = $(this).siblings("font").html(); $(".con").append("
    美女
    "+text+"
    "+money+"
    "); play(event); }) //抛物线函数 function play(event){ var s_left =event.clientX;//获取鼠标左边的位置 var s_top =event.clientY;//获取鼠标左边的位置 var e_left =$(".carbox .left span").offset().left; var e_top =$(".carbox .left span").offset().top; var _this =$(event.target);//当前到点击的js对象 var img = _this.parent().siblings("img").attr("src"); var flyer =$("");//创建图片对象 flyer.fly({ start:{ left:s_left, top:s_top }, end:{ left:e_left, top:e_top }, onEnd:function(){ flyer.fadeOut("slow",function(){ $(this).remove(); }); } }) }

    web前端/JavaScript/html5学习群:482300337,分享精品教程

    关注公众号→‘学习web前端’关注后回复‘学习’可以领取一套精品教程,跟大佬一起学前端!

    简书稿源:简书 (源链) | 关于 | 阅读提示

    本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
    酷辣虫 » 前端开发 » javascript开发商城网站必备购物车抛物线效果

    喜欢 (0)or分享给?

    专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

    使用声明 | 英豪名录