如何在画布顶部的图像的鼠标光标周围获得悬停效果?

瑞奇水坝

当鼠标在画布上时,它会在鼠标周围显示一个红色圆圈。当鼠标悬停在图像上时,我想要红色圆圈鼠标效果。

我想要右侧的放大视图,同时只要光标位于图像上的任何位置,就可以在鼠标光标上产生悬停效果。

在此先感谢您的帮助和建议!

iPhone 缩放代码由codeplayer 编写。
http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3

鼠标光标圈代码由 Kirupa 编写。
https://www.kirupa.com/canvas/follow_mouse_cursor.htm

var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");
var canvasPos = getPosition(canvas);
var mouseX = 0;
var mouseY = 0;

function getPosition(el) {
  var xPosition = 0;
  var yPosition = 0;
 
  while (el) {
    xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
    yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
    el = el.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}

function update() {
  context.clearRect(0, 0, canvas.width, canvas.height);
 
  context.beginPath();
  context.arc(mouseX, mouseY, 20, 0, 2 * Math.PI, true);
  context.fillStyle = "#FF6A6A";
  context.fill();
 
  requestAnimationFrame(update);
}

function setMousePosition(e) {
  mouseX = e.clientX - canvasPos.x;
  mouseY = e.clientY - canvasPos.y;
 
  context.clearRect(0, 0, canvas.width, canvas.height);
 
  context.beginPath();
  context.arc(mouseX, mouseY, 20, 0, 2 * Math.PI, true);
  context.fillStyle = "#FF6A6A";
  context.fill();
}

canvas.addEventListener("mousemove", setMousePosition, false);
update();

$(document).ready(function() {

  var native_width = 0;
  var native_height = 0;

  //Now the mousemove function
  $(".magnify").mousemove(function(e) {
    //When the user hovers on the image, the script will first calculate
    //the native dimensions if they don't exist. Only after the native dimensions
    //are available, the script will show the zoomed version.
    if (!native_width && !native_height) {
      //This will create a new image object with the same image as that in .small
      //We cannot directly get the dimensions from .small because of the 
      //width specified to 200px in the html. To get the actual dimensions we have
      //created this image object.
      var image_object = new Image();
      image_object.src = $(".small").attr("src");

      //This code is wrapped in the .load function which is important.
      //width and height of the object would return 0 if accessed before 
      //the image gets loaded.
      native_width = image_object.width;
      native_height = image_object.height;
    } else {
      //x/y coordinates of the mouse
      //This is the position of .magnify with respect to the document.
      var magnify_offset = $(this).offset();
      //We will deduct the positions of .magnify from the mouse positions with
      //respect to the document to get the mouse positions with respect to the 
      //container(.magnify)
      var mx = e.pageX - magnify_offset.left;
      var my = e.pageY - magnify_offset.top;

      //Finally the code to fade out the glass if the mouse is outside the container
      if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
        $(".large").fadeIn(100);
      } else {
        $(".large").fadeOut(100);
      }
      if ($(".large").is(":visible")) {
        //The background position of .large will be changed according to the position
        //of the mouse over the .small image. So we will get the ratio of the pixel
        //under the mouse pointer with respect to the image and use that to position the 
        //large image inside the magnifying glass
        var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
        var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
        var bgp = rx + "px " + ry + "px";

        //Time to move the magnifying glass with the mouse
        var px = mx - $(".large").width() / 2;
        var py = my - $(".large").height() / 2;
        //Now the glass moves with the mouse
        //The logic is to deduct half of the glass's width and height from the 
        //mouse coordinates to place it with its center at the mouse coordinates

        //If you hover on the image now, you should see the magnifying glass in action
        $(".large").css({
          left: px,
          top: py,
          backgroundPosition: bgp
        });
      }
    }
  })
})
canvas {
  border: #333 5px solid;
  z-index: 1;
}

/*Some CSS*/
.magnify {
  width: 100px;
  position: relative;
  margin-top: -205px;
  margin-left: 5px;
  z-index: 10;
}

/*Lets create the magnifying glass*/

.large {
  width: 120px;
  height: 120px;
  position: absolute;
  /*Multiple box shadows to achieve the glass effect*/
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  /*Lets load up the large image first*/
  background: url('http://thecodeplayer.com/uploads/media/iphone.jpg') no-repeat;
  /*hide the glass by default*/
  display: none;
  margin-left: 150px;
}

/*To solve overlap bug at the edges during magnification*/
.small {
  display: block;
}
<canvas id="myCanvas" width="500px" height="195px"></canvas>

