I have a pretty simple page.
<div id="index">
<img />
</div>
the styling is pretty simple too.
#index {position:relative;}
#index img {position:absolute; bottom:10%; right:10%; width:100%;}
I use % so the image can be resized proportionally if the browser window resizes. Never mind that.
The problem is, I'm trying to emulate the effect on this flash site : http://www.tatogomez.com/ So the image is in the bottom right of the screen. When I move my mouse to top left, the image will slightly move a bit more to the right bottom. When I move my mouse to center, the image will revert back to its original position. So it's kinda like I'm giving a shadow/lighting effect where the mouse is the lighting and the image is the object, except I only need the moving animation.
my code is like this
$(document).ready(function($){
$('#index').mousemove(
function(e){
$(this).children('img').each(
function(){
var totalWidth = $(window).width();
var totalHeight = $(window).height();
var centerX = $(window).width() / 2;
var centerY = $(window).height() / 2;
var mouseX = e.pageX;
var mouseY = e.pageY;
var current_top = $(this).offset().top;
var current_left = $(this).offset().left;
var myX = (centerX-mouseX)/centerX;
var myY = (centerY-mouseY)/centerY;
var cssObj = {
'left': current_left + myX + 'px'
'top': current_top + myY + 'px'
}
$(this).css(cssObj);
}
);
}
);
});
so if I move the mouse in relation to the center of the screen. So basically it's like this:
centerX = 700 (i use resolution 1400);
currentLeft = ~200 (the offset left of my image)
So if my mouse position is at 700-1400, then the myX will be 700(centerX) - 900(mouse position) = -200 / 700 = ~ -0.3. Add it into the css calculation, the left will be current_left(200) + myX(-0.3) px = 197.7px.
then i realizes if i move my mouse from the center to the right (700-1400 range), the image will slightly move to the left, but when I move my mouse from the right to the center, the image still moves to the left! It should move to the right to its original position, but it doesn't because the web doesn't know whether the mouse moves from right to center or from center to right.
Any help?
I toyed with it quickly, it's lacking the looping through images with .each but might help you with the mouse movement calculations. Rather than being hardcoded, the movement divider should probably be based on the z-index, since lower z-index items move more.
In this demo, initial placement is incorrect until you mouse over.
Demo here: http://jquerydoodles.com/stack_question.html
Hope that helps!
CSS:
#index { position: relative; border: 2px solid #ccc; height: 400px; }
#index img { position: absolute; background-color: #fff; border: 1px solid #666; padding: 6px; }
#image1 { z-index: 3; }
#image2 { z-index: 2; width: 150px; left: 200px; }
#image3 { z-index: 1; width: 100px; left: 300px; }
#image4 { z-index: 2; width: 150px; left: -200px; }
#image5 { z-index: 1; width: 100px; left: -300px; }
HTML
<div id="index">
<img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image1" alt="" />
<img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image2" alt="" />
<img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image3" alt="" />
<img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image4" alt="" />
<img src="http://farm6.static.flickr.com/5138/5421580531_424e84d4cf_m.jpg" id="image5" alt="" />
</div>
JQUERY:
$(document).ready(function($){
$("#index").mousemove(function(e){
var mouseX = e.pageX - $('#index').offset().left;
var mouseY = e.pageY - $('#index').offset().top;
var totalX = $('#index').width();
var totalY = $('#index').height();
var centerX = totalX / 2;
var centerY = totalY / 2;
var shiftX = centerX - mouseX;
var shiftY = centerY - mouseY;
var startX = ($('#index').width() / 2) - ($('#image1').width() / 2);
var startY = ($('#index').height() / 2) - ($('#image1').height() / 2);
$('#image1').css('z-index') ;
$('#image1').css({ 'left': startX + (shiftX/10) + 'px', 'top': startY + (shiftY/10) + 'px' });
$('#image2').css({ 'left': startX + 220 + (shiftX/8) + 'px', 'top': startY + 50 + (shiftY/8) + 'px' });
$('#image3').css({ 'left': startX + 370 + (shiftX/6) + 'px', 'top': startY + 60 + (shiftY/6) + 'px' });
$('#image4').css({ 'left': startX - 100 + (shiftX/8) + 'px', 'top': startY + 50 + (shiftY/8) + 'px' });
$('#image5').css({ 'left': startX - 150 + (shiftX/6) + 'px', 'top': startY + 60 + (shiftY/6) + 'px' });
});
});
Related
I have made this code for mouse hover zoom effect and it is working without error. But I want to add 2-3 images so as the user clicks on it, then that image is shown and mouse hover effect works on it, i.e. on hovering the mouse on the picture shows a zoom effect.
Here is my code:
function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
result = document.getElementById(resultID);
/*create lens:*/
lens = document.createElement("DIV");
lens.setAttribute("class", "img-zoom-lens");
/*insert lens:*/
img.parentElement.insertBefore(lens, img);
/*calculate the ratio between result DIV and lens:*/
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/*set background properties for the result DIV:*/
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/*execute a function when someone moves the cursor over the image, or the lens:*/
lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/*and also for touch screens:*/
lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
/*initialise and hide lens result*/
result.style.display = "none";
/*Reveal and hide on mouseover or out*/
lens.onmouseover = function(){result.style.display = "block";};
lens.onmouseout = function(){result.style.display = "none";};
function moveLens(e) {
var pos, x, y;
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
/*calculate the position of the lens:*/
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
/*prevent the lens from being positioned outside the image:*/
if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
if (x < 0) {x = 0;}
if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
if (y < 0) {y = 0;}
/*set the position of the lens:*/
lens.style.left = x + "px";
lens.style.top = y + "px";
/*display what the lens "sees":*/
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
var a, x = 0, y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {x : x, y : y};
}
};
imageZoom("myimage", "myresult");
* {box-sizing: border-box;}
.img-zoom-container {
position: relative;
display: flex;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 40px;
height: 40px;
}
.img-zoom-result {
border: 1px solid #d4d4d4;
position: absolute;
left: 300px; /*match width of #myimage*/
/*set the size of the result div:*/
width: 300px;
height: 300px;
}
<h1>Image Zoom</h1>
<p>Mouse over the image:</p>
<div class="img-zoom-container">
<img id="myimage" src="https://hatrabbits.com/wp-content/uploads/2018/10/risky-assumptions.jpg" width="300" height="240">
<div id="myresult" class="img-zoom-result" style=""></div>
</div>
<p>The image must be placed inside a container with relative positioning.</p>
<p>The result can be put anywhere on the page, but must have the class name "img-zoom-result".</p>
<p>Make sure both the image and the result have IDs. These IDs are used when a javaScript initiates the zoom effect.</p>
I was searching for the answer and hope here i will get the solution.
Thank you in advance.
Just add more picture like this:
<div class="img-zoom-container">
<img id="myimage" src="https://hatrabbits.com/wp-content/uploads/2018/10/risky-assumptions.jpg" width="300" height="240">
<div id="myresult" class="img-zoom-result" style=""></div>
</div>
<div class="img-zoom-container">
<img id="myimage2" src="https://hatrabbits.com/wp-content/uploads/2018/10/risky-assumptions.jpg" width="300" height="240">
<div id="myresult2" class="img-zoom-result" style=""></div>
</div>
<div class="img-zoom-container">
<img id="myimage3" src="https://hatrabbits.com/wp-content/uploads/2018/10/risky-assumptions.jpg" width="300" height="240">
<div id="myresult3" class="img-zoom-result" style=""></div>
</div>
Then add more calling function
imageZoom("myimage", "myresult");
imageZoom("myimage2", "myresult2");
imageZoom("myimage3", "myresult3");
;)
img {
height: 100px;
width: 200px;
background-color: blue;
}
img:hover {
height: 200px;
width: 400px;
background-color: red;
}
<img src="">
no need for JS to have a hover effect on an image. You can do that purely with CSS by adding :hover to its class/id.
I want to set lens on preview Pane and show perfect image into zoomer div but unable to fix it. I just convert my code from some javascript example and I'm poor in javascript thats why i need help from some experts!
my expectation like image below:
my current development like:
$(function(){
$('.previewPane, #zoomer').css('background-image','url('+$('.imgkey').first().attr('src')+')');
$('.imgkey').click(function(){
$('.previewPane').css('background-image','url('+$(this).attr('src')+')');
});
$('.previewPane').mousemove(function(ev){
$('#zoomer').css('display','inline-block');
var img = $(this).css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1');
var posX = ev.offsetX ? (ev.offsetX) : ev.pageX - $(this).offset().left;
var posY = ev.offsetY ? (ev.offsetY) : ev.pageY - $(this).offset().top;
$('#zoomer').css('background-position',((-posX * 3) + "px " + (-posY * 3) + "px"));
$('#zoomer').css('background-image','url('+img+')');
});
$('.previewPane').mouseleave(function(){$('#zoomer').css('display','none');});
});
.imgkey{width:50px;height:50px;border:1px solid #ddd;}
.previewPane{display:inline-block;border:1px solid #ddd;width:250px;height:250px;cursor:crosshair;background-repeat:no-repeat;background-position:center;background-size:100% 100%}
#zoomer{display:none;background-repeat:no-repeat;border:1px solid #ddd;width:250px;height:250px;z-index:1000;}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<main>
<div class="previewPane"></div><div id="zoomer"></div>
<div class="imgline">
<img class="imgkey" src="https://cdn.shopify.com/s/files/1/0622/2101/products/product-image-496137782_800x.jpg?v=1519622126">
<img class="imgkey" src="https://images-na.ssl-images-amazon.com/images/I/61IPCXn13AL._SX385_.jpg">
<img class="imgkey" src="https://http2.mlstatic.com/celular-smartphone-caterpillar-s60-negro-32-gb-D_NQ_NP_940281-MCO26572973595_122017-F.jpg">
</div>
</main>
I also try your code with simple change like : just add this two line before "$('.preview').each(function() { " but no luck.
$('.img-zoom-container').html('<div class="preview"><img class="image" src="'+$('.Key').first().attr('src')+'"></div>');
$('.Key').click(function(){
$('.img-zoom-container').html('<div class="preview"><img class="image" src="'+$(this).attr('src')+'"></div>');
});
and images out side of 'img-zoom-container' like:
<img class="Key" src="https://www.w3schools.com/howto/img_girl.jpg" width="200" height="200">
<img class="Key" src="https://placeimg.com/640/480/animals" width="200" height="200">
<img class="Key" src="https://placeimg.com/640/480/arch" width="200" height="200">
You have missed the CSS from W3Schools and your image src is not working,
See working snippet with multiple images.
$('.preview').each(function() {
var lens, cx, cy, img, result;
img = $(this).find('img.image')[0];
result = document.getElementById('result');
/*create lens:*/
lens = document.createElement("div");
lens.setAttribute("class", "img-zoom-lens");
/*insert lens:*/
img.parentElement.insertBefore(lens, img);
/*calculate the ratio between result DIV and lens:*/
cx = result.offsetWidth / lens.offsetWidth;
cy = result.offsetHeight / lens.offsetHeight;
/*set background properties for the result DIV:*/
/*execute a function when someone moves the cursor over the image, or the lens:*/
$(lens).on('mousemove touchmove', moveLens);
$(img).on('mousemove touchmove', moveLens);
function getCursorPos(e) {
var a, x = 0,
y = 0;
e = e || window.event;
/*get the x and y positions of the image:*/
a = img.getBoundingClientRect();
/*calculate the cursor's x and y coordinates, relative to the image:*/
x = e.pageX - a.left;
y = e.pageY - a.top;
/*consider any page scrolling:*/
x = x - window.pageXOffset;
y = y - window.pageYOffset;
return {
x: x,
y: y
};
}
function moveLens(e) {
var pos, x, y;
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/*prevent any other actions that may occur when moving over the image:*/
e.preventDefault();
/*get the cursor's x and y positions:*/
pos = getCursorPos(e);
/*calculate the position of the lens:*/
x = pos.x - (lens.offsetWidth / 2);
y = pos.y - (lens.offsetHeight / 2);
/*prevent the lens from being positioned outside the image:*/
if (x > img.width - lens.offsetWidth) {
x = img.width - lens.offsetWidth;
}
if (x < 0) {
x = 0;
}
if (y > img.height - lens.offsetHeight) {
y = img.height - lens.offsetHeight;
}
if (y < 0) {
y = 0;
}
/*set the position of the lens:*/
lens.style.left = x + "px";
lens.style.top = y + "px";
/*display what the lens "sees":*/
result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
console.log(result);
}
})
* {
box-sizing: border-box;
}
.img-zoom-container {
width: 100%
}
.preview {
display: inline-block;
margin: 0 10px;
position: relative;
}
.img-zoom-lens {
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 40px;
height: 40px;
}
.img-zoom-result {
border: 1px solid #d4d4d4;
/*set the size of the result div:*/
width: 300px;
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
</script>
<h1>Image Zoom</h1>
<p>Mouse over the image:</p>
<div class="img-zoom-container">
<div class="preview"><img class="image" src="https://www.w3schools.com/howto/img_girl.jpg" width="200" height="200"></div>
<div class="preview"><img class="image" src="https://placeimg.com/640/480/animals" width="200" height="200"></div>
<div class="preview"><img class="image" src="https://placeimg.com/640/480/arch" width="200" height="200"></div>
</div>
<div class="img-zoom-result" id="result"></div>
I have this code above who switch between CSS transform-origin and scale to CSS width and scrollbars.
I need to make this switch because I am having a pinch to zoom for a DIV wrap I'm using in my website.
I'm using CSS translateX and translateY and Scale for a smoother pinch zoom, but after the zoom take place, I need to return back to width and scrollbar so the user can move across the layout.
I have here an example of how I'm doing the switch and there is a bit margin on top that I can't really set mind my on.
what is the correct way to do so?
var isOrigin = false;
var originX = 500;
var originY = 200;
var scale = 1.5;
var deltaX = 0;
var deltaY = 0;
var from_origin_to_scroll = function () {
if (isOrigin) { from_scroll_to_origin(); return; }
var wrap = $('.containter .wrap');
//reset scroll
const el = document.scrollingElement || document.documentElement;
$('.containter')[0].scrollLeft = 0;
el.scrollTop = 0;
wrap.css({
transformOrigin: originX + "px " + originY + "px",
transform: "translate3d(" + deltaX + "px," + deltaY + "px, 0) " +
"scale3d(" + scale + "," + scale + ", 1) ",
width: 100 + '%'
});
isOrigin = true;
$('.info').html('layout set by origin and scale');
}
var from_scroll_to_origin = function () {
var wrap = $('.containter .wrap');
wrap.css({
transformOrigin: originX + "px " + originY + "px",
transform: "translate3d(" + 0 + "px," + 0 + "px, 0) " +
"scale3d(" + 1 + "," + 1 + ", 1) ",
width: (100 * scale) + '%'
});
$('.containter')[0].scrollLeft = originX * (scale - 1);
const el = document.scrollingElement || document.documentElement;
el.scrollTop = originY * (scale - 1);
isOrigin = false;
$('.info').html('layout set by width and scroll');
}
body {
margin: 0;
padding: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width:100vw;
}
.top{
position: fixed;
width: 100%;
background-color: #333;
line-height: 40pt;
text-align: center;
color: #f1f1f1;
font-size: 20pt;
left: 0;
top: 0;
z-index: 10;
}
.top .info{
}
.header_content
{
background-color: #e1e1e1;
line-height:130pt;
}
.containter {
width:100%;
box-sizing: border-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.containter .wrap {
display: flex;
flex-direction: column;
width: 100%;
}
.containter .wrap img {
width: 100%;
margin-top: 30pt;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<div class="info" onclick="from_origin_to_scroll()">click to switch</div>
</div>
<div class="header_content">
this is a header content - needs to be added to overall calculation
</div>
<div class="containter">
<div class="wrap">
<img src="https://thumb7.shutterstock.com/display_pic_with_logo/91858/594887747/stock-photo-dreams-of-travel-child-flying-on-a-suitcase-against-the-backdrop-of-sunset-594887747.jpg" />
<img src="https://thumb9.shutterstock.com/display_pic_with_logo/1020994/556702975/stock-photo-portrait-of-a-happy-and-proud-pregnant-woman-looking-at-her-belly-in-a-park-at-sunrise-with-a-warm-556702975.jpg" />
<img src="https://thumb7.shutterstock.com/display_pic_with_logo/234100/599187701/stock-photo-funny-little-girl-plays-super-hero-over-blue-sky-background-superhero-concept-599187701.jpg" />
<img src="https://thumb1.shutterstock.com/display_pic_with_logo/1316512/661476343/stock-photo-funny-pineapple-in-sunglasses-near-swimming-pool-661476343.jpg" />
<img src="https://thumb1.shutterstock.com/display_pic_with_logo/2114402/689953639/stock-photo-adult-son-hugging-his-old-father-against-cloudy-sky-with-sunshine-689953639.jpg" />
<img src="https://thumb7.shutterstock.com/display_pic_with_logo/172762/705978841/stock-photo-businessman-looking-to-the-future-for-new-business-opportunity-705978841.jpg" />
</div>
</div>
In your case the possible solution is to detect when the user is trying to zoom, and when just to scroll.
const $container = $(".container");
$container.on('touchstart', function (e) {
if (e.touches.length > 1){
//more than one finger is detected on the screen,
//change mode to transform-origin
from_scroll_to_origin()
}
});
$container.on('touchend', function (e) {
//change mode to scrollbars
from_origin_to_scroll()
});
I'm doing a project with parallaxing 3 images based on the mouse movement.
In Chrome and internet explorer it works fine but my problem is firefox!
The parallax mouse movement effect doesnt work like it should for firefox, how can I solve the problem. firefox makes the effect only work up and down movement like if you scroll automatically with the mouse. The effect should rather be like it moves with the mouse like if the mouse is a camera in 3D space.
$(document).ready(function() {
var movementStrength = 15;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("#logo-image").mousemove(function(e) {
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = width * pageX * -1 - 25;
var newvalueY = height * pageY * -1 - 50;
$('#logo-image').css("background-position", newvalueX + "px " + newvalueY + "px");
});
});
$(document).ready(function() {
var movementStrength = 10;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("#mos").mousemove(function(e) {
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = width * pageX * -1 - 25;
var newvalueY = height * pageY * -1 - 50;
$('#mos').css("background-position", newvalueX + "px " + newvalueY + "px");
});
});
$(document).ready(function() {
var movementStrength = 5;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("#bottom-image").mousemove(function(e) {
var pageX = e.pageX - ($(window).width() / 2);
var pageY = e.pageY - ($(window).height() / 2);
var newvalueX = width * pageX * -1 - 25;
var newvalueY = height * pageY * -1 - 50;
$('#bottom-image').css("background-position", newvalueX + "px " + newvalueY + "px");
});
});
#bottom-image {
background: url('bgpalms.jpg') -25px -50px;
display: block;
position: fixed;
background-repeat: no-repeat;
top: 0;
width: 100%;
z-index: 0;
height: 100%;
background-size: calc(100% + 50px);
}
#logo-image {
background: url('palms_kungen_1.png') -25px -50px;
margin: 0 auto 0 auto;
background-repeat: no-repeat;
top: 0;
width: 50%;
z-index: 0;
height: 100%;
background-size: calc(100% + 50px);
}
#mos {
background: url('mos.png') -25px -50px;
/*margin: 0 auto 0 auto;*/
display: block;
position: fixed;
background-repeat: no-repeat;
top: 0;
width: 100%;
z-index: 0;
height: 100%;
background-size: calc(100% + 50px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="bottom-image">
<div id="mos">
<div id="logo-image"></div>
</div>
</div>
I'm trying to apply Zoom In/Out like Google Map like here - https://www.google.com/maps/#36.241201,-98.1261798,5.13z?hl=en
I cannot get it working properly.
I've looked for solution. But all of them are based on CSS Tansform what i cannot use.
var $image = $('#image');
var container_height = $('#container').height();
var container_width = $('#container').width();
$image.width(container_width);
$('#container').on('click', function(e){
var zoom = 100;
e.preventDefault();
var this_offset = $(this).offset();
var click_x = e.pageX - this_offset.left;
var click_y = e.pageY - this_offset.top;
var image_height = $image.height();
var image_width = $image.width();
$image.css({
'width' : image_width + zoom,
'height' : image_height + zoom,
'top': -click_y,
'left': -click_x,
});
});
.container{
margin: 15px auto;
position:relative;
width:400px;
height: 300px;
border: 2px solid #fff;
overflow:hidden;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.image{
position:absolute;
transition:all 0.25s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="container">
<img src="https://i.imgur.com/sEUlGOw.jpg" id="image" class="image" />
</div>
Please Help.
Thanks
First, please apply the zoom as a multiplication factor. So for a 200% zoom, set the value to 2. To zoom out to half size, set the value to 0.5.
Instead of working with pageX and pageY, I've used offsetX and offsetY to find x, y coordinate of pixel which was clicked. (Please be aware of compatibility).
To find image's left and top within container, I've used offsetLeft and offsetTop.
(function () {
var $image = $('#image');
var container_width = $('#container').width();
$image.width(container_width);
$image.on('click', function(e){
var zoom = 1.3; // zoom by multiplying a factor for equal width n height proportions
e.preventDefault();
var click_pixel_x = e.offsetX,
click_pixel_y = e.offsetY;
var image_width = $image.width(),
image_height = $image.height();
var current_img_left = this.offsetLeft,
current_img_top = this.offsetTop;
var new_img_width = image_width * zoom,
//new_img_height = image_height * zoom,
img_left = current_img_left + click_pixel_x - (click_pixel_x * zoom),
img_top = current_img_top + click_pixel_y - (click_pixel_y * zoom);
$image.css({
'width' : new_img_width,
//'height' : new_img_height,
'left': img_left,
'top': img_top
});
});
})(jQuery);
.container{
margin: 15px auto;
position:relative;
width:400px;
height: 300px;
border: 2px solid #fff;
overflow:hidden;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.image{
position:absolute;
left: 0,
top: 0,
transition:all 0.25s ease-in-out;
}
<div class="container" id="container">
<img src="https://i.imgur.com/sEUlGOw.jpg" id="image" class="image" />
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>