使用jQuery插件：視口模擬器

我正在研究一個旨在模擬一個軸相機移動的jQuery插件。實現這一目標的第一步很簡單：使用傳統的清理標記，並使原型工作。使用jQuery插件：視口模擬器

繼承人如何啓動插件：

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

這裏的WIP事情工作演示：我在哪裏有問題http://sandbox.test.everestconseil.com/protoCitroen/home.html

：

有一個快速的方法檢測每個目標（可點擊動畫元素）的父項是否爲href鏈接，如果是，則保存此url？
我的克隆使用原始背景圖像然後動畫它。將其淡入黑/白。但是當你盯着一個元素時，會發現圖像url，但似乎沒有被注入。你看到什麼了嗎？
最後，關於元素的動畫：正如你在源代碼中看到的那樣，我使用容器$（'＃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);

來源

2010-05-04 pixelboy

我不知道如果我能幫助你的一切......但我盡我所能：

你可以使用.is()父類型。或比較標記名。我發佈了demo here。

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

我可以看到你注入的背景圖像，但我不知道你指的是什麼元素 - 克隆？當我點擊網格時，背景圖像將以具有正確網址的圖像打開，但不會發生任何其他情況。我沒有看到任何代碼將其返回到原始位置。

您是否在使用圖片標籤？（如<img class="animateMe" src="/image/myimage.jpg"/>。如果是這樣，你能確定它是一個IMG和使用上面的腳本中提取出來的SRC。
我有地圖，我一直在使用ScrollTo插件除了ScrollView插件動畫。 ..你可以看看這些插件的編碼，甚至使用它們！

來源

2010-05-04 14:52:46 Mottie

使用jQuery插件：視口模擬器

回答

相關問題