JavaScriptを/ jQueryの：ページ上のパスに従ってください

StackOverflow https://stackoverflow.com/questions/2400266

質問

私は、「アニメーションGIFを作るページ上飛ぶとパスに従う必要があります。私はjQueryのを使用してと思っていますが、私はそれを手動でシェイプレイヤーを配置する必要があり、幅/高さの比率を計算して行うための唯一の方法を考えて右になり、その後、絶対位置を使用すると、これを行うための唯一の方法ですか？私は事のこのタイプのために利用できるいくつかの素晴らしいjQueryのプラグインがある知っています。

役に立ちましたか？

解決 2

jQueryのは、ソリューションよりもハックの基本とより、移動するための方法のようですが、あなたは間違いなくJSで何かが必要な場合。

<style type="text/css">
#butterfly 
{
    display:block;
    background: #f00;
    width: 100px;
    height: 100px;
    left: 0;
    top: 0;
    position: fixed;
    background: url(butterfly.gif) no-repeat;
}
</style>
<script type='text/javascript'>
    function moveButterfly() {
        //moveDemo(document.getElementById('butterfly'), 10);
        var butterfly = $('#butterfly');
        var positions = [
            { props: { left: '25%', top: '20%' }, time: 1000 },
            { props: { left: '40%', top: '18%' }, time: 610 },
            { props: { left: '58%', top: '38%'}, time: 400 },
            { props: { left: '81%', top: '52%' }, time: 520 },
            { props: { left: '150%', top: '67%'}, time: 440 },
        ];
        jQuery.each(positions, function(i, e) {
            butterfly.animate(e.props, e.time);
        });
    }
    $().ready(function() {
        moveButterfly();
    });
</script>

他のヒント

絶対位置は、はい、それを行うには、の最高の方法である可能性が高いです。 （私はそれがのみの方法だと言って心に手を入れないと、私はあなたが似た何かをする他のゲームをプレイできると確信している、しかし、あなたはおそらくしたくありません。）

それはあなたの問題に固有でない限り、

あなたは割合としてそれを行う必要はありません。以下は喜んで絶対-位置付け要素を作成し、その後、「数」の反復までのダウンのための第二の10番目ごとに5個のピクセルが右に移動してます。

function moveDemo(element, count) {

    element.style.position = "absolute";
    moveit();

    function moveit() {
        element.style.left = ((parseInt(element.style.left) || 0) + 5) + "px";
        element.style.top  = ((parseInt(element.style.top)  || 0) + 5) + "px";
        if (count-- > 0) {
            setTimeout(moveit, 100);
        }
    }
}

これは単なる生のJavaScriptですが、その他のjQuery、プロトタイプ、閉鎖、YUI、のようなフレームワークは、多くのことのお手伝いをしてに探して価値があります。たとえば、あなたが上記を使用している場合、あなたは要素が事前に絶対-位置し、また、（インラインstyle属性を経由して）要素自体の左と上のスタイルを指定しますしない限り、それは最初に0,0にジャンプしますその後、そこから移動を開始。フレームワークは、インライン要素は、それが絶対的に-位置付け行う前に、ここで考え出すのかなり複雑な作業のお手伝いをすることができます。

（少なくとも「MYELEMENT」の開始位置を決定するために、おそらく必要があります）ここでは、フレームワークに依存しない完全な例です 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Move It Demo Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
#myElement {
    border:     1px solid black;
}
</style>
<script type='text/javascript'>
function startMoving() {

    moveDemo(document.getElementById('myElement'), 10);
}

function moveDemo(element, count) {

    element.style.position = "absolute";
    moveit();

    function moveit() {
        element.style.left = ((parseInt(element.style.left) || 0) + 5) + "px";
        element.style.top  = ((parseInt(element.style.top)  || 0) + 5) + "px";
        if (count-- > 0) {
            setTimeout(moveit, 100);
        }
    }
}
</script>
</head>
<body><div>
<input type='button' value='Start' onClick="startMoving();">
<div id='myElement'>I'm on the move</div>
</div></body>
</html>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top