原生js如何做购物车的抛物线运动,购物车的抛物线怎么做
2017-12-26 12:46
477 查看
复制以下代码,保存成html文件,在浏览器打开,在页面的空白区域点击以下,就会出现效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none
}
#startDiv{
position:absolute;
left:50px;
top:600px;
width:10px;
height:10px;
border-radius:50%;
background-color:black;
}
#endDiv{
position:absolute;
left:400px;
top:100px;
width:10px;
height:10px;
border-radius:50%;
background-color:black;
}
#imgId{
position:absolute;
display:none;
}
</style>
</head>
<body style="width:1000px;height:1000px">
<div id="startDiv">
</div>
<img id="imgId" src="img/shop.png"/>
</body>
</html>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function drawPoint(x,y){
//画个点
let divDom = document.createElement("div");
divDom.style.position = "absolute";
divDom.style.left = x+"px";
divDom.style.top = y+"px";
divDom.style.width = "5px";
divDom.style.height = "5px";
divDom.style.borderRadius = "50%";
divDom.style.backgroundColor= "red";
document.body.appendChild(divDom);
}
window.onload = function(){
document.body.onmousedown = function(event){
let evt = event||window.event;
//确定起点
let startPoint = {
left:50,
top:600
};
let endPoint = {
left:evt.pageX,
top:evt.pageY
};
//在鼠标点击的位置画个黑点(表示抛物线的终点)
drawPoint(endPoint.left,endPoint.top);
//把图片显示出来
$("imgId").style.left = startPoint.left+"px";
$("imgId").style.top = startPoint.top+"px";
$("imgId").style.display = "block";
//根据起点和终点计算p的值
let tempPoint = {
x:endPoint.left-startPoint.left,
y:endPoint.top - startPoint.top
}
let p=tempPoint.y*tempPoint.y/(2*tempPoint.x);
let x = 0;
let myTimer = setInterval(function(){
x++;
if(x>endPoint.left-startPoint.left){
window.clearInterval(myTimer);
$("imgId").style.display = "none";
return;
}
//求y (根据公式:y^2=2px)
let y = -1*Math.sqrt(2*p*x);
//画个点
//drawPoint((x-2.5)+startPoint.left,(y-2.5)+startPoint.top);
$("imgId").style.left = (x-2.5)+startPoint.left+"px";
$("imgId").style.top = (y-2.5)+startPoint.top+"px";
},5);
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none
}
#startDiv{
position:absolute;
left:50px;
top:600px;
width:10px;
height:10px;
border-radius:50%;
background-color:black;
}
#endDiv{
position:absolute;
left:400px;
top:100px;
width:10px;
height:10px;
border-radius:50%;
background-color:black;
}
#imgId{
position:absolute;
display:none;
}
</style>
</head>
<body style="width:1000px;height:1000px">
<div id="startDiv">
</div>
<img id="imgId" src="img/shop.png"/>
</body>
</html>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
function drawPoint(x,y){
//画个点
let divDom = document.createElement("div");
divDom.style.position = "absolute";
divDom.style.left = x+"px";
divDom.style.top = y+"px";
divDom.style.width = "5px";
divDom.style.height = "5px";
divDom.style.borderRadius = "50%";
divDom.style.backgroundColor= "red";
document.body.appendChild(divDom);
}
window.onload = function(){
document.body.onmousedown = function(event){
let evt = event||window.event;
//确定起点
let startPoint = {
left:50,
top:600
};
let endPoint = {
left:evt.pageX,
top:evt.pageY
};
//在鼠标点击的位置画个黑点(表示抛物线的终点)
drawPoint(endPoint.left,endPoint.top);
//把图片显示出来
$("imgId").style.left = startPoint.left+"px";
$("imgId").style.top = startPoint.top+"px";
$("imgId").style.display = "block";
//根据起点和终点计算p的值
let tempPoint = {
x:endPoint.left-startPoint.left,
y:endPoint.top - startPoint.top
}
let p=tempPoint.y*tempPoint.y/(2*tempPoint.x);
let x = 0;
let myTimer = setInterval(function(){
x++;
if(x>endPoint.left-startPoint.left){
window.clearInterval(myTimer);
$("imgId").style.display = "none";
return;
}
//求y (根据公式:y^2=2px)
let y = -1*Math.sqrt(2*p*x);
//画个点
//drawPoint((x-2.5)+startPoint.left,(y-2.5)+startPoint.top);
$("imgId").style.left = (x-2.5)+startPoint.left+"px";
$("imgId").style.top = (y-2.5)+startPoint.top+"px";
},5);
}
}
</script>
相关文章推荐
- 原生js如何做一个链式运动,JavaScript怎么做鼠标跟随效果
- 原生js如何让一个dom原生做抛物线运动(右开口u型)
- jquery.fly.js实现添加购物车效果、实现抛物线运动
- 原生js如何做拖拽_javascript的拖拽怎么做?可拖拽的窗口(div)
- 原生js的瀑布流怎么做,如何用原始js做一个瀑布流效果
- JavaScript如何做表格即时编辑,原生js的表格即时编辑怎么做
- 【原生JS组件】javascript 运动框架
- vue.js如何写一个简单的原生js模块,浏览器中的表现如何?
- 如何利用原生js更改css样式
- 关于原生js 如何找到他的直接子元素而不是后代子元素
- 原生JS实现图片无缝滚动方法(附带封装的运动框架)
- js抛物线动画——加入购物车动效
- 如何用原生JS实现一个简单的promise
- 原生js如何实现柱状图以及原生js柱状图结合ajax循环动态数据_JavaScript_柱状图(原生JavaScript做的柱状图)(03)_ajax获取数据
- 原生JS实现购物车功能
- 原生js的放大镜怎么做,怎么实现放大镜效果_n倍放大镜
- 原生JS 购物车及购物页面的cookie使用
- 原生JS实现购物车的添加删除,以及总价计算的功能
- 原生JS中如何获取CSS属性中的值
- JS实现的抛物线运动效果示例