어떤 아이디어를 사용하여 특정 지점에서 이미지를 확대하는 방법 javascript, css? 나는 webkit 기반 브라우저를 사용하고 있습니다.이미지를 확대하고 가운데에 배치하는 방법은 무엇입니까?
'elem.style.zoom = "150 %", 과 같이 확대/축소 속성을 지정하여 확대/축소 할 수 있습니다. 확대/축소하려는 위치의 중심에 이미지를 배치 할 수 없습니다. 줌 확대 지점을 마우스 클릭을 사용하여 얻을 수 있습니다.
위의 내 의견에서 말했듯이, 나는 줌 CSS 속성을 피하고 자바 스크립트 만 사용합니다. 나는 첫 번째 클릭에 대해 꽤 잘 작동하는 다음 코드를 함께 던집니다. 실제로 필요한 것은 좀 더 역동적 인 것입니다 (심지어 단어?).
<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>
Google 크롬 및 IE에서 작동하며 다른 사람들에 대해서는 잘 알려져 있지 않습니다. 잘하면 그것은 올바른 방향으로 당신을 가리킬 것이라고 말했다.
수행해야 할 작업.
<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>
를 사용하여 당신이 jQuery를 사용 괜찮다면 새로운 중심
에 컨테이너를 스크롤 필요한 HTML은
<div id="Container">
<img alt="Click to zoom" src="http://sstatic.net/so/img/logo.png" />
</div>
내 코드를 jQuery로 변환 할 때 적어도 내 변수 이름을 그대로 둘 수 있습니다. P –
Lol .. 코딩하는 동안 나에게 직관적 인 느낌을 주어야했습니다. 나중에 조정할 때까지 기억하지 못했지만 ... 오. .. 숙제 ;) –
다음 코드에서 이미지는 마우스 클릭 포인트에서 증폭됩니다. 이미지는 증폭되지만 클릭 한 포인트는 마우스 커서 아래에 유지되고 프레임 크기는 동일하게 유지됩니다. 원래 표시 비율로 돌아가려면 마우스 오른쪽 버튼을 클릭하십시오.
<!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>
HTML/CSS 방식으로 확대/축소하거나 서버에서 적절하게 조정 된 이미지를 다시로드 하시겠습니까? – Boldewyn
afaik, zoom 속성은 표준화되지 않았으며 크로스 브라우저 호환이되지 않습니다. –
아니요. CSS/자바 스크립트 솔루션을 사용하지 않고 서버 측 상호 작용 만하고 싶습니다. – sat