JavaScript实现不用jQuery.eraser而实现图片擦除功能和刮刮乐效果 

<html>
<title>测试成功</title>
<body>

</body style="background-image:url(images/5.png)">
<script>
document.onmousemove=function(e){//鼠标移动触发
            var oDiv = document.createElement('div');
            var image =["images/2.jpg","images/3.jpg","images/4.jpg","images/5.png"];
            var CliX =e.clientX-50;
            var CliY =e.clientY-50;
    oDiv.style.width="200px";
    oDiv.style.height="200px";//定义橡皮擦的长和宽
    oDiv.id="qw";
    oDiv.style["border-radius"]="100px";
    oDiv.style.left=CliX+'px';
    oDiv.style.top=CliY+'px';
    oDiv.style.background="url("+image[3]+")"; 
    oDiv.style.backgroundPosition=-CliX+"px "+-CliY+"px";//这是最重要的一步显示div中图片的位置
    oDiv.style.position="absolute";
    document.body.appendChild(oDiv);
    
        }
</script>
</html>

 

废话不多说直接看图：

这个也可以做成刮刮乐的效果，就是在这个背景下添加一个div然后放一个图片，然后利用鼠标点击事件来实现

所需要的知识也就是html+javaScript

利用的是当鼠标移动时触发事件（JavaScript的思想就是事件）然后创造一个div来显示图片的局部，div的形状基本都是凸多边形(圆，正方形，长方形，其他的可以自己去百度)

然后通过鼠标的位置来定义div的位置和大小,最后实现显示图片局部的效果。

通过这个可以实现好多功能，比如说刮刮乐，橡皮擦，显示局部图片和鼠标跟踪显示等等

 

posted @ 2018-12-10 20:05  Anxc  阅读(688)  评论(0)  编辑  收藏  举报