通过鼠标点击在点击处出现图片
OECOM
发布于 2020-07-01 09:54:20
发布于 2020-07-01 09:54:20
代码可运行
运行总次数：0
代码可运行
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 删除
评论
登录后参与评论
暂无评论
推荐阅读
相关推荐
面试官：用纯 JS 将 HTML 页面转换为图像，有什么思路
更多 >
腾讯云开发者
