<html>
<head>
</head>
<body>
<style>
h1:hover{
color:blue;
}
.target,.origin,.task-guide,.parabola-el,.origin1{
position: absolute;
background-color: red;
width: 20px;
height:20px;
border-radius: 50%;
}
.task-guide{
background-color: blue;
}
.target{
position: absolute;
left: 600px;
top:300px;
}
.origin{
position: absolute;
left: 10px;
top: 300px;
background-color: blue;
}
.parabola-el{
top: -1000px;
background-color: green;
}
.origin1 {
position: absolute;
left: 10px;
top: 100px;
background-color: #000;
}
</style>
<h1>
点击黑球或者篮球出现意想不到的效果
</h1>
<div class="target"></div>
<div class="origin" onclick="onClick(this)"></div>
<div class="origin1" onclick="onClick(this)"></div>
<script type="text/javascript">
var parabola = function(config){
var b = 0,
INTERVAL = 15,
timer = null,
x1,y1,x2,y2,originx,originy,diffx,diffy;
this.config = config || {};
// 起点
this.origin = this.config.origin||null;
// 终点
this.target = document.getElementsByClassName(this.config.target)[0]||null;
// 运动的元素
this.element = document.getElementsByClassName(this.config.element)[0]||null;
// 曲线弧度
this.a = this.config.a || 0.002;
// 运动时间(ms)
this.time = this.config.time || 1000;
this.init = function(){
console.log(this.origin)
x1 = this.origin.offsetLeft;
y1 = this.origin.offsetTop;
x2 = this.target.offsetLeft;
y2 = this.target.offsetTop;
originx = x1;
originy = y1;
diffx = x2-x1;
diffy = y2-y1,
speedx = diffx/this.time;
b = (diffy - this.a*diffx*diffx)/diffx;
console.log(x1,y1)
this.element.style.left = x1;
this.element.style.top = y1;
return this;
}
// 确定动画方式
this.moveStyle = function(){
var moveStyle = 'position',
testDiv = document.createElement('div');
if('placeholder' in testDiv){
['','ms','moz','webkit'].forEach(function(pre){
var transform = pre + (pre ? 'T' : 't') + 'ransform';
if(transform in testDiv.style){
moveStyle = transform;
}
})
}
return moveStyle;
}
this.move = function(){
var start = new Date().getTime(),
moveStyle = this.moveStyle(),
_this = this;
timer = setInterval(function(){
if(new Date().getTime() - start > _this.time){
clearInterval(timer);
_this.element.style.left = x2;
_this.element.style.top = y2;
typeof _this.config.callback === 'function' && _this.config.callback(_this.element);
return;
}
x = speedx * (new Date().getTime() - start);
y = _this.a*x*x + b*x;
if(moveStyle === 'position'){
_this.element.style.left = x+originx;
_this.element.style.top = y+originy;
}else{
if(window.requestAnimationFrame){
window.requestAnimationFrame(_this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)');
}else{
_this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)';
}
}
},INTERVAL)
return this;
}
this.init();
}
function onClick(element){
var el = document.createElement('div');
el.setAttribute("class","parabola-el")
document.body.appendChild(el);
new parabola({
origin: element,
target: 'target',
element: 'parabola-el',
time: 1000,
callback: function(el){
el.remove();
}
}).move()
}
</script>
</body></html>
<head>
</head>
<body>
<style>
h1:hover{
color:blue;
}
.target,.origin,.task-guide,.parabola-el,.origin1{
position: absolute;
background-color: red;
width: 20px;
height:20px;
border-radius: 50%;
}
.task-guide{
background-color: blue;
}
.target{
position: absolute;
left: 600px;
top:300px;
}
.origin{
position: absolute;
left: 10px;
top: 300px;
background-color: blue;
}
.parabola-el{
top: -1000px;
background-color: green;
}
.origin1 {
position: absolute;
left: 10px;
top: 100px;
background-color: #000;
}
</style>
<h1>
点击黑球或者篮球出现意想不到的效果
</h1>
<div class="target"></div>
<div class="origin" onclick="onClick(this)"></div>
<div class="origin1" onclick="onClick(this)"></div>
<script type="text/javascript">
var parabola = function(config){
var b = 0,
INTERVAL = 15,
timer = null,
x1,y1,x2,y2,originx,originy,diffx,diffy;
this.config = config || {};
// 起点
this.origin = this.config.origin||null;
// 终点
this.target = document.getElementsByClassName(this.config.target)[0]||null;
// 运动的元素
this.element = document.getElementsByClassName(this.config.element)[0]||null;
// 曲线弧度
this.a = this.config.a || 0.002;
// 运动时间(ms)
this.time = this.config.time || 1000;
this.init = function(){
console.log(this.origin)
x1 = this.origin.offsetLeft;
y1 = this.origin.offsetTop;
x2 = this.target.offsetLeft;
y2 = this.target.offsetTop;
originx = x1;
originy = y1;
diffx = x2-x1;
diffy = y2-y1,
speedx = diffx/this.time;
b = (diffy - this.a*diffx*diffx)/diffx;
console.log(x1,y1)
this.element.style.left = x1;
this.element.style.top = y1;
return this;
}
// 确定动画方式
this.moveStyle = function(){
var moveStyle = 'position',
testDiv = document.createElement('div');
if('placeholder' in testDiv){
['','ms','moz','webkit'].forEach(function(pre){
var transform = pre + (pre ? 'T' : 't') + 'ransform';
if(transform in testDiv.style){
moveStyle = transform;
}
})
}
return moveStyle;
}
this.move = function(){
var start = new Date().getTime(),
moveStyle = this.moveStyle(),
_this = this;
timer = setInterval(function(){
if(new Date().getTime() - start > _this.time){
clearInterval(timer);
_this.element.style.left = x2;
_this.element.style.top = y2;
typeof _this.config.callback === 'function' && _this.config.callback(_this.element);
return;
}
x = speedx * (new Date().getTime() - start);
y = _this.a*x*x + b*x;
if(moveStyle === 'position'){
_this.element.style.left = x+originx;
_this.element.style.top = y+originy;
}else{
if(window.requestAnimationFrame){
window.requestAnimationFrame(_this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)');
}else{
_this.element[0].style[moveStyle] = 'translate('+x+'px,'+y+'px)';
}
}
},INTERVAL)
return this;
}
this.init();
}
function onClick(element){
var el = document.createElement('div');
el.setAttribute("class","parabola-el")
document.body.appendChild(el);
new parabola({
origin: element,
target: 'target',
element: 'parabola-el',
time: 1000,
callback: function(el){
el.remove();
}
}).move()
}
</script>
</body></html>