Javascript-使图像出现在光标处

Javascript - Make image appear at cursor

本文关键字：光标 图像 Javascript-      更新时间：2023-09-26

有什么想法可以达到类似的效果吗？

http://garyc.me/fun/gusta.swf

是，使用mousemove事件

http://jsfiddle.net/GTTGD/1/

var img = new Image;
img.src = 'http://files.myopera.com/lengoc89/albums/317185/3133~Kitty-Posters.jpg';
document.addEventListener('mousemove', function(e) {
    e = e || window.event;
    var tag = document.createElement('img');
    console.log(e);
    tag.src = img.src;
    tag.style.position = 'absolute';
    tag.style.height = '50px';
    tag.style.width = '50px';
    tag.style.top = (e.pageY || e.clientY) + 'px';
    tag.style.left = (e.pageX || e.clientX) + 'px';
    this.body.appendChild(tag);
}, false);​

事后看来，这是一个相当愚蠢的答案。因此，我将用一个实际的例子再次回答，用HTML5制作flash文件中的内容。

如果你能完全理解这是如何工作的，那么在一瞬间做出同样的事情应该不费吹灰之力。但也要考虑到我无意中制作的演示比flash演示运行得更快、更稳定，所以你可能会考虑在下一个项目中使用HTML5。

我做的例子就在这里，事不宜迟，我将逐行分解，从HTML:开始

<canvas id="canvas" width="400" height="300">
    Your browser does not support the HTML5 canvas. <br>
    Get or upgrade to a modern browser like Google Chrome or Mozilla Firefox.
</canvas>

这将在DOM中创建一个<canvas>元素。画布是一个包含在HTML5规范中的2D（很快就会是3D！）图形API，它允许图形的绘制和动画。您使用JavaScript通过其drawing context来控制画布，因此了解ECMAscript（包括JavaScript和Flash的ActionScript，后者基于JavaScript）将有很大帮助。

现在的JavaScript:

ctx = canvas.getContext('2d');

这将获得绘图上下文，该上下文提供了允许您在画布上绘图的方法。目前唯一的参数是'2d'，但有一个参数'experimental-webgl'允许使用一种名为web gl的实验3D技术，但需要一个好的视频卡。我相信这只适用于像Google Chrome这样的Webkit浏览器和像Firefox这样的Gecko浏览器。

注意：在我测试过的每一个浏览器中，你都不必使用document.getElementById()方法来通过id来抓取项目。只要id存在于HTML中，一个变量列表就会变成on load，该列表包含并以具有该属性的每个元素的id命名。当然，这意味着您必须将<script>标记放在HTML的下方，而不是上方，这样就可以预先加载DOM和节点列表。

mouse = [0,0];
imgLoaded = false;
trail = [];

这些变量用于跟踪鼠标位置、图像是否已加载、轨迹和图像大小。mouse是一个保存鼠标的X和Y坐标的数组，每次鼠标移动时都会更新，imgLoaded在后面的函数中设置为true，表示图像已加载，因此它可以正确绘制，trail是一个自演示开始以来保存每个鼠标位置的数组，它保存具有用于绘制轨迹的坐标的阵列，并与mouse一起更新。

img = new Image();
img.onload = function(){
    imgLoaded = true;
};
img.src = 'http://images.encyclopediadramatica.se/0/0a/Me_gusta_original.png';

该代码块创建一个图像，将其源设置为保存Me Gusta图片的可靠服务器，并更新imgLoaded布尔值以指示现在可以绘制图像，而不是绘制图片on load。

canvas.onmousemove=function(e){
    var X,Y;
    if(e.clientX){
        X = e.clientX;
        Y = e.clientY;
    }else{
        X = e.pageX;
        Y = e.pageY;
    }
    mouse = [X,Y];
    trail.push(mouse);
};

此事件函数（在事件上运行的一种特殊类型的函数）绑定到画布，当它运行时，它会从传递到参数中的e变量中获取鼠标的位置。完成此操作后，它将坐标添加到trail数组中。

UPDATE = function(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    if(imgLoaded){
        for(var i = trail.length-50;i<trail.length;i++){
            if(trail[i]){
                ctx.drawImage(img,trail[i][0],trail[i][1],100,100);
            }
        }
    }
    setTimeout(UPDATE,1000/60);
};
UPDATE();

这就是处理其余部分的地方。函数被定义，然后立即运行，在函数完成后，它会以1000/60毫秒的延迟或60帧/秒的速度再次运行。现在我们可以看到一些画布上的动作了！

ctx.clearRect(0,0,width,height)清除整个画布上绘制的所有内容

现在，它通过请求imgLoaded变量来检查图像是否已加载。如果为true，它将继续循环遍历轨迹对象，并为每个坐标绘制图像。然而，这里发生了一些非常聪明的事情。我没有在0开始i，而是在trail.length-50开始，并在trail.length结束，因为在实践中，我们只想显示数组的一部分，而不是整个数组。

由于数组一开始是空的，它会检查布尔表达式trail[i]是否返回true。如果它这样做了，那么它就继续绘制这部分轨迹。如果没有，那么它会绕过它，同时避免出现错误。循环之后，它通过再次运行自己来结束。

至于我是如何隐藏光标并获得虚线边框的，那就是CSS或级联样式表。允许精确控制页面样式的语言，以及赋予这个网站魅力的原因。

我希望这比我之前给出的答案更有帮助，该答案位于以下行：

Before reading: I apologize if it seems like I misinterpreted the question. The question is about how to detect mouse events and this works as a great beginner example to demonstrate mouse events.

在javascript中，当您将鼠标悬停在图像上时，有几种方法可以使图像显示出来，一个很好的、简单的例子是：

HTML:

<div id="img">我是一个占位符<div>

Javascript：

var img=document.getElementById（'img'）var Main={IN:函数（）{img.innerHTML='<img src="img.jpg"><img>'}，OUT:函数（）{img.innerHTML="我是占位符"}}//我用了一个物体来保持函数的一致性img.onmouseover=主.INimg.onmouseout=主输出​//这些事件调用函数
相关文章：