CSS3&JavaScript 仿京东加入购物车特效

最新推荐文章于 2024-05-18 20:31:13 发布
置顶 最新推荐文章于 2024-05-18 20:31:13 发布
阅读量3.3k 收藏 9
点赞数 4
分类专栏： # JavaScript 自定义控件 # CSS3 自定义控件 文章标签： 购物车
转载请注明出处——https://blog.csdn.net/chy555chy
本文链接：https://blog.csdn.net/chy555chy/article/details/85090814
版权

上一篇文章 https://blog.csdn.net/chy555chy/article/details/85063189 我简单的介绍了如何使用原生的 JavaScript 配合上正则表达式来实现 模板引擎（template.js）的简化版。

本文对基于上文的代码，对原代码进行了修改，利用 flex 实现自适应流式布局，并新增了加购特效，此外还介绍了 transitionend 和 animationend 事件的用法，和使用 cloneNode 来复制元素。

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<style>
body {
	margin: 0;
}
.goods-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.goods-list>li {
	background-image: linear-gradient(to top, gray 2%, transparent 3%);
	background-position: 50% 0%;
	background-size: 98% 100%;
	background-repeat: no-repeat;
}
.goods-list>li {
	padding: 1rem;
	display: flex;
	/** flex默认是不换行 */
	flex-wrap: wrap;
	align-items: center;
}
/* 
只要设置了img的宽高，src中的图片就会依此压缩
但对于宽高比不一致的图片，直接就形变了
解决办法：套一层在外面，宽/高自适应，overflow: hidden，使用flex布局进行居中
*/
.goods-img {
	width: 5rem;
	height: 5rem;
	margin-right: 1rem;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.goods-img>img {
	width: auto;
	height: 100%;
}
.goods-desc {
	flex-grow: 1;
}
.goods-name {
	font-size: 130%;
	font-weight: bold;
	margin-bottom: .5rem;
}
.sale-volume {
	color: gray;
	margin-bottom: .5rem;
}
.goods-buy {
	display: flex;
	flex-wrap: wrap;
	/** 让元素两边和父容器对齐 */
	justify-content: space-between;
}
.sale-price {
	/** 长度保持一致，当窗口大小改变时才能反应一致 */
	width: 10rem;
	margin-bottom: .5rem;
}
.sale-price-now {
	font-size: 140%;
	color: red;
}
.sale-price-origin {
	text-decoration: line-through;
}
.addto-cart {
	color: white;
	background-color: red;
	border-radius: 5px;
	padding: .5rem;
	white-space: nowrap;
	/** 绘制贝塞尔曲线的网站 http://cubic-bezier.com/ */
	transition: width 1s ease, height 1s ease, border-radius 1s ease-in, left 1s linear, top 1s cubic-bezier(.28,-0.41,.54,.04);
	text-align: center;
}
.addto-cart:hover {
	background-color: #ba3537;
}
footer {
	/**
	fixed是相对于浏览器窗口进行定位，跟absolute一样也是绝对定位
	但是它俩的参照物不同：
	fixed参考的是浏览器窗口
	absolute参考的是relative的祖先
	*/
	position: fixed;
	box-shadow: 0 0 .5rem gray;
	width: 100%;
	bottom:0px;
	background-color: white;
}
#shopCart  {
	display: inline-block;
	width: 2.5rem;
	height: 2.5rem;
	padding: .5rem;
	cursor: pointer;
}
#goodsNum {
	position: fixed;
	left: 2rem;
	bottom: 2rem;
	display: inline-block;
	color: white;
	background-color: red;
	border-radius: 50%;
	width: 1.5rem;
	height: 1.5rem;
	text-align: center;
	/** 避免它被动画挡住 */
	z-index: 10;
}
.shake {
	animation: shakeAnim .1s 4 alternate;
}
@keyframes shakeAnim {
	from { transform: rotate(20deg); }
	to { transform: rotate(-20deg); }
}
.scaleAndMove {
	animation: scaleAndMoveAnim .2s 2 alternate;
}
@keyframes scaleAndMoveAnim {
	from { 
		transform: scale(1); 
		left: 2rem;
		bottom: 2rem;
	}
	to { 
		transform: scale(0);
		left: 1.2rem;
		bottom: 1.2rem;
	}
}
</style>
<template id="template">
<div class="goods-img">
	<!--
	<img style="background-image:url('{{ src }}')"/>
	-->
	<img src="{{ src }}"/>
