Question

我正在为我的网站创建一个照片库。我想要一个页面加载时显示的照片网格。然后，当用户将鼠标悬停在每张照片上时，照片会稍微放大。

我为悬停创建了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>

Answer 1

如果你想将你的功能包装成可重用的东西，考虑编写一个jQuery扩展。这并不难。

以下是指南：http://docs.jquery.com/Plugins/Authoring

Answer 2

如果你想用你自己的方法扩展jQuery DOM对象，这应该是这样做的方法

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

这将允许语法如

$('ul').relyntsHoverPlugin();

不要与使用新函数扩展jQuery对象混淆，即。的 $ .relyntsMethod（）;

希望这会有所帮助，而且我并不完全偏离基地！

Answer 3

您可以使用模板在grid / div / table中创建图像...并在Hover（）和Hover（）上添加图像。希望它可以帮到你。

 <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>

创建自定义jQuery类

3 个答案: