我正在为我的网站创建一个图片库。我想要页面加载时显示的照片网格。然后，当用户将鼠标悬停在每张照片上时，照片会放大一点。
我创建了用于悬停的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>
最佳答案
如果要使用自己的方法扩展jQuery DOM对象，则应采用此方法
$.fn.extend({
relyntsHoverPlugin : function() {}
});
这将允许像
$('ul').relyntsHoverPlugin();
不要与使用新功能扩展jQuery对象混淆，即。 $ .relyntsMethod（）;
希望这会有所帮助，并且我并没有完全脱离基地！