HTML笔记 ·

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

好多人应该都玩过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>

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

参与评论