Question

任何想法如何实现与此相似的效果？

Answer 1

是的，使用mousemove事件

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);

Answer 2

事后看来，这是一个非常愚蠢的答案。因此，我将再次回答一个实际的例子，说明如何在HTML5中制作Flash文件中的内容。

如果你能完全理解它是如何工作的，那么在flash中制作相同的东西应该没有汗水。但是也要考虑我无意中运行的演示比flash演示更快，更稳定，因此您可以考虑将HTML5用于下一个项目。

我做的示例是here，不用多说，我会逐行将其分解，从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＆＃39; ActionScript，这基于JavaScript）将极大地帮助。

现在是JavaScript：

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

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

注意：在我测试过的每个浏览器中，您都不必使用document.getElementById()方法按ID获取项目。只要id存在于HTML中，就会生成一个变量列表，其中包含具有该属性的每个元素的id并以其命名on load。当然，这意味着您必须将<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图片的可靠服务器，而不是绘制图片on load，而是更新imgLoaded布尔值以指示图像现在可以画出来了。

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 fps的延迟运行。现在我们实际上看到了一些画布动作！

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

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

由于数组从空开始，它会检查布尔表达式trail[i]是否返回true。如果是，则继续绘制该部分路径。如果没有，那么它绕过它，避免错误。在循环之后，它会通过再次运行来完成。

至于我如何隐藏光标并获得虚线边框，CSS或层叠样式表。这种语言允许精确控制页面的样式，以及为这个网站提供什么样的pazzaz。

我希望这比我之前给出的答案更有帮助，这是在这一行之下：

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">
    i am a placeholder
    </div>

使用Javascript：


    var img = document.getElementById('img')
    var Main = {
    IN: function() {
        img.innerHTML = '<img src="img.jpg"></img>'
    },
    OUT: function() {
        img.innerHTML = 'I am a placeholder'
    }

    }
    //I used an object to hold the functions and keep them uniform

    img.onmouseover = Main.IN
    img.onmouseout = Main.OUT
    //these events call the function

Javascript - 使图像出现在光标处

2 个答案: