Node.js 그리기 포물선 코드 공유-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

Node.js 그리기 포물선 코드 공유

小云云

Mar 07, 2018 am 10:32 AM

javascript 공유하다 포물선

이 글에서는 주로 포물선 그리기를 위한 js 코드를 공유합니다. 먼저 렌더링을 보여드리겠습니다. 구체적인 방법과 함께 코드를 살펴보겠습니다.

렌더링:
Node.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=&#39;boll boll${i}&#39;></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 === &#39;function&#39;) {
                    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 === &#39;function&#39;) {
                    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;
})();

로그인 후 복사

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7449

Cakephp 튜토리얼

1374

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

Quark Netdisk를 Baidu Netdisk에 공유하는 방법은 무엇입니까? Mar 14, 2024 pm 04:40 PM

Quark Netdisk와 Baidu Netdisk는 매우 편리한 저장 도구입니다. 많은 사용자가 이 두 소프트웨어가 상호 운용 가능한지 묻고 있습니다. Quark Netdisk를 Baidu Netdisk에 공유하는 방법은 무엇입니까? 이 사이트에서는 Quark 네트워크 디스크 파일을 Baidu 네트워크 디스크에 저장하는 방법을 사용자에게 자세히 소개합니다. Quark Network Disk에서 Baidu Network Disk로 파일을 저장하는 방법 방법 1. Quark Network Disk에서 Baidu Network Disk로 파일을 전송하는 방법을 알고 싶다면 먼저 Quark Network Disk에 저장해야 하는 파일을 다운로드한 다음 엽니다. Baidu 네트워크 디스크 클라이언트에서 압축 파일을 저장할 폴더를 선택한 다음 두 번 클릭하여 폴더를 엽니다. 2. 폴더를 연 후 창 왼쪽 상단에 있는 "업로드"를 클릭하세요. 3. 컴퓨터에 업로드해야 하는 압축 파일을 찾아 클릭하여 선택합니다.

NetEase Cloud Music을 WeChat Moments에 공유하는 방법_NetEase Cloud Music을 WeChat Moments에 공유하는 방법에 대한 튜토리얼 Mar 25, 2024 am 11:41 AM

1. 먼저 NetEase Cloud Music에 들어간 다음 소프트웨어 홈페이지 인터페이스를 클릭하여 노래 재생 인터페이스로 들어갑니다. 2. 그런 다음 노래 재생 인터페이스에서 아래 그림의 빨간색 상자에 표시된 것처럼 오른쪽 상단에서 공유 기능 버튼을 찾아 공유 채널에서 공유 채널을 선택하고 다음 위치에서 "공유 대상" 옵션을 클릭합니다. 하단에서 첫 번째 "WeChat Moments"를 선택하면 WeChat Moments에 콘텐츠를 공유할 수 있습니다.

WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 Dec 17, 2023 pm 02:54 PM

WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.

Baidu Netdisk에서 친구들과 파일을 공유하는 방법 Mar 25, 2024 pm 06:52 PM

최근 Baidu Netdisk Android 클라이언트는 새로운 버전 8.0.0을 선보였습니다. 이 버전은 많은 변화를 가져올 뿐만 아니라 많은 실용적인 기능도 추가했습니다. 그 중 가장 눈길을 끄는 것은 폴더 공유 기능 강화다. 이제 사용자는 쉽게 친구를 초대하여 업무와 생활에서 중요한 파일을 공유하고 더욱 편리하게 협업하고 공유할 수 있습니다. 그렇다면 친구들과 공유해야 하는 파일을 어떻게 공유합니까? 아래에서 이 사이트의 편집자가 자세한 소개를 해줄 것입니다. 1) Baidu Cloud 앱을 열고 먼저 홈페이지에서 관련 폴더를 클릭한 다음 인터페이스 오른쪽 상단에 있는 [...] 아이콘을 클릭합니다(아래 참조). 2) 그런 다음에서 [+]를 클릭합니다. "공유 멤버" 열 ]을 선택하고 마지막으로 모두 확인합니다.

WebSocket 및 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 Dec 17, 2023 pm 05:30 PM

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

망고tv 회원 계정공유 2023 Feb 07, 2024 pm 02:27 PM

Mango TV에는 다양한 유형의 영화, TV 시리즈, 예능 프로그램 및 기타 리소스가 있으며 사용자는 자유롭게 선택하여 시청할 수 있습니다. Mango TV 회원은 모든 VIP 드라마를 시청할 수 있을 뿐만 아니라 사용자가 드라마를 즐겁게 시청할 수 있도록 최고 화질을 설정할 수 있습니다. 아래에서 편집자는 사용자가 사용하고 서둘러 살펴볼 수 있도록 무료 Mango TV 멤버십 계정을 제공합니다. 구경하다. Mango TV 최신 회원 계정 무료 공유 2023: 참고: 이것은 최근 수집된 회원 계정이며 로그인하여 직접 사용할 수 있으며 비밀번호를 마음대로 변경하지 마십시오. 계좌번호: 13842025699 비밀번호: qds373 계좌번호: 15804882888 비밀번호: evr6982 계좌번호: 13330925667 비밀번호: jgqae 계좌번호: 1703

JavaScript와 WebSocket: 효율적인 실시간 일기예보 시스템 구축 Dec 17, 2023 pm 05:13 PM

JavaScript 및 WebSocket: 효율적인 실시간 일기 예보 시스템 구축 소개: 오늘날 일기 예보의 정확성은 일상 생활과 의사 결정에 매우 중요합니다. 기술이 발전함에 따라 우리는 날씨 데이터를 실시간으로 획득함으로써 보다 정확하고 신뢰할 수 있는 일기예보를 제공할 수 있습니다. 이 기사에서는 JavaScript 및 WebSocket 기술을 사용하여 효율적인 실시간 일기 예보 시스템을 구축하는 방법을 알아봅니다. 이 문서에서는 특정 코드 예제를 통해 구현 프로세스를 보여줍니다. 우리

간단한 JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법 Jan 05, 2024 pm 06:08 PM

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

See all articles

Node.js 그리기 포물선 코드 공유

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제