<!-- Lets make a simple image magnifier -->
<div class="magnify">
	
<!-- This is the magnifying glass which will contain the original/large version -->
<div class="large"></div>
	
<!-- This is the small image -->
<img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="102"/>
	
</div>

<!-- Lets load up prefixfree to handle CSS3 vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
<!-- You can download it from http://leaverou.github.com/prefixfree/ -->

<!-- Time for jquery action -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>

里亚兹·拉斯卡尔

因为你想要图像上的悬停效果,所以我在画布上渲染了图像。我已经更新了答案。我想这就是你的想法。

var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");
var canvasPos = getPosition(canvas);
var mouseX = 0;
var mouseY = 0;

function getPosition(el) {
  var xPosition = 0;
  var yPosition = 0;

  while (el) {
    xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
    yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
    el = el.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}

function update() {
  context.clearRect(0, 0, canvas.width, canvas.height);

  /*context.beginPath();
  context.arc(mouseX, mouseY, 20, 0, 2 * Math.PI, true);
  context.fillStyle = "#FF6A6A";
  context.fill();*/

  requestAnimationFrame(update);
}

function setMousePosition(e) {
  mouseX = e.clientX - canvasPos.x;
  mouseY = e.clientY - canvasPos.y;

  context.clearRect(0, 0, canvas.width, canvas.height);

  context.beginPath();
  context.arc(mouseX, mouseY, 20, 0, 2 * Math.PI, true);
  context.fillStyle = "#FF6A6A";
  context.fill();
}

canvas.addEventListener("mousemove", setMousePosition, false);
update();

$(document).ready(function() {

  var native_width = 0;
  var native_height = 0;

  //Now the mousemove function
  $(".magnify").mousemove(function(e) {
    //When the user hovers on the image, the script will first calculate
    //the native dimensions if they don't exist. Only after the native dimensions
    //are available, the script will show the zoomed version.
    if (!native_width && !native_height) {
      //This will create a new image object with the same image as that in .small
      //We cannot directly get the dimensions from .small because of the 
      //width specified to 200px in the html. To get the actual dimensions we have
      //created this image object.
      var image_object = new Image();
      image_object.src = $(".small").attr("src");

      //This code is wrapped in the .load function which is important.
      //width and height of the object would return 0 if accessed before 
      //the image gets loaded.
      native_width = image_object.width;
      native_height = image_object.height;
    } else {
      //x/y coordinates of the mouse
      //This is the position of .magnify with respect to the document.
      var magnify_offset = $(this).offset();
      //We will deduct the positions of .magnify from the mouse positions with
      //respect to the document to get the mouse positions with respect to the 
      //container(.magnify)
      var mx = e.pageX - magnify_offset.left;
      var my = e.pageY - magnify_offset.top;

      //Finally the code to fade out the glass if the mouse is outside the container
      if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
        $(".large").fadeIn(100);
      } else {
        $(".large").fadeOut(100);
      }
      if ($(".large").is(":visible")) {
        //The background position of .large will be changed according to the position
        //of the mouse over the .small image. So we will get the ratio of the pixel
        //under the mouse pointer with respect to the image and use that to position the 
        //large image inside the magnifying glass
        var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
        var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
        var bgp = rx + "px " + ry + "px";

        //Time to move the magnifying glass with the mouse
        var px = mx - $(".large").width() / 2;
        var py = my - $(".large").height() / 2;
        //Now the glass moves with the mouse
        //The logic is to deduct half of the glass's width and height from the 
        //mouse coordinates to place it with its center at the mouse coordinates

        //If you hover on the image now, you should see the magnifying glass in action
        $(".large").css({
          backgroundPosition: bgp
        });
        $(".pointer").css({
          left: mx - 25,
          top: my - 25
        });
      }
    }
  })
})
canvas {
  border: #333 5px solid;
  z-index: 0;
}


/*Some CSS*/

.magnify {
  width: 100px;
  position: relative;
  margin-top: -205px;
  margin-left: 5px;
  z-index: 10;
}


/*Lets create the magnifying glass*/

.large {
  width: 120px;
  height: 120px;
  position: absolute;
  /*Multiple box shadows to achieve the glass effect*/
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  /*Lets load up the large image first*/
  background: url('http://thecodeplayer.com/uploads/media/iphone.jpg') no-repeat;
  /*hide the glass by default*/
  display: none;
  margin-left: 150px;
}


/*To solve overlap bug at the edges during magnification*/

.small {
  display: block;
  z-index: 1;
  position: relative;
}

