我正在尝试CSS缩放属性,我试图基本放大图像,同时保持它固定在某一点。因此,不是在0,0点的位置放大时,我希望它从右下角放大。
所以这是我的尝试,但显然它有点“古怪”:
小提琴:http://jsfiddle.net/csaltyj/nJ2M8/
HTML:
<div id="overlay">
<div class="square">
<img src="http://placekitten.com/800/800" width="400" height="400" />
</div>
</div>
使用Javascript:
$('.square img').on('click', function() {
$('.square').animate({
zoom: '200%',
left: '-200px',
top: '-200px'
}, 200);
});
CSS:
#overlay {
overflow: hidden;
width: 400px;
height: 400px;
}
.square {
position: relative;
width: 320px;
height: 320px;
background: #333;
vertical-align: bottom;
font-size: 2em;
font-family: Impact, Arial, sans-serif;
text-transform: uppercase;
color: #fff;
}
任何方式让我的行为像我希望的那样?我需要400,400角落才能放大。
答案 0 :(得分:2)
如果要缩放到图像的中心,请更改:
left: '-200px',
top: '-200px'
要:
left: '-50%',
top: '-50%'
以下是演示:http://jsfiddle.net/nJ2M8/1/
尝试使用transform
,它能够扩展元素。以下是我刚才写的一些代码:
$(function () {
var venderTransform = ($.browser.webkit) ? 'WebkitTransform' :
($.browser.mozilla) ? 'MozTransform' :
($.browser.msie) ? 'MsTransform' :
($.browser.opera) ? 'OTransform' : 'transform'
$('.square').each(function () {
$.data(this, 'scale', 3);
}).bind('mousewheel', function (event, delta) {
event.preventDefault();
var sc = $.data(this, 'scale');
if ((delta == 1 && sc < 5) || (delta == -1 && sc > 1)) {
sc += delta;
$.data(this, 'scale', sc);
$(this).children('img').css(venderTransform, 'scale(' + sc + ')');
}
}).bind('mousemove', function (event) {
var sc = $.data(this, 'scale') || 1;//scale
if (sc > 1) {
var $this = $(this),
X = (typeof(event.offsetX) == 'undefined') ? (event.pageX - $this.offset().left) : (event.offsetX),//current cursor X position in bullet element
Y = (typeof(event.offsetY) == 'undefined') ? (event.pageY - $this.offset().top) : (event.offsetY),//current cursor Y position in bullet element
w = 400,//width of thumbnail
h = 400,//height of a thumbnail
nX = ((w / 2) - X),//new X
nY = ((h / 2) - Y),//new Y
tf = 'translate(' + (nX * (sc - 1)) + 'px, ' + (nY * (sc - 1)) + 'px) scale(' + sc + ')';//transform string
$this.children('img').css(venderTransform, tf);
}
}).bind('mouseleave', function () {
//reset .has-thumb element on mouseleave
$.data(this, 'scale', 3);
$(this).children('img').css(venderTransform, 'translate(0, 0) scale(1)');
});
});
这是一个演示:http://jsfiddle.net/nJ2M8/2/(缩放跟随光标,您可以使用鼠标滚轮放大/缩小)
答案 1 :(得分:0)
将您的jQuery更改为以下
$(".square img").click(function(e){
$('.square img').animate({
zoom: '+=.5'
}, 600);
$('.square').animate({
left: '-=' + e.pageX,
top: '-=' + e.pageY
});
});
这将允许您放大用户点击的位置。