通过鼠标点击在点击处出现图片

OECOM

发布于 2020-07-01 17:54:20

4.2K0

发布于 2020-07-01 17:54:20

文章被收录于专栏：OECOM

2015-04-24 01:43:42

好多人应该都玩过4399小游戏里的找不同游戏吧，当你点对的时候他会在你鼠标点击处出现一个动画，点击错的时候也会出现相应的图片。下面我来说一下在网页里这种效果怎么实现吧。

首先我们需要在鼠标按下的时候获取到鼠标的坐标，然后通过js添加一个图片元素，图片位置通过鼠标当前坐标来设置，然后再设置一定时间后让他隐藏就可以了。下面来看看代码吧。

<html>
<head>
<script defer type="text/javascript">
var x;
function insertWithin(idstr,url) {/*idstr: 图片标签的id，url:插入的图片的路径*/
            //指定结点 id
            var node = document.getElementsByTagName("body")[0];
            //创建
            var NewDiv = document.createElement("div");
            //对div设置定位  
            NewDiv.style.position = "absolute";
            NewDiv.style.left = event.clientX-100;
            NewDiv.style.top = event.clientY-100;
            //创建div内加入的内容
            var Newimg = document.createElement("img");
            //对图片设置路径和img的id
            Newimg.src = url;
            Newimg.id = idstr;
            //追加一个新的子结点
            NewDiv.appendChild(Newimg);
            //追加一个新的结点
            node.appendChild(NewDiv);
			x = NewDiv;
			setTimeout("x.style.display='none';",100);
        }
    </script>
</head>
<body style=" width:100%; height:100%" onclick="insertWithin('img1','img/api.png');">
</body>
<html>

代码非常短小，而且里面都有注释，我就不多说。下面提供演示地址，大家可以看一下。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2015-04-24，如有侵权请联系 cloudcommunity@tencent.com 删除

动画