</div>
<div class="goods-desc">
<div class="goods-name">{{ name }}</div>
<div class="sale-volume">月销 {{saleVolume}}</div>
<div class="goods-buy">
	<div class="sale-price">
		<span class="sale-price-now">￥{{price}}</span>
		<span>/份&nbsp;</span>
		<span class="sale-price-origin">￥{{priceOrigin}}/份&nbsp;</span>
	</div>
	<div class="addto-cart" data-id="{{id}}" onclick="addToCart(event,{{id}})">加入购物车</div>
</div>
</div>
</template>
<script>
const data = {
	data:[
		{id: "001", name: "谷歌浏览器", src:"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3260362442,351141342&amp;fm=58" , saleVolume: 123, price: 20, priceOrigin: 999},
		{id: "002", name: "搜狗浏览器", src:"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3710305442,2088471281&amp;fm=58" , saleVolume: 1, price: 1, priceOrigin: 6},
		{id: "003", name: "火狐浏览器", src:"https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3824766833,1967460780&fm=58&s=74F528722828EF3AC1BF94F50300C028&bpow=121&bpoh=75" , saleVolume: 992, price: 37, priceOrigin: 666},
		{id: "004", name: "简单搜索", src:"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2407325608,2146020119&amp;fm=58" , saleVolume: 500, price: 25, priceOrigin: 555},
		{id: "005", name: "UC浏览器", src:"https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=252893326,2138469974&amp;fm=58" , saleVolume: 33, price: 5, priceOrigin: 88},
		
	], delimiters: ["{{", "}}"]
};
String.prototype.trim = function() {
	//该方法不改变原始字符串，并且返回一个新的字符串
	return this.replace(/^\s*|\s*$/g, '');
}
function templateEngine(data, template, delimiters) {
	/*
	不加入g，则只返回第一个匹配，无论执行多少次均是如此，
	如果加入g，则第一次执行也返回第一个匹配，再执行返回第二个匹配，依次类推
	i，表示忽略大小写 ignore
	m，表明可以进行多行匹配
	
	\\s表示不可见字符
	\\S表示可见字符
	.等价于\\s|\\S
	
	最长匹配(贪婪匹配)和最短匹配(懒惰匹配，在长度指示符后面加?)
	*/
	const regStr = "(.+?)";
	//const regStr = "(\\s*\\S+?\\s*)";
	const reg = new RegExp(delimiters[0] + regStr + delimiters[1], "g");
	let str = template.innerHTML.replace(reg, function() {
		/*
		这里的RegExp是全局对象，RegExp.$1...$9是全局属性。
		每次执行正则表达式操作，都会覆盖掉之前的存储数据
		由于string.replace是先查找出所有之后，在一次性替换
		
		arguments的第一个参数是匹配模式的字符串。
		接下来的参数是与模式中的子表达式匹配的字符串，可以有 0 个或多个这样的参数。
		接下来的参数是一个整数，声明了匹配在 stringObject 中出现的位置。
		最后一个参数是 stringObject 本身。
		
		chrome中RegExp.$1无法获取到值，只能通过arguments来得到值
		firefox可以用RegExp获取子表达式的值
		*/
		return data[( RegExp.$1 || arguments[1]).trim()];
	});
	return str;
}
function addToCart(event, id) {
	const target = event.target;
	const goodsNum = document.getElementById("goodsNum");
	/*
	cloneNode 用于克隆节点，
	如果传递给它的参数是 true，它还将递归复制当前节点的所有子孙节点。
	否则，它只复制当前节点。
	*/
	const cloneElem = event.target.cloneNode();
	cloneElem.removeAttribute("onclick");
	cloneElem.removeAttribute("data-id");
	//getBoundingClientRect用于获取某个元素相对于视窗的位置集合。
	const btnRect = target.getBoundingClientRect();
	const goodsNumRect = goodsNum.getBoundingClientRect();
	let style = "position:fixed;top:"+btnRect.top+"px;left:"+btnRect.left+"px;";
	style += "width:"+btnRect.width+"px;height:"+btnRect.height+"px;";
	cloneElem.style = style;
	//注意事件名称的大小写，如果错了不会触发事件
	cloneElem.addEventListener("transitionend", onAddToCartAnimationEnd, false);
	cloneElem.addEventListener("webkitTransitionEnd", onAddToCartAnimationEnd, false);
	document.body.appendChild(cloneElem);
	/*
	//这里即使用了window.getComputedStyle，强制让style生效并重绘，在火狐上也不能保证动画一定被触发
	window.getComputedStyle(cloneElem);
	window.requestAnimationFrame(()=>{
		cloneElem.textContent = "+1";
		let style = "position:fixed;top:"+goodsNumRect.top+"px;left:"+goodsNumRect.left+"px;";
		style += "border-radius:50%;width:1.5rem;height:1.5rem;padding:0;";
		cloneElem.style = style;
	});*/
	setTimeout(()=>{
		cloneElem.textContent = "+1";
		let style = "position:fixed;top:"+goodsNumRect.top+"px;left:"+goodsNumRect.left+"px;";
		style += "border-radius:50%;width:1.5rem;height:1.5rem;padding:0;";
		cloneElem.style = style;
	}, 50);
}
function onAddToCartAnimationEnd(event) {
	if(event.propertyName === "left") {
		animateShopCart();
		//try {
			document.body.removeChild(event.target);
			addGoodsNum();
		//} catch(err){console.error(err)};
	}
}
function addGoodsNum() {
	const goodsNum = document.getElementById("goodsNum");
	let num = parseInt(goodsNum.textContent);
	goodsNum.textContent = ++num;
}
function animateShopCart() {
	shopCart.className = "shake";
	goodsNum.className = "scaleAndMove";
}
function onShopCartAnimationEnd() {
	shopCart.className = "";
	goodsNum.className = "";
}
window.onload = ()=>{
	const template = document.getElementById("template");
	const goodsList = document.getElementsByClassName("goods-list")[0];
	const shopCart = document.getElementById("shopCart");
	const goodsNum = document.getElementById("goodsNum");
	for(const d of data.data) {
		const li = document.createElement("li");
		li.innerHTML = templateEngine(d, template, data.delimiters);
		goodsList.appendChild(li);
	}
	//firefox和Edge均已支持AnimationEnd，但谷歌系列的还需加webkit
	shopCart.addEventListener("animationend", onShopCartAnimationEnd, false);
	shopCart.addEventListener("WebkitAnimationEnd", onShopCartAnimationEnd, false);
}
</script>
</head>
<body>
<ul class="goods-list">
</ul>
<footer>
	<img id="shopCart" src="https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1545113836&di=95ae09e0ada9cb41b10498ae63c15447&src=http://pic.90sjimg.com/design/00/69/49/81/58faca780920b.png">
	<div id="goodsNum">0</div>
