1

私は写真家であり、コードの専門家ではありませんが、この作業を行うためにしばらく努力してきました.256色とそれに伴うピクセル化/ノイズの制限なしでGIFの効果を実現するアニメーション画像です. . 固定 div 内の背景画像を変換することで機能します。Javascript は下にあり、私の画像の 1 つで動作する方法は、ここにありますhttp://jsfiddle.net/MXWgZ/

HTML:

<div id='image_box' onmouseover='start_rotate();' onmouseout='stop_rotate();'></div>

CSS

#image_box {
margin-left:20px;
width:533px;
height:800px;
background-image:url('http://www.studioprivate.co.uk/droguslong2.jpg');
background-repeat:no-repeat;
background-position:0px;}

ジャバスクリプト:

var curr_pos = 0; //current background-position
var timer_id = 0;

function rotate_img() {
if (curr_pos == -13858) curr_pos = 0; //if 360 degree done
else curr_pos = curr_pos - 533;
$("#image_box").css("background-position", curr_pos + "px"); //move bacground to the left by 533px
if (curr_pos == -13858) curr_pos = 0;}

function start_rotate() {
timer_id = setInterval(rotate_img, 80);}
function stop_rotate() {
clearInterval(timer_id);}

今では、最初にまっすぐジャンプするのではなく、一瞬だけ白い背景が表示されるように見える最後に到達したときを除いて、正常に動作します. これを取り除く方法はありますか？流れを乱す感じです。

もう 1 つの質問は、別のイベント onclick を追加して、画像をクリックしたときに背景画像が別の画像に置き換えられ、上記のようにアニメーション化されるようにすることはできますか? それは私のコードのどこに行きますか?

ありがとうございました！

4

3 に答える 3

1

コードの外で計算を実行する代わりに (533px 幅 * 26 スライド = 13858px)、これらのマジック ナンバーを変数に変換してみませんか?

function nextSlide() {
  var slideWidth = 533;
  var slideCount = 26;

  var currentX = parseInt($imageContainer.css('background-position'), 10);
  currentX = (currentX - slideWidth) % (slideWidth * slideCount);

  $imageContainer.css('background-position', currentX);
}

ifmod (%) 演算子により、紛らわしい/ブロックが不要にelseなり、適切な名前の変数によってロジックが明確になります。

onmouseover/を介してホバー イベントを html に直接アタッチするのではなくonmouseout、jQuery イベント バインディングを使用できるもう 1 つの小さな変更があります。

$imageContainer.hover(start_rotate, stop_rotate);

同様に、クリック イベントをアタッチして画像を変更できます。

$imageContainer.click(function() {
  $imageContainer.css('background-image',
      'url("http://www.studioprivate.co.uk/newImage.jpg")');
  $imageContainer.css('background-position', 0);    
});

新しい画像の slideWidth または slideCount が異なる場合は、メソッドを調整するnextSlide必要がありますが、この例を参考にしてください。

すべてをまとめる - jsFiddle

于 2013-04-26T02:25:53.180 に答える
1

これを実現するのに役立つ JavaScript および jQuery ツールが既に存在します。

于 2013-04-26T01:48:30.410 に答える
0

バックグラウンド位置の量をより動的にする必要があります。そのようにして、数字で推測作業を行うことはありません。また、if ブロックに関係なく関数がもう一度実行されるため、if ブロックを画像の全幅のままにしておくと、白い画面が表示されます。それを避けるために、最後の背景位置から幅を引きます。

// With curr_pos like this, you have a number generated from JavaScript rather than guesswork
var curr_pos = parseInt($("#image_box").css("background-position").slice(0,-2), 10); 

if (curr_pos <= (-13858+533)) { //Take out that nasty white space by accounting for one less frame
    curr_pos = 0+"px";
} else {
    curr_pos = curr_pos - 533 + "px";
}

また、jQuery を使用しているので、そのセレクターの力を活用することもできます。次のコードは、マークアップで直接ではなく、jQuery を使用してイベント ハンドラーを追加します。あなたのクリック機能が組み込まれています：

$("#image_box").hover(function() {
    timer_id = setInterval(rotate_img, 200);
}, function() {
    clearInterval(timer_id);
}).click(function() {
    $(this).css(/*change background stuff*/);  
}); // This settles your click idea

これにより、マークアップは次のようになります。

<div id='image_box'></div>

jsFiddleすべて_

于 2013-04-26T01:49:50.000 に答える