设计场景:
Ben负责的书城网用户量不断增加,书城书籍的类型和数量也在不断扩大,这时候就有客户抱怨,说书城网站的购物车不够智能,体现在需点击图书项上的+号小标才能将它加入购物车,而且如果想要查看自己的购物车内容,还需点击页面购物车图标跳转到购物车内容列表去查看,这种跳转的效果相当糟糕,令一些老年客户抱怨不已,因为他们记忆力不佳,经常要返回查看自己买了什么...
设计目标:
实现购物车智能化...
解决方案:
Ben开始着手来解决,初步构思是建立一个可供商品拖拽的购物车...在这样,在原来的商品列表上只要轻轻一拖,就把商品拖进购物车,直观,方便,关键是可见性好...
1、 Ben先写了三个样式,商品列表的样式,商品列表副本的样式,购物车中商品列表的样式...
商品列表样式和商品列表副本的样式(副本的样式绝对定位)
.leftContent { 400px; height:466px; margin-left:56px; padding:18px; border-top:solid 3px #09acf7; border-bottom:solid 3px #09acf7; border-left:solid 1px #09acf7; border-right:solid 1px #09acf7; float:left; margin-right:60px; } .BookItem /*商品列表的样式,绝对定位*/ { 180px; height:125px; float:left; overflow:hidden; margin-right:20px; margin-bottom:20px; cursor:move; } .BookItemMove /*商品列表副本的样式,相对定位*/ { 180px; height:125px; float:left; overflow:hidden; margin-right:20px; margin-bottom:20px; position:absolute; background-color:White; } .BookItem dl,.BookItemMove dl { float:left; 180px; height:125px; float:left; overflow:hidden; } .BookItem dl dt,.BookItemMove dl dt { float:left; height:120px; 80px; margin-right:12px; } .BookItem dl dt img,.BookItemMove dl dt img { 80px; height:120px; } .BookItem dl dd,.BookItemMove dl dd { height:120px; line-height:1.8em; font-size:12px; text-decoration:underline; }
购物车的样式:
.rightContent { 430px; float:left; overflow:hidden; height:auto; min-height:200px; border-top:solid 3px #09acf7; border-bottom:solid 3px #09acf7; border-left:solid 1px #09acf7; border-right:solid 1px #09acf7; padding:18px; font-size:12px; } .BookItemN { 180px; height:150px; float:left; overflow:hidden; margin-right:20px; margin-bottom:20px; cursor:move; border:solid 1px #09acf7; } .BookItemN img /*删除按钮的样式*/ { float:right; margin:0; padding:0; cursor:pointer; margin-right:5px; margin-top:5px; } .BookItemN dl { float:left; 180px; height:125px; overflow:hidden;padding:0px; margin-left:8px; margin-top:0px; } .BookItemN dl dt { float:left; height:120px; 80px; margin-right:12px; } .BookItemN dl dt img { 80px; height:120px; } .BookItemN dl dd { height:120px; line-height:1.8em; font-size:12px; text-decoration:underline; } #container { margin-top:66px; }
下面是脚本,具体思路是在图书栏中的图书项上建立副本,它的绝对定位的,位置与图书项的位置一样,内容也一样,当鼠标点击副本的时候唤醒副本,副本随着鼠标的移动而移动
如果鼠标移入购物车范围内并点击释放水鼠标左键的时候,就会追加副本的内容到购物车,副本回到原来位置;如过不在购物车范围内,则副本返回原来位置,不执行任何操作...
代码如下:
//遍历书架,为每个图书项(.BookItem)创建副本 var ItemNum=$(".BookItem").length; var ItemBook=$(".BookItem"); for(var i=0;i < ItemNum ; i++) { var CopyItem=ItemBook.eq(i); var left = CopyItem.offset().left; var top = CopyItem.offset().top; $('body').append('<div class="BookItemMove" id="'+i+'">'+CopyItem.html() +'</div>');//副本绝对定位,位置浮动在原图书项(.BookItem)的上面 $("#"+i).css({left:left,top:top}); } var currentItem;//当前图书项的全局变量 var moveStatu=false; areaStatu=false;//moveStatu:判断是否处在移动状态;areaStatu:判断鼠标是否移入购物车范围内 var objMove= $(".BookItemMove"); var xx,yy,oriX,oriY;xx,yy,oriX,oriY//分别代表移动项移动之后的坐标值和原始的坐标值 var cartPosition=$(".rightContent").offset();//获取购物车在页面上的位置(上下左右的坐标) var carLeft=cartPosition.left; var cartTop=cartPosition.top; var cartRight=carLeft+$(".rightContent").width(); var cartBottom=cartTop+$(".rightContent").height(); objMove.mousedown(function(e){ moveStatu=true;//设置移动状态为true xx=e.clientX-$(this).offset().left;//获取鼠标到移动项左坐标的距离 yy=e.clientY-$(this).offset().top; //获取鼠标到移动项顶坐标的距离 currentItem = $(this);//设置当前的图书项 currentItem.fadeTo(5,0.5);// 移动时设置半透明度 }) $(document).mousemove(function(e){ if(moveStatu) { var xxM=e.clientX - xx; //移动后的左坐标 var yyM=e.clientY - yy; //移动后的顶坐标 currentItem.css({left:xxM,top:yyM}); if(e.clientX > carLeft && e.clientX < cartRight && e.clientY > cartTop && e.clientY < cartBottom)//这一段很重要,判断移动项目是否在购物车的热点区域内,如果在,areaStatu设置为true,加上边框 { areaStatu=true; currentItem.css({border:"dashed 1px #09acf7"}); } else { currentItem.css({border:"none"}); areaStatu=false;} } }) vernier=100;//设立游标,为购物车添加的项设立id $(document).mouseup(function(){//当鼠标键释放时,见该项追加到购物车内 if(moveStatu) { moveStatu=false; var id = currentItem.attr("id"); lefts = $(".BookItem").eq(id).offset().left; tops = $(".BookItem").eq(id).offset().top; currentItem.css({left:lefts,top:tops,border:"none"}); if(areaStatu)//判断移动项目是否在购物车的热点区域内 { vernier=vernier+1; var newItem ='<div class="BookItemN"><img id="'+vernier+'" src="images/close.jpg" onclick="lala('+vernier+')"/>'+currentItem.html()+'</div>'; $('.rightContent').append(newItem); } } carLeft=cartPosition.left; cartTop=cartPosition.top; cartRight=carLeft+$(".rightContent").width(); cartBottom=cartTop+$(".rightContent").height(); }) function lala(idObj)//根据游标的值来删除购物车内的相应项... { $("#"+idObj).parents(".BookItemN").remove(); }
最终效果:
设计小结:
实际项目中购物车的数量超过6条是呈列表显示状态,这边就不弄了,代码比较粗糙,主要是介绍一种思路,这是我在做自己项目中的总结,希望有更好的办法...