13518219792
每次吃饭点外卖的时候（暴露了自己是个死肥宅，手动滑稽），或者在淘宝购物的时候，将商品加入购物车时会有一个很炫酷的动画，如下图饿了么点餐动画：
创新互联公司专业为企业提供察雅网站建设、察雅做网站、察雅网站设计、察雅网站制作等企业网站建设、网页设计与制作、察雅企业网站模板建站服务，10多年察雅做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
所以百度了一下前端使用css实现这个效果，然后就自己就照葫芦画瓢的写了一个小小的demo，完全当作学习了一把。
在界面上，我是参考了图片上的界面，写的css，然后在美团上面扒的数据。完成后的界面如下图：
开始想着只是做一个简单的实现效果，界面上只有div框，按钮什么的这些，反正想着很丑的界面，但是自己看到饿了么这么好看的界面，自己就忍不住模仿着写了一下下。
主要用到的是移动端适配方案：flexible.js + rem的方案
首先获取到页面上所有按钮，然后给按钮添加点击事件，获取到点击当前按钮的位置坐标信息
方案一：使用定位+transition的方式实现
方案二：使用transform + transition的方式实现
其实还可以使用css的animate来实现，只不过由于需要动态计算目标位置的坐标，实现起来比较困难，所以我就没有写，如果目标位置的坐标值固定，那么可以通过animate改变top、left或者translateX、translateY的值来实现这个效果，垂直方向的动画使用贝塞尔曲线的 function-timing 。
初识CSS抛物线动画
[img]!DOCTYPE html
html
head
meta charset="utf-8"
title/title
link rel="stylesheet" href="---.css"
script src="---.js"/script
/head
body
div class="container"
div class="shop"
div class="header"
input type="checkbox" class="shop-checkbox"
span class="shop-icon"/span
span class="shop-name"---/span
span class="wangwang-icon"/span
/div
div class="items"
div class="item"
divinput class="item-checkbox" type="checkbox" name="" id=""/div
div
span class="item-img"/span
/div
div class="item-name"
div----/div
div class="promotion-icons"span/spanspan/spanspan/span/div
/div
div class="sku"---/div
div class="price"
div class="price-1"---/div
div class="price-2" data-price="---"----/div
/div
div class="num-control"
span class="num-minus"-/span
input class="num" type="text" value="1"
span class="num-plus"+/span
/div
div class="item-price-total"
span￥50.13/span
/div
div class="operation"
div---/div
div---/div
/div
/div
/div
/div
div class="shop"
div class="header"
input type="checkbox" class="shop-checkbox"
span class="shop-icon"/span
span class="shop-name"---/span
span class="wangwang-icon"/span
/div
div class="items"
div class="item"
divinput class="item-checkbox" type="checkbox" name="" id=""/div
div
span class="item-img"/span
/div
div class="item-name"
div----/div
div class="promotion-icons"span/spanspan/spanspan/span/div
/div
div class="sku"---/div
div class="price"
div class="price-1"---/div
div class="price-2" data-price="---"---/div
/div
div class="num-control"
span class="num-minus"-/span
input class="num" type="text" value="1"
span class="num-plus"+/span
/div
div class="item-price-total"
span￥9.90/span
/div
div class="operation"
div移入收藏夹/div
div删除/div
/div
/div
div class="item"
divinput class="item-checkbox" type="checkbox" name="" id=""/div
div
span class="item-img"/span
/div
div class="item-name"
div---/div
div class="promotion-icons"span/spanspan/spanspan/span/div
/div
div class="sku"---/div
div class="price"
div class="price-1"---/div
div class="price-2" data-price="---"---/div
/div
div class="num-control"
span class="num-minus"-/span
input class="num" type="text" value="1"
span class="num-plus"+/span
/div
div class="item-price-total"
span￥19.9/span
/div
div class="operation"
div移入收藏夹/div
div删除/div
/div
/div
/div
/body
/html
.container{
width: 1000px;
margin-left: auto;
margin-right: auto;
color: #444444;
}
.header{
margin: 8px;
}
.shop-icon, .wangwang-icon, .promotion-icons span{
display:inline-block;
width: 15px;
height: 15px;
background-color: rgb(117,192,241);
}
.promotion-icons span{
margin-right: 4px;
}
.items{
border: 1px solid #ebe9e9;
}
.item{
display: flex;
margin: 8px;
}
.item-img{
width:100px;
height: 100px;
display: inline-block;
background-color: aquamarine;
margin-left: 6px;
margin-right: 6px;
}
.item-name
{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sku, .price,.item-price-total,.operation,.num-control{
margin-left: 18px;
}
.num{
width: 18px;
height: 15px;
}
.num-control{
display: flex;
align-items: baseline;
}
.num-minus,.num-plus{
width: 18px;
height: 22px;
display: inline-block;
background-color: #ebe9e9;
}
.checkout{
display: flex;
justify-content: space-between;
}
.shop{
margin-bottom: 20px;
margin-top: 30px;
}
.goods,.freight,.checkout-button{
margin-left: 15px;
}
.price-1{
text-decoration: line-through;
color: gray;
}
.check-num ,.total-price{
font-size: large;
color: red;
margin-left: 3px;
margin-right: 3px;
}
.checkout-button{
height: 30px;
width: 50px;
background-color: beige;
}
.checkout{
margin-top: 15px;
}
.item-name{
width: 25%;
}
.item-price-total{
width: 5%;
}
.sku{
width: 20%;
}
function updatePrice(){
let items = document.querySelectorAll('.item');
let totalNum = 0;
let totalPrice = 0;
items.forEach(function(item){
if(item.querySelector('.item-checkbox').checked){
let num = item.querySelector('.num').value;
totalNum = totalNum + parseInt(num);
let price = item.querySelector('.price-2').getAttribute('data-price');
totalPrice = totalPrice + parseFloat(price) * num;
}
});
document.querySelector('.check-num').innerText= totalNum;
document.querySelector('.total-price').innerText = totalPrice;
}
window.onload=function(){
let itemCheckboxes = document.querySelectorAll('.item-checkbox');
itemCheckboxes.forEach(function(itemCheckbox){
itemCheckbox.onchange = function(){
updatePrice();
}
});
let minuses = document.querySelectorAll('.num-minus');
minuses.forEach(function(minus){
minus.onclick = function(event){
let num=minus.parentElement.querySelector('.num').value;
if(parseInt(num)1)
{
minus.parentElement.querySelector('.num').value=parseInt(num)-1;
updatePrice();
}
};
});
let pluses = document.querySelectorAll('.num-plus');
pluses.forEach(function(plus){
plus.onclick = function(event){
let num=plus.parentElement.querySelector('.num').value;
plus.parentElement.querySelector('.num').value=parseInt(num)+1;
updatePrice();
}
});
}
一般前端框架有这种，比如bootstrap这种，实际上它是把把个别字符设计成购物车图形，类似于另外设置了字体，把图片设计成字体。这种的优点是方便，可以随意在css中自定义大小颜色。缺点是用户浏览网页的时候需要预先加载这种字体，一般浏览器都加载特别慢或者不成功，网页上就会有个方框，并不友好。如果网页上类似图标很多的话可以用这种，如果不多不如直接用背景透明的矢量图片，也可以达到你的要求
在style.css里添加下面样式
.goods_cut {
background: url("../images/plus.gif") no-repeat scroll 0 0 transparent;
border: 0 none;
cursor: pointer;
display: block;
float: left;
font-size: 0;
height: 15px;
line-height: 0;margin: 8px 3px 0;
width: 15px;
}
input.goodsBuyBox, input.number {
border: 1px solid #DDDDDD;
float: left;
font-size: 10px;
height: 18px;
line-height: 18px;
margin: 5px 6px 0;
padding: 0;
text-align: center;
width: 32px;
}
.goods_add {
background: url("../images/plus.gif") no-repeat scroll 0 -15px transparent;
border: 0 none;
cursor: pointer;
display: block;
float: left;
font-size: 0;
height: 15px;
line-height: 0;
margin: 8px 3px 0;
width: 15px;
}
在flow.dwt里，看各自的模板去修改，总之要找到这串代码：
input type="text" name="goods_number[{$goods.rec_id}]" ……
下面是脚本，放进flow.dwt里
script language="javascript" type="text/javascript"
function goods_cut($val){
var num_val=document.getElementById('number'+$val);
var new_num=num_val.value;
if(isNaN(new_num)){alert('请输入数字');return false}
var Num = parseInt(new_num);
if(Num1)Num=Num-1;
num_val.value=Num;
document.getElementById('updatecart').click();
}
function goods_add($val){
var num_val=document.getElementById('number'+$val);
var new_num=num_val.value;
if(isNaN(new_num)){alert('请输入数字');return false}
var Num = parseInt(new_num);
Num=Num+1;
num_val.value=Num;
document.getElementById('updatecart').click();
}
/script
找到
input type="text" name="goods_number[{$goods.rec_id}]"
搜索不到你就搜goods_number就行了
替换为：
span class="goods_cut" onclick="goods_cut('{$goods.rec_id}');"/span
input type="text" name="goods_number[{$goods.rec_id}]" id="number{$goods.rec_id}" value="{$goods.goods_number}" size="4" class="number" onblur="if(isNaN(this.value)){alert('请输入数字');return false}else{document.getElementById('updatecart').click();}" title="{$lang.goods_number_tip}"/
span class="goods_add" onclick="goods_add('{$goods.rec_id}');"/span
找到
input name="submit" type="submit" value="{$lang.update_cart}" class="btn_s3"/
其实就是更新购物车的按钮
添加一个id=“updatecart”
input name="submit" type="submit" id="updatecart" value="{$lang.update_cart}" class="btn_s3"/
1、首先是计算一行的价格。这个功能在上篇博客里有提到，这里就不列举出来了。
2、遍历选中的几行，将每行的数值相加。
3、将值赋给总金额显示出来。当取消勾选或加减数量时，金额会相应改变。
