Показать сообщение отдельно
  #54 (permalink)  
Старый 31.08.2010, 10:42
Аватар для B~Vladi
Модератор Всея Форума
Отправить личное сообщение для B~Vladi Посмотреть профиль Найти все сообщения от B~Vladi
 
Регистрация: 14.05.2009
Сообщений: 4,021

Ну вот нашел кусок кода, который находится на той стадии, когда нужно реализовывать взаимодействие с DOM. Логика и обработка данных уже готова.
var Domino = (function(){
    var sides = ['top', 'right', 'bottom', 'left'];

    // Ajax
    function ajax(opt){
      var request = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
      request.open(typeof opt.method == 'string' ? opt.method.toLowerCase() : 'GET', opt.url, opt.async != void 0 ? !!opt.async : true);

      if(opt.options){
        request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        request.setRequestHeader('Content-length', opt.options.length);
        request.setRequestHeader('Connection', 'close');
        request.send(opt.options);
      } else {
        request.send(null);
      }

      setTimeout(function(){
        if(opt.callback && request.readyState == 4 && request.status == 200){
          opt.callback(new Function('return ' + request.responseText)(), opt.data);
        } else {
          setTimeout(arguments.callee, 15);
        }
      }, 0);
    }

    // Animation
    function slideImage(opt){
      var steps = Math.floor(opt.time * opt.fps / 1000);
      var timeOuts = [];

      for(var i = 1; i <= steps; i++){
        var time = Math.floor(1000 / opt.fps * i);

        timeOuts.push(setTimeout((function(time){
          var stop = false;
          return function(){
            var integer = opt.stop * (time * 100 / opt.time) / 100;
            if(opt.call && (stop = opt.call(integer) === false)){
              var l = timeOuts.length;
              while(l){
                clearTimeout(timeOuts[--l]);
              }
            }

            if(stop || opt.stop == integer){
              opt = steps = i = l = time = timeOuts = null;
            }
          }
        })(time), time));
      }
    }

    // Test
    slideImage({
      time: 1500,
      fps: 30,
      stop: 143
    });

    function Constructor(opt){
      this.options = {};
      for(var property in opt){
        opt.hasOwnProperty(property) && (this.options[property] = opt[property]);
      }

      this.data = {
        images: [],
        nodes: [],
        timeStamp: new Date
      };

      // Наполнение
      var node = document.getElementById(opt.id);

      var l = (node.clientWidth / this.options.width) * (node.clientHeight / this.options.height);
      var fragment = document.createDocumentFragment();

      while(l--){
        var item = document.createElement('div');

        // TODO: -2 убрать
        item.style.cssText = 'width:' + (this.options.width-2) + 'px;' +
          'height:' + (this.options.height-2) + 'px; border: #f00 1px solid; float:left;';
        this.data.nodes.push(item);
        fragment.appendChild(item);
      }
      node.appendChild(fragment);
    }

    Constructor.prototype = {
      start: function(){
        var data = this.data;

        (function(){
          if(!data.images.length){
            return;
          }

          var item = data.images.shift();
          if(data.loaded && item.timeStamp != data.timeStamp){
            return arguments.callee();
          }

          var activeNode = data.nodes[Math.floor(Math.random() * data.nodes.length)];

          data.images.push(item);

          data.timer = setTimeout(arguments.callee, 1000);
        })();
      },
      stop: function(){
        clearTimeout(this.data.timer);
      },
      update: (function(){
        function onLoadImage(){
          this.data.options.img = this;
          this.data.objData.images.unshift(this.data.options);
          !this.data.index && (this.data.objData.loaded = true);
          delete this.data, this.onload;
        }

        function onLoadData(result, data){
          data.timeStamp = new Date;

          var length = result.imgs.length;
          while(length){
            var item = new Image();
            item.data = {
              objData: data,
              options: result.imgs[--length],
              index: length
            };
            item.timeStamp = data.timeStamp;
            item.onload = onLoadImage;
            item.src = item.data.options.img;
          }

          delete data.loaded;
        }

        return function(url){
          ajax({
            url: typeof url == 'string' && url.length ? url : this.options.url,
            callback: onLoadData,
            data: this.data
          });
        };

      })()
    };

    return Constructor;
  })();

  var dm = new Domino({
    width: 50,
    height: 50,
    url: 'req.js',
    speed: 30,
    id: 'contaner'
  });

  dm.start();

В двух словах, это реализация слайда группы каринок.
Сами картинки не меняются, только обработка данных. Пишется как самостоятельное приложение, без привязки к фреймворкам.

Последний раз редактировалось B~Vladi, 31.08.2010 в 10:52.
Ответить с цитированием