JAVASCRIPT实现鼠标拖尾特效

<h1 class="block_title">&nbsp;</h1>
<div class="post">
<div class="postcontent">
<div id="cnblogs_post_body" class="blogpost-body blogpost-body-html">
<p>let count=2;&nbsp; //鼠标检测参数</p>
<p><em id="__mceDel">document.onmousemove=function(e){<br />&nbsp; &nbsp; count--;<br />&nbsp; &nbsp; if (count&lt;=0){<br />&nbsp; &nbsp; &nbsp; &nbsp; let img=document.createElement("img");<br />&nbsp; &nbsp; &nbsp; &nbsp; let width=40;<br />&nbsp; &nbsp; &nbsp; &nbsp; img.width=width;</em></p>
<p><em id="__mceDel">//自主添加图片<br />&nbsp; &nbsp; &nbsp; &nbsp; img.src="img/R-C.gif";<br />&nbsp; &nbsp; &nbsp; &nbsp; img.style.left=e.pageX-width/2+"px";<br />&nbsp; &nbsp; &nbsp; &nbsp; img.style.top=e.pageY-width/2+"px"<br />&nbsp; &nbsp; &nbsp; &nbsp; img.style.position="absolute";<br />&nbsp; &nbsp; &nbsp; &nbsp; let id=setInterval(function(){<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width-=2;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.width=width;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(width);<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.style.left=img.offsetLeft+1+"px";<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.style.top=img.offsetTop+1+"px";<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.style.width=width;<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(width&lt;=5){<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; img.remove(id)<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; clearInterval(id);<br />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<br />&nbsp; &nbsp; },100)<br />&nbsp; &nbsp; document.body.appendChild(img);<br />&nbsp; &nbsp; count=2<br />&nbsp; &nbsp; }<br />}</em></p>
<div><em>&nbsp;</em></div>

</div>
<div class="clear">&nbsp;</div>
<div id="blog_post_info_block">&nbsp;</div>

</div>

</div>

posted @ 2023-04-23 09:48  向众神祈祷  阅读(118)  评论(1)    收藏  举报