单击时调整图像大小
Resize an Image on click
所以我正在尝试制作一个简单的照片库,当您单击它们时会放大,然后在您第二次单击它们时返回到较小的尺寸。我有放大部分的工作,但到目前为止,我只能通过使用 JQuery 的".mouseout"来缩小图片,这不是我想要的。此外,我希望图像在放大时位于所有其他图像/div的顶部,现在它被左侧或右侧的任何其他图像覆盖。这是我的代码,底部有一个jsfiddle链接
.HTML
<div id="Gpic1">
<img id='table' src='http://i.imgur.com/7ESpNI8.jpg'>
</div>
.CSS
#Gpic1 {
width: 280px;
height: 187px;
display: block;
background: black;
}
#table {
width: 280px;
height: 187px;
}
杰奎里
$('#Gpic1').hover(function () {
$(this).find('img').fadeTo(500, 0.5);
}, function () {
$(this).find('img').fadeTo(500, 1);
});
$('#table').click(function () {
$('#Gpic1').find('img').fadeTo(0, 1);
$("#table").stop().animate({
width: 800,
height: 533
}, 200); //Bigger
}).mouseout(function () {
$("#table").stop().animate({
width: 280,
height: 187
}, 200); //Smaller
});
http://jsfiddle.net/kmx6C/
谢谢
您可以向
要放大的元素添加类enlarged
,然后检查图像当前是否放大。
if($('#table').hasClass('enlarged')){
$('#table').removeClass('enlarged');
$("#table").stop().animate({width: 280, height: 187}, 200 );
}else{
$('#table').addClass('enlarged')
$("#table").stop().animate({width: 800, height: 533}, 200 );
}
小提琴:http://jsfiddle.net/4LUYM/
您需要跟踪图像是展开还是正常:
在这里看到它: http://jsfiddle.net/kmx6C/4/
if ($(e.target).hasClass('expanded')) {
$("#table").removeClass('expanded').stop().animate({
width: 280,
height: 187
}, 200);
} else {
$('#Gpic1').find('img').fadeTo(0, 1);
$("#table").addClass('expanded').stop().animate({
width: 800,
height: 533
}, 200);
}
如果您仍打算使用 mouseout 事件,则需要确保删除其中的类:
$("#table").removeClass('expanded').stop().animate({
width: 280,
height: 187
}, 200);
至于将"坐"作为其他图像的顶部,您需要确保相应地设置"z索引"和"位置"。
相关文章:
- 客户端图像调整大小.任何已知问题
- TinyMCE图像调整大小模式
- 将特定html文件上的幻灯片图像调整为移动屏幕
- 如何使用 jquery 和 css 在固定标题导航栏中将头像图像调整为较小的图像
- 在 JavaScript 中编辑 blob 图像(调整大小并添加边框)
- JavaScript图像调整大小窗口
- 多个图像调整大小并上传说明
- 将未知大小的图像调整为特定大小而不裁剪.(信箱)
- JQuery 图像调整器和文本操纵器
- 想要使用 html5 的画布优化捕获的图像调整大小和旋转的代码,现在在移动设备上发出内存不足警告
- 客户端图像调整大小并保存
- jQuery图像调整大小以适应模态的问题
- 获取将图像调整为其容器大小的脚本的名称+其他功能
- html5画布图像调整大小
- 当主图像调整大小时,使顶部图像保持原位
- Javascript将图像调整为不同的大小,其中只有宽度很重要
- 图像调整与javascript没有视觉干扰
- 图像调整大小NaN错误
- 将图像调整大小/拉伸到只有在页面加载后才知道的尺寸
- 在WebKit浏览器中,图像调整会产生轻微的、短暂的像素化