js繪製拋物線程式碼分享
本文主要跟大家分享js繪製拋物線程式碼，我們先和大大家展示效果圖，具體方法大家來一起看程式碼吧，希望能幫助大家。
效果圖：
<!DOCTYPE HTML><html><head>
<meta charset="utf-8">
<title>抛物线运动效果</title>
<style type="text/css">
body { overflow: hidden; }
.boll { width: 50px; height: 50px; position: absolute; top: 55%; left: 55%; background: url("redpack_show.jpg"); background-size: contain; }
.red-bag { position: absolute; left: 50%; top:50%; width: 200px; height: 200px; border-radius: 50%; background: url("red_bag.png") no-repeat; background-size: contain; z-index:10; }
</style>
<script type="text/javascript" src="jquery-2.1.4.js"></script>
<script type="text/javascript" src="parabola.js"></script></head><body><p class="btns" style="margin-top:20px">
<a href="http://www.css88.com/archives/5355" target="_blank">回到JavaScript实现的抛物线运动效果</a></p><p class="btns" style="margin-top:20px">
<a href="#" class="btnA btn-danger" id="run" rel="popover" title="A Title" >run</a></p><p class="red-bag"></p><p id="target" class="target"></p><!--<p class="boll boll1"></p>--><script type="text/javascript">
for(let i=1;i<80;i++){
$("body").append(`<p class='boll boll${i}'></p>`);
let bool = "bool"+i;
createSingle(bool,i);
// console.log(i)
}
function createSingle(bool,i) {
let left = i%2 == 0 ? (-getRandom(500,600)):(getRandom(500,600));
let top = i%2 == 0? (getRandom(200,250)):(getRandom(200,250));
// console.log(getRandom(0.005,0.01));
bool = new Parabola({
el: ".boll"+i,
offset: [left, top],
curvature: 0.005,
duration: 3000,
callback:function(){
// alert("完成后回调")
},
stepCallback:function(x,y){
// console.log(x,y);
// $("<p>").appendTo("body").css({
// "position": "absolute",
// "top": this.elOriginalTop + y,
// "left":this.elOriginalLeft + x,
// "background-color":"rgba(244,21,50,.5)",
// "width":"2px",
// "height":"2px",
// "border-radius": "2px"
// });
}
});
$("#run").click(function (event) {
event.preventDefault();
bool.start();
});
}
function getRandom(min,max) {
return Math.random()*(max-min)+min;
}
// $("#reset").click(function (event) {
// event.preventDefault();
// bool.reset()
// });
// $("#run").click(function (event) {
// event.preventDefault();
// bool.start();
// });
// $("#stop").click(function (event) {
// event.preventDefault();
// bool.stop();
// });
// $("#setOptions").click(function (event) {
// event.preventDefault();
// bool.setOptions({
// targetEl: $("#target"),
// curvature: 0.001,
// duration: 1000
// });
// });</script></body></html>(function () { var _$ = function (_this) { return _this.constructor == jQuery ? _this : $(_this);
};// 获取当前时间
function now() { return +new Date();
}// 转化为整数
function toInteger(text) {
text = parseInt(text); return isFinite(text) ? text : 0;
} var Parabola = function (options) { this.initialize(options);
};
Parabola.prototype = {
constructor: Parabola, /**
* 初始化
* @classDescription 初始化
* @param {Object} options 插件配置 .
*/
initialize: function (options) { this.options = this.options || this.getOptions(options); var ops = this.options; if (!this.options.el) { return;
} this.$el = _$(ops.el); this.timerId = null; this.elOriginalLeft = toInteger(this.$el.css("left")); this.elOriginalTop = toInteger(this.$el.css("top")); // this.driftX X轴的偏移总量
//this.driftY Y轴的偏移总量
if (ops.targetEl) { this.driftX = toInteger(_$(ops.targetEl).css("left")) - this.elOriginalLeft; this.driftY = toInteger(_$(ops.targetEl).css("top")) - this.elOriginalTop;
} else { this.driftX = ops.offset[0]; this.driftY = ops.offset[1];
} this.duration = ops.duration; // 处理公式常量
this.curvature = ops.curvature; // 根据两点坐标以及曲率确定运动曲线函数（也就是确定a, b的值）
//a=this.curvature
/* 公式： y = a*x*x + b*x + c;
*/
/*
* 因为经过(0, 0), 因此c = 0
* 于是：
* y = a * x*x + b*x;
* y1 = a * x1*x1 + b*x1;
* y2 = a * x2*x2 + b*x2;
* 利用第二个坐标：
* b = (y2+ a*x2*x2) / x2
*/
// 于是
this.b = ( this.driftY - this.curvature * this.driftX * this.driftX ) / this.driftX; //自动开始
if (ops.autostart) { this.start();
}
}, /**
* 初始化 配置参数 返回参数MAP
* @param {Object} options 插件配置 .
* @return {Object} 配置参数
*/
getOptions: function (options) { if (typeof options !== "object") {
options = {};
}
options = $.extend({}, defaultSetting, _$(options.el).data(), (this.options || {}), options); return options;
}, /**
* 定位
* @param {Number} x x坐标 .
* @param {Object} y y坐标 .
* @return {Object} this
*/
domove: function (x, y) { this.$el.css({
position: "absolute",
left: this.elOriginalLeft + x,
top: this.elOriginalTop + y
}); return this;
}, /**
* 每一步执行
* @param {Data} now 当前时间 .
* @return {Object} this
*/
step: function (now) { var ops = this.options; var x, y; if (now > this.end) { // 运行结束
x = this.driftX;
y = this.driftY; this.domove(x, y); this.stop(); if (typeof ops.callback === 'function') {
ops.callback.call(this);
}
} else { //x 每一步的X轴的位置
x = this.driftX * ((now - this.begin) / this.duration); //每一步的Y轴的位置y = a*x*x + b*x + c; c==0;
y = this.curvature * x * x + this.b * x; this.domove(x, y); if (typeof ops.stepCallback === 'function') {
ops.stepCallback.call(this,x,y);
}
} return this;
}, /**
* 设置options
* @param {Object} options 当前时间 .
*/
setOptions: function (options) { this.reset(); if (typeof options !== "object") {
options = {};
} this.options = $.extend(this.options,options); this.initialize(this.options); return this;
}, /**
* 开始
*/
start: function () { var self = this; // 设置起止时间
this.begin = now(); this.end = this.begin + this.duration; if (this.driftX === 0 && this.driftY === 0) { // 原地踏步就别浪费性能了
return;
} /*timers.push(this);
Timer.start();*/
if (!!this.timerId) {
clearInterval(this.timerId); this.stop();
} this.timerId = setInterval(function () { var t = now();
self.step(t);
}, 13); return this;
}, /**
* 重置
*/
reset: function (x, y) { this.stop();
x = x ? x : 0;
y = y ? y : 0; this.domove(x, y); return this;
}, /**
* 停止
*/
stop: function () { if (!!this.timerId) {
clearInterval(this.timerId);
} return this;
}
}; var defaultSetting = {
el: null, //偏移位置
offset: [0, 0], //终点元素，这时就会自动获取该元素的left、top，设置了这个参数，offset将失效
targetEl: null, //运动的时间，默认500毫秒
duration: 500, //抛物线曲率，就是弯曲的程度，越接近于0越像直线，默认0.001
curvature: 0.001, //运动后执行的回调函数
callback: null, // 是否自动开始，默认为false
autostart: false, //运动过程中执行的回调函数
stepCallback: null
};
window.Parabola = Parabola;
})();相關推薦：
#以上是js繪製拋物線程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
夸克網盤怎麼分享到百度網盤？
Mar 14, 2024 pm 04:40 PM
夸克網盤和百度網盤都是很便利的儲存工具，不少的用戶都在詢問這兩款軟體互通嗎？夸克網盤怎麼分享到百度網盤？下面就讓本站來為用戶們來仔細的介紹一下夸克網盤的文件怎麼保存到百度網盤方法吧。夸克網盤的文件怎麼保存到百度網盤方法1、想要知道怎麼把夸克網盤的文件轉到百度網盤，首先在夸克網盤上下載需要保存的文件，然後打開百度網盤客戶端後，選擇壓縮檔案要儲存的資料夾，雙擊開啟該資料夾。 2、開啟該資料夾後，點選視窗左上角區域的「上傳」。 3、在電腦中找到需要上傳的壓縮文件，點選選
如何使用WebSocket和JavaScript實現線上語音辨識系統
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系
網路易雲音樂怎麼分享到微信朋友圈_網易雲音樂分享到微信朋友圈教程
Mar 25, 2024 am 11:41 AM
1.首先我們進入到網易雲音樂中，然後在軟體首頁介面中，點選進入到歌曲的播放介面中。 2.然後在歌曲播放介面中，找到右上方的分享功能按鈕，如下圖紅框所示位置，點擊選擇分享的管道;在分享管道中，點擊底部的「分享至」選項，然後選擇第一個“微信朋友圈”，即可將內容分享至微信朋友圈。
WebSocket與JavaScript：實現即時監控系統的關鍵技術
Dec 17, 2023 pm 05:30 PM
WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技
百度網盤怎麼分享文件給好友
Mar 25, 2024 pm 06:52 PM
近期，百度網盤安卓客戶端迎來了全新的8.0.0版本，這個版本不僅帶來了許多變化，還增添了許多實用功能。其中，最引人注目的便是資料夾共享功能的增強。現在，使用者可以輕鬆邀請好友加入，共同分享工作與生活中的重要文件，實現更便利的協作與分享。那麼究竟該如何分享給好友自己需要分享的文件呢，下文中本站小編就會為大家帶來詳細內容介紹，希望能幫助大家！ 1）開啟百度雲APP，先點選在首頁選擇相關的資料夾，再點選介面右上角的【...】圖示；（如下圖）2）接著點選「共用成員」一欄中的【+ 】，最後在勾選所
芒果tv會員帳號分享2023
Feb 07, 2024 pm 02:27 PM
芒果TV擁有各種類型的電影、電視劇、綜藝等資源，用戶可以在其中自由的選擇觀看。芒果tv會員不僅能夠看到全部的VIP劇而且還能夠設定最高清的畫質，幫助用戶爽快看劇，下面小編就給大家帶來一些芒果tv免費的會員帳號供用戶們使用，趕緊來看一看吧。芒果tv最新會員帳號免費分享2023：注意：都是收集的最新會員帳號，可以直接登入使用，不要隨意的修改密碼。帳號：13842025699密碼：qds373帳號：15804882888密碼：evr6982帳號：13330925667密碼：jgqae帳號：1703
JavaScript與WebSocket：打造高效率的即時天氣預報系統
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We
解決Discuz微信分享無法顯示的問題
Mar 09, 2024 pm 03:39 PM
標題：解決Discuz微信分享無法顯示的問題，需要具體程式碼範例隨著行動網路的發展，微信成為了人們日常生活中不可或缺的一部分。在網站開發中，為了提升使用者體驗和擴大網站的曝光度，許多網站會整合微信分享功能，讓使用者能夠輕鬆分享網站的內容到朋友圈或微信群組。然而，有時在使用Discuz等開源論壇系統時，會遇到微信分享無法顯示的問題，這給使用者體驗帶來了一定的困