</footer>
</body>
</html>
福州司马懿
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实战：京东购物车静态界面实现，html前端技术开发
2401_84103903的博客
04-06 792
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！olute;right: 0;bottom: 0;
jQuery仿京东侧边购物车菜单特效代码
03-20
总的来说，"jQuery仿京东侧边购物车菜单特效代码"是一个综合运用HTML、CSS和jQuery技术实现的交互设计实例，它展示了如何通过JavaScript库来增强网页的交互性和动态性，提供类似大型电商网站的用户体验。通过学习和...
jQuery+HTML5+CSS3 实现加入购物车飞入动画特效
09-21
本案例 用到 jQuery+HTML5+CSS3 前端开发技术 实现加入购物车飞入动画特效,下载源码即可运行，运行环境VS2012。
记录--仿加入购物车飞入动画效果
林恒的博客
10-27 187
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 近期对管理后台相关功能进行优化，其中导出功能涉及到查询数据过多导致查询很慢问题，决定采用点击后加入到下载中心方式，既解决了接口慢等待问题，也方便后期各种文件的重复下载，一举多得~ 功能上很好实现，调接口就可以了，主要涉及到一个小球飞入效果，基础原理和商城的加入购物车很像，就是点击按钮之后，出现一个小球，按照一定路径飞入固定位置。先...
制作京东购物车，包含html+js+css完整代码
最新发布
m0_74937643的博客
05-18 1317
商品布居html，同一店铺多个商品只需要复写class="item-item"，更改内部的商品图片，名称，以及相对于的连接即可，不同店铺则复写class="cart-body"为所有的商品复选框添加点击事件，所有的商家name属性值保持一致，商品name属性值保持一致。制作京东购物车页面，实现全选商品，价格加减，商品数量加减，总价。JS函数，该函数包括获取商品总价，并显示总价及已选商品种类数量。点击全选，实现所有商品选中，并且算出总价，和已选择的商品数量。商品总价及已选择商品种类数量html部分。
HTML+CSS+JS实操京东购物车
qq_45841233的博客
12-03 4321
HTML+CSS+JS实操京东购物车
CSS3-购物车飞入动画
ahty的专栏
06-12 1826
 购物车飞入动画： .con{ width: 1000px; height: 700px; border: 1px solid transparent; position:relative; } .che{
京东购物车网页(静态)搭建
时间静止
03-22 7914
按照报告的形式写一个项目 一、项目名称 完成京东购物车网页搭建 二、项目环境 1、软件环境：Win10+HBuilder+Chrome浏览器 2、项目思路 ： 根据需要实现的效果，自上而下，依次实现导航栏、搜索框、标题栏、商品详情展示框、结算窗口的编写。 三、项目源码 购物车搭建的HTML代码（京东购物车5.html） <!DOCTYPE html> <html> &...
简单使用仿京东购物车+我的订单
热门推荐
zhang1223665986的博客
01-18 1万+
//首先写访问权限 uses-permission android:name="android.permission.INTERNET"/> application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name"
jQuery仿京东右侧边栏购物车功能菜单代码.zip
07-11
【jQuery仿京东右侧边栏购物车功能菜单代码】是一个基于JavaScript库jQuery实现的网页交互功能，主要用于模拟京东商城网站上常见的右侧购物车侧边栏。这个功能菜单不仅提供了购物车的相关操作，还可能包含了其他一些...
jQuery仿京东商城侧边栏购物车菜单代码.zip
07-11
这篇文章将深入解析jQuery仿京东商城侧边栏购物车菜单代码，该代码主要用于创建一个与京东商城类似的购物体验，用户可以在网站的侧边栏查看购物车信息，并直接进行结算操作。这个功能是电子商务网站中常见的交互设计...
jQuery仿京东手机移动端购物车商品删除代码
06-11
本文将深入探讨如何使用jQuery来创建一个仿京东手机移动端购物车商品删除的功能，这一功能允许用户轻松地从购物车中移除商品，提供良好的用户体验。 首先，我们需要了解jQuery的核心概念。jQuery简化了DOM操作、...
jQuery仿京东手机移动端购物车商品删除代码.zip
07-05
在本项目中，"jQuery仿京东手机移动端购物车商品删除代码.zip" 提供了一个实现兼容PC和手机端的购物车商品删除功能的示例。这个功能常见于电商平台，允许用户轻松管理他们的购物车，比如移除不需要的商品。下面将...
【Vue】零基础学习Vue: 第18课 Vue实现京东商城购物车小案例：
06-29 1098
实现后的效果图： 以下是全部实现代码注解很详细哦！如有疑惑可以评论留言： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> <!-- 引入 bootstrap (bootst...
前端Vue仿京东加入购物车弹框立即购买弹框shopDialog自定义弹框内容
chenchuang0128的博客
06-25 277
### 使用方法使用注意： 该插件需引用cc-radioBtnBox插件和cc-numbox插件两个插件库cc-radioBtnBox插件地址：https://ext.dcloud.net.cn/plugin?id=13176cc-numbox插件地址：https://ext.dcloud.net.cn/plugin?id=13163```使用方法。
移动端购物类页面首页、购物车、搜索页面HTML、LESS代码
weixin_64208498的博客
04-10 3916
location实现页面跳转，forEach实现数据的遍历渲染，固定定位，背景渐变
vue实现京东购物车(简单版)
Free_Ya的博客
08-21 1455
文章目录前言一、自述：二、功能实现实现购物车增加、减少、删除功能总结 前言 一、自述： 博客小白，刚接触vue不久，由于写作品需要京东购物车这个功能板块，所以，在这里分享一下自己的实现思路以及部分代码。希望能帮助到大家。 效果如下： 二、功能实现 实现购物车增加、减少、删除功能 首先，博主先说一下自己的思路： 1.当用户选中商品并点击添加的时候，我们获取当前商品的id，然后把改商品存到vuex中的shopCart这个数组中。 这里因为每个人写的不同，答主就不放自己的代码了。 2.当用户来到购物车界面，
原生js实现京东购物车
winterFlower1314的博客
04-27 3846
纯原生js实现京东购物车效果页面布局页面css页面效果js 完整代码 作为一名前端开发人员，购物的逻辑是经常遇到的， 尤其是商城类网站，订餐程序等，都需要购物车， 实际开发中购物车的逻辑相对简单，每一步操作都有后台数据作为支撑， 前端的主要的工作就是请求接口，渲染数据， 进行基础的逻辑判断处理； 但是在没有后台配合的情况下，纯粹的前端实现京东购物的完整逻辑，那就是有一定困难了 。。。 如果是一个前端小白，初学js的时候，一个头两个大， 在遇到购物车这样复杂的逻辑。头发都要掉光光了。。。 话不多说，直接给大
京东购物车（动态）网页搭建，利用JavaScript实现
时间静止
04-09 4936
需要实现的功能： 单选操作、全选操作、单行删除操作、多行删除操作、价格结算 使用的方式 JavaScript 项目环境 win10+Hbuilder+chrome浏览器 项目结构 实现了所有功能的主界面 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值