Js实现跟随鼠标的半透明图片

2024-09-05 12:22:20

字体：大中小

来源：转载

供稿：网友

JavaScript代码实现跟随鼠标的半透明图片，其实就是一个鼠标跟随效果，用CSS的滤镜将图片设置成了半透明状态，代码简单，JS初学者可作为学习实例来参考。

<HTML><HEAD><TITLE>跟随鼠标的半透明图片</TITLE><STYLE type=text/css>.STYLE1 {	font-size: 40px;	font-family: "华文行楷";	color: #990000;}.STYLE2 {	font-size: 30px;	font-weight: bold;	font-family: "华文彩云";	color: #FF33FF;}</STYLE><META http-equiv=Content-Type content="text/html; charset=gb2312"></HEAD><BODY bgColor=#fef4d9><CENTER><TABLE borderColor=#FF0000 border=5 borderlight="green">  <TBODY>  <TR>    <TD align=middle>真实图片为：<IMG src="/d/file/p/2024/09-05/f0df904bd071bc6200eadca91036733c.gif">       <STYLE type=TEXT/CSS>.tm {	FILTER: Alpha(Opacity=50)}</STYLE><DIV id=Layer1 style="LEFT: 409px; WIDTH: 14px; POSITION: absolute; TOP: 131px; HEIGHT: 31px"><IMG src="/d/file/p/2024/09-05/f0df904bd071bc6200eadca91036733c.gif" width="130" height="60" class=tm></DIV><SCRIPT>function move_layer(){Layer1.style.left=event.clientX+document.body.scrollLeft+10;Layer1.style.top=event.clientY+document.body.scrollTop+10;top.status="鼠标X="+event.clientX + " sX=" + document.body.scrollLeft + " 鼠标Y=" + event.clientY+ "  sY=" + document.body.scrollTop;}document.onmousemove =move_layer;</SCRIPT></TD></TR></TBODY></TABLE></CENTER></BODY></HTML>

上一篇：JavaScript鼠标特效-跟随鼠标旋转的流星

下一篇：鼠标点击散开的网页特效