.pointer {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #FF6A6A;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999999;
  opacity: 0.5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="500px" height="195px"></canvas>

<!-- Lets make a simple image magnifier -->
<div class="magnify">

  <!-- This is the magnifying glass which will contain the original/large version -->
  <div class="large"></div>

  <!-- This is the small image -->
  <img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="102" />
  <div class="pointer"></div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在鼠标悬停的图像上显示悬停效果

来自分类Dev

如何在鼠标光标周围创建形状?

来自分类Dev

图像鼠标悬停效果如何?

来自分类Dev

如何在qemu中获得鼠标光标?

来自分类Dev

如何在<a>内使鼠标悬停效果的SVG图像可点击

来自分类Dev

如何在图像地图上将鼠标悬停效果创建为不规则形状

来自分类Dev

将鼠标悬停在图像的顶部和底部具有不同的效果

来自分类Dev

将鼠标悬停在该图像上方的按钮上时,如何对图像应用悬停效果?

来自分类Dev

如何在画布中获得更多光标位置

来自分类Dev

如何在 HTML 页面上获得光标轨迹效果

来自分类Dev

鼠标悬停鼠标悬停图像变化液体效果

来自分类Dev

如何获得鼠标光标类型?

来自分类Dev

如何在光标悬停时旋转图像并保持旋转?

来自分类Dev

如何在图像悬停时产生这样的效果?

来自分类Dev

如何在图像图标上设置鼠标效果

来自分类Dev

如何在鼠标悬停到页面上的所有div上添加悬停效果?

来自分类Dev

试图使用html和css获得鼠标悬停缩放横向效果,但是图像溢出,图像位置被改变

来自分类Dev

如何在鼠标悬停时以素面更改Commandlink图像?

来自分类Dev

如何在鼠标悬停时更改图像?

来自分类Dev

如何在鼠标悬停时使圆形图像变暗?

来自分类Dev

如何在css中的图像上模拟鼠标悬停

来自分类Dev

如何在鼠标悬停时更改图像?

来自分类Dev

如何在鼠标悬停在div中心对齐图像

来自分类Dev

如何获得两个图像以在鼠标悬停/鼠标移开时切换?

来自分类Dev

如何获得光标点击效果?

来自分类Dev

如何获得光标点击效果?

来自分类Dev

如何获得鼠标光标下的像素

来自分类Dev

Flutter Desktop:如何在按钮悬停时禁用“已禁用”的鼠标光标?

来自分类Dev

如何获得图像凸出效果?

Related 相关文章

  1. 1

    如何在鼠标悬停的图像上显示悬停效果

  2. 2

    如何在鼠标光标周围创建形状?

  3. 3

    图像鼠标悬停效果如何?

  4. 4

    如何在qemu中获得鼠标光标?

  5. 5

    如何在<a>内使鼠标悬停效果的SVG图像可点击

  6. 6

    如何在图像地图上将鼠标悬停效果创建为不规则形状

  7. 7

    将鼠标悬停在图像的顶部和底部具有不同的效果

  8. 8

    将鼠标悬停在该图像上方的按钮上时,如何对图像应用悬停效果?

  9. 9

    如何在画布中获得更多光标位置

  10. 10

    如何在 HTML 页面上获得光标轨迹效果

  11. 11

    鼠标悬停鼠标悬停图像变化液体效果

  12. 12

    如何获得鼠标光标类型?

  13. 13

    如何在光标悬停时旋转图像并保持旋转?

  14. 14

    如何在图像悬停时产生这样的效果?

  15. 15

    如何在图像图标上设置鼠标效果

  16. 16

    如何在鼠标悬停到页面上的所有div上添加悬停效果?

  17. 17

    试图使用html和css获得鼠标悬停缩放横向效果,但是图像溢出,图像位置被改变

  18. 18

    如何在鼠标悬停时以素面更改Commandlink图像?

  19. 19

    如何在鼠标悬停时更改图像?

  20. 20

    如何在鼠标悬停时使圆形图像变暗?

  21. 21

    如何在css中的图像上模拟鼠标悬停

  22. 22

    如何在鼠标悬停时更改图像?

  23. 23

    如何在鼠标悬停在div中心对齐图像

  24. 24

    如何获得两个图像以在鼠标悬停/鼠标移开时切换?

  25. 25

    如何获得光标点击效果?

  26. 26

    如何获得光标点击效果?

  27. 27

    如何获得鼠标光标下的像素

  28. 28

    Flutter Desktop:如何在按钮悬停时禁用“已禁用”的鼠标光标?

  29. 29

    如何获得图像凸出效果?

热门标签

归档