使用jQuery实现的图片的圆周运动

这个是小demo是使用jQuery实现的滑稽图片的圆周运动，并且中央图片的透明度会随着点击而发生变化，
圆周的速度会随这点击的次数而增加。
<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html" charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}

#input_1 {
    background-image: url('./img/huaji.jpg');
    background-size: 100%;
    margin-left: 100px;
    margin-top: 400px;
    width: 100px;
    height: 100px;
}

#big_huaji {
    position: fixed;
    left: 350px;
    top: 400px;
    height: 175px;
    width: 200px;
    background-image: url('./img/big_ huaji.png');
    background-size: 100%;
    opacity: 0.0;
    border: none;
    outline: none;
}

#big_huaji_out_div {
    position: fixed;
    left: 350px;
    top: 400px;
    height: 175px;
    width: 200px;
    border: 1px solid red;
    text-align: center;
}

#tishi {
    margin-top: 80px;
    border: none;
    outline: none;
    background-color: #fff;
}
</style>
</head>
<script type="text/javascript">
    function fun_1() {
        $(function() {
            $('center').css('display', 'none');
            //x^2+y^2=1  x=1-(y*y) (x-a)^2+(y-b)^2 = r^2
            var res = parseInt($('#input_1').css('margin-left'));
            var res_top = parseInt($('#input_1').css('margin-top'));
            var a = res + 300;
            var b = res_top;
            var r = 300;//定义图形运行的圆周半径。
            var stop_button = $('#stop');//定义停止的按钮
            var count_left = res;
            $('#input_1').css('margin-left', 600 + 'px');
            var num = parseInt(res);
            var index = true;
            var sudu = 1;
            var opacity = 0;
            $('#big_huaji').click(function() {
                opacity += 0.02;
                if (opacity > 0.10) {
                    fun_clear();
                }
                fun_touming(opacity);
                sudu += 0.5;
                return sudu;
            })
            var move_Heart = setInterval(function() {
                if (index == true) {
                    count_left += sudu;
                    var count_top = fun_zuobiao_y(count_left, a, b, r);
                    $('#input_1').css('margin-top', count_top + 'px');
                } else if (index == false) {
                    count_left -= sudu;
                    var count_top = fun_zuobiao_y(count_left, a, b, r);
                    $('#input_1').css('margin-top', res_top - (count_top - res_top) + 'px');
                }
                if (count_left + (sudu + 1) > res + (2 * r)) {
                    index = false;
                }
                if (count_left - (sudu + 1) < res) {
                    index = true;
                }
                $('#input_1').css('margin-left', count_left + 'px');
                fun_create(count_left, count_top);
                stop_button.click(function() {
                    clearInterval(move_Heart);
                })
            }, 1)
        })
    }
    function fun_zuobiao_y(x, a, b, r) {
        return Math.sqrt(Math.pow(r, 2) - Math.pow(x - a, 2)) + b;
    }
    function fun_create(x, y) {
        $(function() {
            $('#input_1').append('<hr style="width:20px; height: 20px; border: 1px solid red;>');
            ;
        })
    }
    function fun_touming(opacity) {
        $('#big_huaji').css({
            opacity : opacity
        })
    }
    //清除
    function fun_clear() {
        $('#big_huaji_out_div').css({
            border : "none",
        })
        $('#tishi').css('display', 'none')
    }
    fun_1();
</script>
<body>
    <input value="停止" type="button" id="stop" style="position: fixed;">
    <div id="big_huaji_out_div">
        <input value="连续点击召唤神兽" type="button" id="tishi"> <input
            type="button" id="big_huaji">
    </div>
    <br>
    <input id="input_1" type="button" style="outline: none;border: none;">
    <hr style="width:1px; height: 1px; border: 1px solid red;">
    <hr style="width:1px; height: 20px; border: 1px solid red;">
    <hr style="width:1px; height: 20px; border: 1px solid red;">
</body>
</html>
此demo的还存在的问题：圆周运动的边界的运动并不平滑，有待改善。
博主QQ：1219116968
使用jQuery实现的图片的圆周运动

猜你喜欢
