gpt4 book ai didi

javascript - JQuery:图片库向下滑动图像以及在 src 中淡入淡出

转载 作者:行者123 更新时间:2023-11-28 00:14:07 24 4
gpt4 key购买 nike

我有以下代码可以在单击缩略图时交换主图像:

$('#thumbs img').click(function(){
var imgsrc = $(this).attr('src');

$('#mainphoto img').fadeOut(function(){
$(this).attr('src', imgsrc).fadeIn();
});
});

这里有一个工作示例:http://clarkeconstructions.com.au/newsite/index.php?id=8

一些图像是肖像照片,一些是风景照片(如果您单击示例中的第二个缩略图)。

我希望能够向下滑动图像以使横向到纵向的过渡更平滑,但我不确定如何使用我当前的代码来实现它。

谁能给我任何提示,告诉我我将使用什么语法来完成此任务?

谢谢

最佳答案

您可以使用的一个技巧是:

  • 将所有原始图像大小存储在每个图像 data 属性中
  • 在将内部图像设置为 H:100% 和 W:100% 的同时为容器设置 W/H 动画

jsBin demo

HTML:

<div id="projphotos">

<div id="mainphoto"><img src="" /></div><!--MAINPHOTO-->

<div id="projthumbs">
<img src="images/image_1.jpg" />
<img src="images/image_2.jpg" />
<img src="images/image_3.jpg" />
</div><!--PROJTHUMBS-->

</div>

CSS:

#mainphoto{ /* roXon */
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 5px #888888;
padding: 10px;
display:inline-block;
*dispaly:inline;
zoom:1;
width:0;
height:0;
}
#mainphoto img{
position:relative;
margin:0 auto;
vertical-align:middle;
width:100%;
height:100%;
}
#projphotos img {
/* removed properties */
background-image: url("tmpimages/billie_holiday.png");
}

jQuery(存储/使用原始图像大小来为主图像父级设置动画:)

$(window).load(function(){

var imgs = $('#projthumbs img');

$.each(imgs, function(i, el){
$('<img>', {"src": this.src}).load(function(){
$(el).data({'h': this.height, 'w': this.width});
if(i===0){
$(el).click();
}
});
});

$('#projthumbs img').click(function(){
var imgsrc = this.src;
var orgSize = { h: $(this).data('h'), w: $(this).data('w') };

$('#mainphoto img').stop().fadeTo(400,0,function(){
$(this).attr('src', imgsrc).fadeTo(400,1);
$('#mainphoto').animate({height: orgSize.h, width: orgSize.w },400);
});
});

$('#projthumbs img').eq(0).click();
});

关于javascript - JQuery:图片库向下滑动图像以及在 src 中淡入淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13262266/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com