N'importe quelle idée Comment zoomer dans une image sur un point particulier à l'aide de Je peux zoomer en spécifiant la propriété de zoom, comme `elem.style.zoom =" 150% ",
Le problème principal est que je ne peux pas centrer l'image où je veux zoomer.
Je peux avoir le point où je veux zoomer en utilisant JavaScript , CSS ? J'utilise le navigateur basé sur webkit webkit.
3 Réponses :
Comme je l'ai dit dans mon commentaire ci-dessus, j'éviterais la propriété de Zoom CSS et coller uniquement JavaScript. J'ai réussi à jeter ensemble le code suivant qui fonctionne assez bien pour le premier clic, vraiment tout ce dont il a besoin est un peu plus dynamiquement (même un mot?).
p>
<html>
<head>
<script type="text/javascript">
function resizeImg (img)
{
var resize = 150; // resize amount in percentage
var origH = 200; // original image height
var origW = 200; // original image width
var mouseX = event.x;
var mouseY = event.y;
var newH = origH * (resize / 100) + "px";
var newW = origW * (resize / 100) + "px";
// 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:200px;
height:200px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="Container">
<img alt="Click to zoom" onclick="resizeImg(this)"
src="https://picsum.photos/200" />
</div>
</body>
</html>Andy ! Cool, maintenant je suis totalement expérimentalement avec ci-dessus pour mes besoins, grâce à la suggestion. Tout ce que j'ai besoin de faire, c'est des calculs et modifier la hauteur, la largeur, la position.
Hey Andy, si je vais zoomer plusieurs fois, signifie 1er clic 150% de zoom, puis 250%, comment puis-je élaborer le nouveau centre, de sorte qu'il fait défiler et les centres correctement. ?? !!
Qu'est-ce qui doit être fait.
Si cela ne vous dérange pas d'utiliser jQuery pour celui-ci, utilisez ce qui suit (testé) et le code HTML requis
Vous auriez au moins avoir laissé mes noms de variable intacts lors de la conversion de mon code en jQuery: p
lol .. dû me sentir intuitif pour moi pendant que je codir ... et je ne me suis jamais souvenu de l'ajuster après ... oh bien ... devoirs;)
Dans le code suivant, l'image est amplifiée au point de clic de la souris - l'image est amplifiée, mais le point où vous avez cliqué sur votre curseur de souris et que la taille du cadre reste la même. Cliquez avec le bouton droit de la souris pour revenir au rapport d'affichage d'origine.
<!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>
Voulez-vous simplement zoomer avec des méthodes HTML / CSS ou souhaitez-vous également ré-charger l'image correctement mise à l'échelle du serveur?
Afaik, la propriété de zoom n'est pas standardisée et il ne sera pas compatible avec le navigateur croisé.
Non, je ne veux que la solution CSS / JavaScript Aucune interaction latérale du serveur.
Les tailles de l'image sont-elles toujours fixées?