创建自定义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类

回答

相关问题