創建自定義jQuery類

我正在爲我的網站創建一個照片庫。我想要在加載頁面時顯示照片的網格。然後，當用戶懸停在每張照片上時，照片會放大一點。創建自定義jQuery類

我創建了懸停的JavaScript，但我不知道如何正確地將其打包到類中。

基本上，我只想創建這樣

<ul> 
<li><img src="img1.jpg" /></li> 
<li><img src="img2.jpg" /></li> 
</ul>

列表，然後它會自動在我的地方徘徊機制已經創建的每個圖像。到目前爲止，這是我的代碼。

<!DOCTYPE HTML> 
<html> 
<head> 
<script src="jquery.js"></script> 
<style text="text/css"> 
.hoverImage { 
    position: absolute; 
    width: 200px; 
    left: 500px; 
    top: 200px; 
} 
</style> 
</head> 
<body> 
<script> 
var originalWidth; 
var originalHeight; 

function onHover() { 
    originalWidth = $(this).width(); 
    originalHeight = $(this).height(); 

    $(this).stop(false, true).animate({ 
      left: $(this).offset().left-(Math.floor(originalWidth/4)), 
      top: $(this).offset().top-(Math.floor(originalHeight/4)), 
      width: 300, 
    },200); 
} 

function offHover() { 
    $(this).stop(false, true).animate({ 
      left: $(this).offset().left+(Math.floor(originalWidth/4)), 
      top: $(this).offset().top+(Math.floor(originalHeight/4)), 
      width: 200, 
    },200); 
} 

$(document).ready(function() { 
    $("img").hover(onHover, offHover); 
}); 

</script> 
<img class="hoverImage" src="Test.jpg"/> 
</body> 
</html>

來源

2012-05-15 Capt.Redbeard

按類你是指一個jQuery插件嗎？你能更清楚一點嗎？ –

我不知道如何溝通我想要的東西。這是我能想到的最好的詞：/我正在尋找類似於如何完成Lightbox的事情http://lokeshdhakar.com/projects/lightbox2/#how –

我想你想擴展jquery，以便可以獲得這種類型的語法，$（'ul'）。relyntsHoverPlugin（）;對？ –

如果你想用自己的方法擴展jQuery的DOM對象，這應該是做

$.fn.extend({ 
    relyntsHoverPlugin : function() {} 
});

的方式，這將允許類似語法

$('ul').relyntsHoverPlugin();

不要與用新函數擴展jQuery對象混淆，即。 $ .relyntsMethod（）;

希望這會有所幫助，而且我並沒有完全脫離基地！

來源

2012-05-15 05:47:42

我相信這是我正在尋找的。非常感謝你！ –

如果您想將自己的功能包裝爲可重用的東西，請考慮編寫jQuery擴展。這並不難。

這裏的指南：http://docs.jquery.com/Plugins/Authoring

來源

2012-05-15 05:47:39

您可以使用模板在grid/div/table中創建圖像...併爲圖像添加onHover（）和offHover（）。希望它可以幫助你。

<script type="text/javascript"> 
    $(document).ready(function() { 
    var data = [ 
    { name: "Astor", product: "astor", stocklevel: "10"}, 
    { name: "Daffodil", product: "daffodil", stocklevel: "12"}, 
    { name: "Rose", product: "rose", stocklevel: "2"}, 
    { name: "Peony", product: "peony", stocklevel: "0"}, 
    ]; 
    $('#flowerTmpl').tmpl(data).appendTo('#row1'); 
    }); 
    </script> 

    <script id="flowerTmpl" type="text/x-jquery-tmpl"> 
    <div class="dcell"> 
    <img src="${product}.png"/> 
    <label for="${product}">${name}:</label> 
    </div> 
    </script>

來源

2012-05-15 05:55:52

創建自定義jQuery類

回答

相關問題