¿Alguna idea de cómo acercar una imagen en un punto particular usando javascript, css? Estoy usando el navegador basado en webkit.Cómo acercar una imagen y centrarla?
Se puede ampliar especificando el zoom del inmueble, como `elem.style.zoom =" 150% ", El principal problema es que no puedo centrar la imagen donde quiero hacer zoom. Puedo obtener el punto en el que quiero hacer zoom utilizando mouseclick.
Como dije en mi comentario anterior, evitaría la propiedad zoom css y me limitaría a javascript. Logré juntar el siguiente código que funciona bastante bien para el primer clic, realmente todo lo que necesita es un poco más de dinámica (¿incluso una palabra?).
<html>
<head>
<script type="text/javascript">
function resizeImg (img)
{
var resize = 150; // resize amount in percentage
var origH = 61; // original image height
var origW = 250; // original image width
var mouseX = event.x;
var mouseY = event.y;
var newH = origH * (resize/100);
var newW = origW * (resize/100);
// Set the new width and height
img.style.height = newH;
img.style.width = newW;
var c = img.parentNode;
// Work out the new center
c.scrollLeft = (mouseX * (resize/100)) - (newW/2)/2;
c.scrollTop = (mouseY * (resize/100)) - (newH/2)/2;
}
</script>
<style type="text/css">
#Container {
position:relative;
width:250px;
height:61px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="Container">
<img alt="Click to zoom" onclick="resizeImg(this)"
src="http://sstatic.net/so/img/logo.png" />
</div>
</body>
</html>
Funciona en Google Chrome y IE, no estoy seguro de los demás. Como dije afortunadamente, te orientará en la dirección correcta.
Andy! Genial, ahora estoy experimentando totalmente con lo de arriba para mis requerimientos, gracias por su sugerencia. Todo lo que necesito hacer es calcular y modificar la altura, el ancho y la posición. – sat
No hay problema, buena suerte :) –
hola Andy, si voy a hacer zoom varias veces, lo que significa primer clic 150% de zoom, siguiente 200% luego 250%, ¿cómo puedo calcular el nuevo centro, de modo que se desplaza y centra correctamente. ?? !! – sat
Lo que hay que hacer.
si no les importa usar jQuery para ello a continuación, utilizar el siguiente (probado)
<script type="text/javascript">
$(document).ready(
function(){
$('#Container img').click(
function(event){
var scale = 150/100;
var pos = $(this).offset();
var clickX = event.pageX - pos.left;
var clickY = event.pageY - pos.top;
var container = $(this).parent().get(0);
$(this).css({
width: this.width*scale,
height: this.height*scale
});
container.scrollLeft = ($(container).width()/-2) + clickX * scale;
container.scrollTop = ($(container).height()/-2) + clickY * scale;
}
);
}
);
</script>
y el html necesitó
<div id="Container">
<img alt="Click to zoom" src="http://sstatic.net/so/img/logo.png" />
</div>
Podrías haber dejado al menos mis nombres de variables intactos al convertir mi código a jQuery: P –
lol ... tuve que sentirme intuitiva mientras codificaba ... y nunca recordé ajustarla después ... bueno. .. deberes ;) –
En el código siguiente, la imagen se amplifica en el punto de clic del mouse: la imagen se amplifica, pero el punto donde hizo clic permanece debajo del cursor del mouse y el tamaño del marco permanece igual. Haga clic con el botón derecho para volver a la relación de visualización original.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<style>
div {
width: 400px;
height: 600px;
overflow: hidden;
}
img {
position: relative
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
var imageOffset_x = 0;
var imageOffset_y = 0;
function onZoom()
{
var mouseInFrame_x = event.x;
var mouseinFrame_y = event.y;
var mouseInImage_x = imageOffset_x + mouseInFrame_x;
var mouseInImage_y = imageOffset_y + mouseinFrame_y;
imageOffset_x += mouseInImage_x * 0.16;
imageOffset_y += mouseInImage_y * 0.16;
var image = $('#container img');
var imageWidth = image.width();
var imageHeight = image.height();
image.css({
height: imageHeight * 1.2,
width: imageWidth * 1.2,
left: -imageOffset_x,
top: -imageOffset_y
});
}
function onRightClick() {
imageOffset_x = 0;
imageOffset_y = 0;
$('#container img').css({
height: 600,
width: 400,
left: 0,
top: 0
});
return false;
}
</script>
</head>
<body>
<a id="zoom" href="#" onclick="onZoom();">Zoom</a>
<div id="container">
<img src="~/Images/Sampple.jpg" width="400" height="600" onclick="onZoom();" oncontextmenu="onRightClick(); return false;"/>
</div>
</body>
</html>
¿Desea simplemente acercarlo con los métodos de HTML/CSS o también desea volver a cargar la imagen a escala adecuada del servidor? – Boldewyn
afaik, la propiedad de zoom no está estandarizada y no será compatible con navegadores cruzados. –
No, solo quiero la solución css/javascript sin interacción del lado del servidor. – sat