Показать сообщение отдельно
  #4 (permalink)  
Старый 20.05.2014, 19:08
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 24.05.2009
Сообщений: 5,176

и что же ты не можешь понять?
<script src="http://code.jquery.com/jquery-latest.js"></script>
<div id="slide2">Привет мир!</div>
<div id="slide1">Hello world!</div>
<style>
html, body {
  padding: 0;
  margin: 0;
}
#slide1 {
  top: 0;
  position: fixed;
  width:100%;
  height:100%;
  background:rgb(61,115,153);
}
#slide2 {
  top: 100%;
  position: fixed;
  width:100%;
  height:100%;
  background:rgb(255,95,64);
}
</style> 
<script>
// мини библа для удобства
(function(WheelControl) {
  WheelControl.prototype = {
    constructor: WheelControl,
    _freezed: true,
    _onwheel: function(fn) {
      var self = this;
      return this._onwheel.fn = function(e) {
        e = e || window.event;
        if (!e.preventDefault) {
          e.preventDefault = function() {
            e.returnValue = false;
          }
        }
        fn.call(self, (-e.detail / 3) || (e.wheelDelta / 120), e);
      }
    },
    bind: function(fn) {
      this._onwheel.fn = this._onwheel(fn);
      this.unfreeze();
      return this;
    },
    unbind: function() {
      this.freeze();
      this._onwheel.fn = null;
      return this;
    },
    freeze: function() {
      this._freezed = true;
      this.elem[this._params.removeName](this._params.wheelType, this._onwheel.fn, false);
      return this;
    },
    unfreeze: function() {
      if (this._onwheel.fn && this._freezed) {
        this.elem[this._params.addName](this._params.wheelType, this._onwheel.fn, false);
        this._freezed = false;
      }
      return this;
    }
  };
})(window.WheelControl = function WheelControl(elem) {
  if (!(this instanceof WheelControl)) {
    return new WheelControl(elem);
  }
  if (!(this.elem = elem)) {
    throw Error('The parameter must be an HTML element');
  }
 
  this._params = {
    addName: elem.addEventListener ? 'addEventListener' : 'attachEvent',
    removeName: elem.removeEventListener ? 'removeEventListener' : 'detachEvent',
    wheelType: elem.addEventListener ? ('onwheel' in document ? 'wheel' :
      'onmousewheel' in document ? 'mousewheel' : 'MozMousePixelScroll') : 'onmousewheel'
  };
});
 
// =====================================================
// работа с минибиблой
// =====================================================
WheelControl(document).bind(function(delta, event) {
  var self = this;

  // заморозим получение события колеса мыши
  self.freeze();
 
  // ... что-то тут делаем, анимируем, и прочие действия
  if (delta > 0) {
    $('#slide2').animate({"top": "100%"}, 'easeOutBounce');
    $('#slide1').animate({"top": "0"}, 'easeOutBounce', function() {
      self.unfreeze();
    });
  } else if (delta < 0) {
    $('#slide1').animate({"top": "-100%"}, 'easeOutBounce');
    $('#slide2').animate({"top": "0"}, 'easeOutBounce', function() {
      self.unfreeze();
    });
  }
 
  // отменяем действие по умолчанию
  event.preventDefault();
});
</script>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine

Последний раз редактировалось devote, 20.05.2014 в 19:19.
Ответить с цитированием