抛物线系列_06购物车的抛物线

示意图:



思路:

//购物车的抛物线:
//1、已知起点和终点
//2、计算p的值
//3、动态改变x的值,根据p来计算y的值。
//4、把动态变换的点(x,y)赋给一张图片,
//5、当图片到达终点时,隐藏即可

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin:0; 
				padding:0;
				list-style: none
			}
			#box{
				position:absolute;
				left:0px;
				top:0px;
				width:100px;
				height:100px;
				background-color:pink;
			}
			
			#shoppingCart{
				position:absolute;
				left:500px;
				top:10px;
				width:100px;
				height:100px;
				border:1px solid black;
			}
			
			#goods1{
				position:absolute;
				left:200px;
				top:400px;
				width:50px;
				height:50px;
				border:1px solid black;
			}
			#goods2{
				position:absolute;
				left:100px;
				top:300px;
				width:50px;
				height:50px;
				border:1px solid black;
			}
			
		</style>
	</head>
	<body style="height:1000px">
		<div id="shoppingCart">
			0
		</div>
		
		<div id="goods1">
			我是商品1
		</div>
		
		
		<div id="goods2">
			我是商品2
		</div>
		<img id="goodsId" src="images/www.jpg" style="position: absolute; width: 20px; height: 20px;display:none">
	</body>
</html>
<script type="text/javascript">  
function $(id){
	return document.getElementById(id.substring(1));
}
//购物车的抛物线:
//1、已知起点和终点
//2、计算p的值
//3、动态改变x的值,根据p来计算y的值。
//4、把动态变换的点(x,y)赋给一张图片,
//5、当图片到达终点时,隐藏即可

let startPoint={x:200,y:400};
let endPoint = {x:500,y:10};
let p=0;

//初始化数据(计算p)
function initData(){
	x=0;
	let tempPoint = {x:endPoint.x-startPoint.x,y:endPoint.y-startPoint.y};
	//y2 = -2px;
	p = (tempPoint.y*tempPoint.y)/(2*tempPoint.x);
}

let myTimer=null;
function moveObj(){
	if(myTimer!=null){
		window.clearInterval(myTimer);
	}
	myTimer = setInterval(goStep,10);
}

let x = 0;
let incX = 1;//x的方向

function goStep(){
	//1、假定起点在原点的抛物线
	x=x+incX;
	if(x>endPoint.x-startPoint.x){
		$("#goodsId").style.display="none";
		$("#shoppingCart").innerHTML =  parseInt($("#shoppingCart").innerHTML)+1;
		window.clearInterval(myTimer);
		myTimer = null;
		return;
	}
	y = -1*Math.sqrt(2*p*x);
	
	//2、改变抛物线的原点(移动原点,偏移)。
	let xTemp = x+startPoint.x;
	let yTemp = y+startPoint.y;
	
	//外观(改变某个图片的left和top):
	//drawPoint({x:xTemp,y:yTemp});
	$("#goodsId").style.left = xTemp+"px";
	$("#goodsId").style.top = yTemp+"px";
}

//产生移动的图片(动画效果的图片),该图片会沿着抛物线的路径进行移动
function genImg(point){
	$("#goodsId").style.display="block";
	$("#goodsId").style.left = point.x+"px";
	$("#goodsId").style.top = point.y+"px";
}

window.onload = function(){
	$("#goods1").onclick = function(event){
		let evt = event || window.event;
		//重置起点:
		startPoint={x:evt.pageX,y:evt.pageY}
		initData();//计算p
		genImg(startPoint);
		moveObj();//根据起点和终点绘制抛物线
	}
	
	$("#goods2").onclick = function(event){
		let evt = event || window.event;
		//重置起点:
		startPoint={x:evt.pageX,y:evt.pageY}
		initData();//计算p
		genImg(startPoint);
		moveObj();//根据起点和终点绘制抛物线
	}
}
</script>
js加入购物车抛物线动画与购物车效果特效,亲测可用, 当您在电商购物网站浏览中意的商品时,您可以点击页面中的“加入购物车”按钮即可将商品加入的购物车中。本文介绍借助一款基于jQuery的动画插件,点击加入购物车按钮时,实现商品将飞入到右侧的购物车中的效果。 HTML 首先载入jQuery库文件和jquery.fly.min.js插件。 复制代码 代码如下: 接着,将商品信息html结构布置好,本例中,我们用四个商品并排布置,每个商品box中包括有商品图片、价格、名称以及加入购物车按钮等信息。 复制代码 代码如下: ¥3499.00 LG 49LF5400-CA 49寸IPS硬屏富贵招财铜钱设计 加入购物车 ¥3799.00 Hisense/海信 LED50T1A 海信电视官方旗舰店 加入购物车 ¥¥3999.00 Skyworth/创维 50E8EUS 8核4Kj极清酷开系统智能液晶电视 加入购物车 ¥6969.00 乐视TV Letv X60S 4核1080P高清3D安卓智能超级电视 加入购物车 然后,我们还需要在页面的右侧加上购物车以及提示信息。 复制代码 代码如下: 购物车 已成功加入购物车! CSS 我们使用CSS先将商品排列美化,然后设置右侧购物车样式,具体请看代码: 复制代码 代码如下: .box{float:left; width:198px; height:320px; margin-left:5px; border:1px solid #e0e0e0; text-align:center} .box p{line-height:20px; padding:4px 4px 10px 4px; text-align:left} .box:hover{border:1px solid #f90} .box h4{line-height:32px; font-size:14px; color:#f30;font-weight:500} .box h4 span{font-size:20px} .u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;} .m-sidebar{position: fixed;top: 0;right: 0;background: #000;z-index: 2000;width: 35px;height: 100%;font-size: 12px;color: #fff;} .cart{color: #fff;t
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值