0

我在我的网站http://zakiyadavidson.com上使用 jquery 砌体。

我想做一个翻转效果，例如http://damiencorrell.com/上的内容。我的最终结果将是当您翻转图片文本时出现。

我试图在下面的js代码中添加：

    //Set div dimensions equal to image's dimensions:
$('#image_holder1').width($('#image_1').width());
$('#image_holder1').height($('#image_1').height());
$('#image_1').each(function(){
//set css of right:
$(this).css({right: '-' + $(this).width() + 'px'})})
    //tell the browser what to do when hovering on the div:
    $('#image_holder1').hover(function() {
  //when mouse hover:
$('#image_0').animate({
    right: '-' + $(this).width() + 'px'
}, /*duration*/ 360, /*ease*/ 'swing');
$('#image_1').animate({
    right: '0px'
}, /*duration*/ 360, /*ease*/ 'swing');
},

function() {
//when mouse out, no hover:
$('#image_0').animate({
    right: '0px'
}, /*duration*/ 360, /*ease*/ 'swing');
$('#image_1').animate({
    right: '-' + $(this).width() + 'px'
}, /*duration*/ 360, /*ease*/ 'swing');
});​

连同上面的 js 代码，我在下面的 css 块中添加：

#image_holder1 {
overflow: hidden;
}

.image1 {
position: absolute;
}​

砌体 html 如下所示，上面添加了更改： 

<div class="box photo col3" id="image_holder1">
  <img id="image_0" src="image_17.jpg" title="Family First" alt="Family First" />
  <img id="image_1" src="image_17Hover.jpg" />

...

而不是在您将鼠标悬停时显示的图像，您可以在加载页面时立即看到它。砌体布局现在未正确对齐。是不是因为我有onload事件下的功能？非常感谢任何帮助。

4

1 回答 1

0

我想到了！！！

一个简单的 Jquery 脚本就可以解决问题，并且可以让您根据需要制作尽可能多的图片！！

<script>

jQuery(function () {
$(".imgSwap img").hover(function () {
    this.src = this.src.replace("_off", "_on");
}, function () {
    this.src = this.src.replace("_on", "_off");
});
});

</script>

我希望这对其他人有所帮助。

您可以访问我的网站http://zakiyadavidson.com查看工作脚本

于 2012-12-31T04:13:03.570 回答