Работа над плагином jQuery: симулятор видового экрана - PullRequest
Новая
       10

Работа над плагином jQuery: симулятор видового экрана

1 голос
/ 04 мая 2010

Я работаю над плагином jQuery, целью которого является симуляция движений камеры по одной оси. Первый шаг к достижению этого прост: используйте обычную чистую разметку и заставьте прототип работать.

Вот как запустить плагин: 

$('#wrapper').fluidGrids({exclude: '.exclude'});

Вот рабочая демонстрация WIP: http://sandbox.test.everestconseil.com/protoCitroen/home.html

Где у меня проблемы:

  1. Есть ли быстрый способ определить, является ли родительский элемент каждой цели (интерактивный анимируемый элемент) ссылкой href, и если да, то сохранить этот URL?
  2. Мой клон использует исходное фоновое изображение, чтобы затем анимировать его. Переход к черно-белому. Но когда вы нажимаете на элемент, URL-адрес изображения обнаруживается, но, похоже, не внедряется. Вы видите что-нибудь?
  3. Наконец, об анимации элементов: как вы можете видеть в исходном коде, я использую контейнер $ ('# wrapper') для позиционирования всех анимированных дочерних элементов. Какие свойства лучше всего применить, чтобы сделать этот кросс-браузерный тест?

Вот исходный код плагина, полностью прокомментированный. 

(function($){
    $.fn.extend({ 
        //plugin name - fluidGrids
        fluidGrids: function(options) {

            //List and default values for available options
            var defaults = {
                //The target that we're going to use to handle click event
                hitTarget:      '.animateMe',
                exclude:        '.exclude',
                animateSpeed:   1000
            };

            var options = $.extend(defaults, options);

            return this.each(function() {

                var o = options;

                //Assign current element to variable
                var obj = $(this);

                //We assign default width height and positions to each object in order to get them back when necessary
                var objPosition = obj.position();

                //Get all ready to animate targets in innerViewport
                var items = $(o.hitTarget, obj);

                //Final coords of innerViewport
                var innerViewport = new Object();
                innerViewport.top = parseInt(objPosition.top);
                innerViewport.left = parseInt(objPosition.left);
                innerViewport.bottom = obj.height();
                innerViewport.right = obj.width();

                items.each(function(e){
                    //Assign a pointer cursor to each clickable element
                    $(this).css("cursor","pointer");

                    //To load distant url at last, we look for it in Title Attribute
                    if ($(this).attr('title').length){
                        var targetUrl = $(this).attr('title');
                    }                   

                    //We assign default width height and positions to each object in order to get them back when necessary
                    var itemPosition = $(this).position();
                    var itemTop = itemPosition.top;
                    var itemLeft = itemPosition.left;
                    var itemWidth = $(this).width();
                    var itemHeight = $(this).height();  

                    //Both the original and it's animated clone
                    var original = $(this);
                    //To give the 
                    if (original.css('background-image')){
                        var urlImageOriginal = original.css('background-image').replace(/^url|[("")]/g, '');
                        var imageToInsert = "<img src="+urlImageOriginal+"/>"                       
                    }

                    var clone = $(this).clone();


                    original.click(function() {
                        $(clone).append(imageToInsert);
                        $(clone).attr("id","clone");
                        $(clone).attr('top',itemTop);
                        $(clone).attr('left',itemLeft);
                        $(clone).css("position","absolute");
                        $(clone).insertAfter(this);                     
                        $(this).hide();     

                        $(clone).animate({
                            top: innerViewport.top,
                            left: innerViewport.left,
                            width: innerViewport.bottom,
                            height: innerViewport.right
                            },
                            obj.animateSpeed);
                        $("*",obj).not("#clone, #clone * , a , "+ o.exclude).fadeOut('fast');

                        //Si l'objet du click est un lien
                        return false;
                      });
                });             
            });
        }
    });
})(jQuery);

1 Ответ

0 голосов
/ 04 мая 2010

Я не знаю, смогу ли я вам чем-то помочь ... но я делаю то, что могу:

  1. Вы можете получить родительский тип, используя .is(). или сравнивая тэг. Я разместил демо здесь . 

     $('.clickable').click(function(){
  if ( $(this).is('a') ) {
   alert( 'TRUE! -> url = ' + this.href ); 
  } else { 
   alert( this.tagName );
  }
 })

  2. Я вижу, как вы вводите фоновое изображение, но я не уверен, на какой элемент вы ссылаетесь - клон? Когда я нажимаю на сетку, фоновое изображение открывается как изображение с правильным URL-адресом, но больше ничего не происходит. Я не вижу кода, чтобы вернуть его в исходное положение.

    Используете ли вы тег изображения? (Например, <img class="animateMe" src="/image/myimage.jpg"/>. Если это так, вы можете определить, что это img, и извлечь src, используя приведенный выше скрипт.

  3. У меня есть карта, которую я анимировал с использованием аддона ScrollTo в дополнение к аддону ScrollView ... вы можете посмотреть кодирование этих аддонов или даже использовать их!

...