作者：restVerify | 来源：互联网 | 2022-01-26 01:13
在很多网站上能看到图片跟随鼠标移动的JS特效，其实做法很简单，在这里与大家分享下。
在实现这个特效之前，需要了解JS中一个对象，event(事件对象)，对，只需了解这一个对象。它的方法属性我不多说了，想详细了解的童鞋点击这里，https://www.jb51.net/article/17266.htm。
我们用到的只有这个对象的两个属性，clientX与clientY，就是触发当前事件(可能是Click,也肯能是onmousemove等等事件)时鼠标在窗口区域的X,Y坐标(它们都是只读属性，所以只能get,不能set)，说到这里可能很多童鞋已经知道怎么做了，没错，就是这样!把得到的坐标赋值给图片定位属性中的Left与Top即可，很简单吧！下面提供一个实现的小Demo.
材料：两张你喜欢的图片，在这里就命名为"MUp.png"与"MDown.png"，为什么会有两张图片呢，这里还实现了一个鼠标按下变化图片的效果。
HTML Code is Here:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <div id="Main">
<img src="MUp.png" id="Img">
</div>
CSS Code is Here:
*{ margin:px; padding:px;}
#Img{ position:absolute; top:px; left:px;}
#Main{ background-color:#F; width:px; height:px;}
JS Code is Here:
window.Onload=Main;
var x="";
var y="";
function GetMouse(oEvent)
{
x=oEvent.clientX;
y=oEvent.clientY;
document.getElementById("Img").style.left=(parseInt(x)-)+"px";
document.getElementById("Img").style.top=y+"px";
}
function Main()
{
var ele=document.getElementById("Main");
ele.Onmousemove=function(){GetMouse(event);}
ele.Onmousedown=function(){ChangeBg("Img","MUp.png");}
ele.Onmouseup=function(){ChangeBg("Img","MDown.png");}
}
function ChangeBg(id,url)
{
document.getElementById(id).src=url;
}
|
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 
