Move an Image With JavaScript Using Mouse Events

Move an image with Javascript using mouse events

var dog = document.getElementById("dogPic");var cat = document.getElementById("catPic");var moving = false;
dog.addEventListener("mousedown", initialClick, false);cat.addEventListener("mousedown", initialClick, false);

function move(e){
  var newX = e.clientX - 10;  var newY = e.clientY - 10;
  image.style.left = newX + "px";  image.style.top = newY + "px";
  }
function initialClick(e) {
  if(moving){    document.removeEventListener("mousemove", move);    moving = !moving;    return;  }    moving = !moving;  image = this;
  document.addEventListener("mousemove", move, false);
}

#dogPic, #catPic {  width: 20px;  height: 20px;  position: absolute;  background: red;  top: 10px;  left: 10px;}
#dogPic {  background: blue;  top: 50px;  left: 50px;}

<div id="dogPic"></div><div id="catPic"></div>

move img with mousemove

Since you're using transform: scale() for the zoom effect it's faster and more correct to modify transform-origin to change the center point of the zoom effect on mousemove:

// Zoom in/out clothing img$('.image').click(function() {  $(this).toggleClass('normal-zoom zoom-in');});
$('.image').on('mousemove', function(event) {  // This gives you the position of the image on the page  var bbox = event.target.getBoundingClientRect();
  // Then we measure how far into the image the mouse is in both x and y directions  var mouseX = event.clientX - bbox.left;  var mouseY = event.clientY - bbox.top;
  // Then work out how far through the image as a percentage the mouse is  var xPercent = (mouseX / bbox.width) * 100;  var yPercent = (mouseY / bbox.height) * 100;
  // Then we change the `transform-origin` css property on the image to center the zoom effect on the mouse position  //event.target.style.transformOrigin = xPercent + '% ' + yPercent + '%';  // It's a bit clearer in jQuery:  $(this).css('transform-origin', (xPercent+'% ' + yPercent+ '%') );  // We add the '%' units to make sure the string looks exactly like the css declaration it becomes.
});
// If you want it to automatically trigger on hover$('.image').on('mouseenter', function() {  $(this).addClass('zoom-in');  $(this).removeClass('normal-zoom');});
// and stop when not hovering$('.image').on('mouseleave', function() {  $(this).addClass('normal-zoom');  $(this).removeClass('zoom-in');});

.container {  width: 800px;  margin: 0 auto;  border: 2px solid black;  display: flex;}
.img-wrapper {  margin: 10px;  overflow: hidden;}
.image {  width: 100%;  height: 100%;}
.text {  width: 40%;  padding: 20px;}
.normal-zoom {  transform: scale(1);  cursor: zoom-in;  transition: transform 250ms;}
.zoom-in {  transform: scale(1.6);  cursor: zoom-out;  transition: transform 250ms;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="container">  <div class="img-wrapper">    <img src="https://static1.squarespace.com/static/560c458be4b0af26f729d191/560c5de0e4b083d9c365515f/560d53d4e4b03b1013fd40de/1443714010032/lauren-winter-wide-pant-natural_0178.jpg?format=750w" class="image normal-zoom">  </div>  <p class="text">Kept in sent gave feel will oh it we. Has pleasure procured men laughing shutters nay. Old insipidity motionless continuing law shy partiality. Depending acuteness dependent eat use dejection. Unpleasing astonished discovered not nor shy. Morning hearted now met yet beloved evening. Has and upon his last here must. Cottage out enabled was entered greatly prevent message. No procured unlocked an likewise. Dear but what she been over gay felt body. Six principles advantages and use entreaties decisively. Eat met has dwelling unpacked see whatever followed. Court in of leave again as am. Greater sixteen to forming colonel no on be. So an advice hardly barton. He be turned sudden engage manner spirit.</p></div>

How to move image slider next or previous using mouse?

try this in order to determine the direction of movement, and then you can execute animate.

HTML structure could be

<div id="main-div">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

and by in javascript code you can bind mousedown and mouseup methods to calculate direction (also you can calculate step size)

$mainDiv.mousedown(function (event) {
    sliding = true;
    startClientX = event.clientX;
    return false;
}).mouseup(function (event) {
    var step = event.clientX - startClientX, 
        dir = step > 0 ? 1 : -1;

    step = Math.abs(step);

    move(dir, step);
});

then you can call move method to execute sliding animation

function move(dir, step) {
   var $ul = $mainDiv.find('ul'),
       liWidth = $ul.find('li').width();

   $ul.animate({
      left: '+=' + (dir * liWidth)
   }, 200);
}

see my jsffidle http://jsfiddle.net/pBGGH/1/

Of course you should check boundaries of the ul element to prevent scroll to much.

Move an image according to the mouse cordinates using jquery

Well you can move the image using .css

such as:

$(window).mousemove(function(event) {
  $("#image").css({"left" : event.pageX, "top" : event.pageY});
});

just set #image to fixed or absolute

above
This is not very hardware intensive at all. As long as you use .css and not .animate
This is probably the easiest and most robust solution

Move an Image With JavaScript Using Mouse Events