我想为图像设置动画并将其保存在当前打开的窗口的中心。 我已经尝试了以下方法,但它不起作用请建议如何改进代码以使其正常工作。
// get image dimensions
var h = $(this).height();
var w = $(this).width();
//get div dimensions
var div_h =$('#imgContainer').height();
var div_w =$('#imgContainer').width();
var pY = Math.round((div_h - h) / 2) + 'px';
var pX = Math.round((div_w - w) / 2) + 'px';
$(this).animate({
opacity:"1",
top: pY+"px",
left: pX+"px",
zoom: '500%'
}, 'medium')
答案 0 :(得分:3)
这实际上取决于你的其他标记。 您的代码以这种方式为我工作:
HTML:
<div id="imgContainer">
<img src="your-image.jpg">
</div>
CSS:
html, body, #imgContainer {
width:100%; height:100%;
}
#imgContainer > img {
position:absolute; top:0; right:0; bottom:0; left:0;
margin:auto;
width:200px;
max-width:100%;
max-height:100%;
}
jQuery的:
$('#imgContainer > img').on('click',function(){
var h = $(this).height();
var w = $(this).width();
//get div dimensions
var div_h =$('#imgContainer').height();
var div_w =$('#imgContainer').width();
var pY = Math.round((div_h - h) / 2) + 'px';
var pX = Math.round((div_w - w) / 2) + 'px';
$(this).animate({
opacity:"1",
zoom: '500%'
}, 1000)
});
答案 1 :(得分:0)
您可以使用jQuery zoom plugin。以下是用法示例:
// Example:
$(document).ready(function(){
$('a.photo').zoom({url: 'photo-big.jpg'});
});
// Using ColorBox with Zoom
$(document).ready(function(){
$('a.photo').zoom({
url: 'photo-big.jpg',
callback: function(){
$(this).colorbox({href: this.src});
}
});
});