前端原生js实现抛物线效果
2019-07-30 本文已影响0人
who_are_you_
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>下拉刷新上拉加载demo</title>
<style>
.d-target{
width: 100px;
height: 100px;
border: 1px solid #ccc;
border-radius: 50%;
position: absolute;
left: 100px;
bottom: 100px;
}
.outer{
width: 30px;
height: 30px;
position: absolute;
left: 0px;
top: 0px;
transition: all 0.35s linear;
}
.outer .inner{
width: 30px;
height: 30px;
background: #ccc;
border-radius: 50%;
transition: all 0.35s cubic-bezier(0.39,-0.4,0.83,0.23);
position: absolute;
}
.outer.point-pre{
display: none;
}
</style>
</head>
<body>
<p>在页面的任何位置点击,将有一个小球飞入类为d-targer圆形容器中,可以连续点击</p>
<div id="ttt" class="d-target"></div>
</body>
<script >
window.onload = function () {
/* add elements */
function addElements(CLASSNAME_OUTER,CLASSNAME_INNER) {
var outerWrapper = document.createElement('div');
var outer = null;
var inner = null;
for (var i = 0; i< 5; i++) {
outer = document.createElement('div');
outer.classList.add(CLASSNAME_OUTER);
outer.classList.add('point-pre');
// outer.setAttribute('class', CLASSNAME_OUTER+" point-pre");
// outer.setAttribute('myshow', 'hide');
inner = document.createElement('div');
inner.setAttribute('class', CLASSNAME_INNER);
outer.appendChild(inner);
outerWrapper.appendChild(outer);
inner = null;
outer = null;
}
document.body.appendChild(outerWrapper);
return outerWrapper;
}
/* 获取终止点的相对于窗口的坐标 */
function getEndCoordinate (ele) {
var left = ele.offsetLeft;
var top = ele.offsetTop;
return [left,top];
}
/* 获取outer下myshow属性为hide的第一个元素 */
function getElementMyShowHide (parentElement,CLASSNAME_SHOW_NONE) {
var result = null;
var childElements = parentElement.getElementsByClassName(CLASSNAME_SHOW_NONE);
result = childElements[0];
return result;
}
var CLASSNAME_OUTER = 'outer';
var CLASSNAME_INNER = 'inner';
// 增加小球元素
var outerWrapper = addElements(CLASSNAME_OUTER,CLASSNAME_INNER);
var endLeft = getEndCoordinate(document.getElementById('ttt'))[0];
var endTop = getEndCoordinate(document.getElementById('ttt'))[1];
// 真实中的购物车实现是这里的click事件绑在添加购物车的按钮或者类似按钮的dom上
window.addEventListener('click', function (event) {
// 当双击的时候,小球会从(0,0)的位置落入目标区,以下为当双击的时候,只会第一次点击的setTimeout会被清除
// 所以只会显示一次从点击地点到目标区的运动
// 但是依然会执行第一次的逻辑,因为内部两个setTimeout没有被清除
clearTimeout(timer);
var timer = setTimeout(function () {
var left = event.offsetX;
var top = event.offsetY;
// 定位球元素
var childElement = getElementMyShowHide(outerWrapper,'point-pre');
childElement.style.left = left + 'px';
childElement.style.top = top + 'px';
// 计算坐标差
var leftDifference = -(left - endLeft);
var topDifference = -(top - endTop);
// 开始
childElement.classList.remove('point-pre');
setTimeout(function () {
childElement.getElementsByClassName('inner')[0].style.transform = `translateY(${topDifference}px)`;
childElement.style.transform = `translateX(${leftDifference}px)`;
setTimeout(function () {
childElement.getElementsByClassName('inner')[0].setAttribute('style', '');
childElement.setAttribute('style', '');
childElement.classList.add('point-pre');
}, 350);
}, 30);
}, 30);
});
}
</script>
</html>
原文地址：
https://blog.csdn.net/guxiansheng1991/article/details/79781519
