0

これらの水平メニューのように、マウスのポインターが背景位置の上にスクロールダウンし、メニューボタン領域の外にあるときにバックグラウンド位置が上にスクロールするときに、メニューボタンに垂直スクロール効果を追加したい: http://www.htmldrive.net/items /demo/180/jQuery-Flip-Menu-using-backgroundPosition-Plugin

私のコード:

CSS

#home{
      width: 46px;
      height:12px;
      background-image: url(http://imageshack.us/a/img577/5152/w6n.gif);
      background-position: 0 0;
      background-repeat: no-repeat;
}

html

<div id="home"></div>

Javascript

    $.fn.animateBG = function(x, y, speed) {
    var pos = this.css('background-position').split(' ');
    this.x = pos[0] || 0,
    this.y = pos[1] || 0;
    $.Animation( this, {
        x: x,
        y: y
      }, { 
        duration: speed
      }).progress(function(e) {
          this.css('background-position', e.tweens[0].now+'px '+e.tweens[1].now+'px');
    });
    return this;
}

$.fn.stopBG = function(x, y, speed) {
    var pos = this.css('background-position').split(' ');
    this.x = pos[0] || 0,
    this.y = pos[1] || 0;

        $.Animation( this, {
            x: x,
            y: y
          }, { 
            duration: speed
          }).progress(function(e) {
              this.css('background-position', e.tweens[0].now+'px '+e.tweens[1].now+'px');
        });
        return this;

}   


$('#home').hover(function(){
    $("#home").animateBG(0, -12, 300);
},function(){$("#home").stopBG(0, 0, 300);});

jsfiddle

問題は、マウスのポインターがメニュー ボタン領域の外に出たときに、上にスクロールする効果が機能しないことです。

ありがとう。

4

2 に答える 2

0

何らかの理由で、負の値を設定することはできません。これを試してください： http://jsfiddle.net/9G6C2/2/

私が変えたのは

$("#home").stopBG(0, 12, 300);

バックグラウンドリピートを許可しました。

編集：

http://jsfiddle.net/9G6C2/4/

于 2013-08-09T22:40:13.680 に答える