|
move",function () {
bug.src="../img/b2.jpg"
})
img2.addEventListener("mousemove",function () {
bug.src="../img/bbbb.jpg"
})
img3.addEventListener("mousemove",function () {
bug.src="../img/bbbb1.jpg"
})
img4.addEventListener("mousemove",function () {
bug.src="../img/bbbb2.jpg"
})
img5.addEventListener("mousemove",function () {
bug.src="../img/bbbb3.jpg"
})
var bug1 = document.getElementById("bug1");
var ball = document.getElementById("ball");
var bug2= document.getElementById("bug2");
var rightImg = document.getElementById("pic");
img1.addEventListener("mousemove",function () {
rightImg.src="../img/b2.jpg"
})
img2.addEventListener("mousemove",function () {
rightImg.src="../img/bbbb.jpg"
})
img3.addEventListener("mousemove",function () {
rightImg.src="../img/bbbb1.jpg"
})
img4.addEventListener("mousemove",function () {
rightImg.src="../img/bbbb2.jpg"
})
img5.addEventListener("mousemove",function () {
rightImg.src="../img/bbbb3.jpg"
})
bug1.onmousemove =function (event) {
var e = event || window.event; //获取鼠标对象
ball.style.display="block";
bug2.style.display="block";
//鼠标居中
var x = (e.offsetX || e.layerX) - ball.offsetWidth/2//offsetWidth获取 ball的宽度
var y = (e.offsetY || e.layerY) - ball.offsetHeight/2
if(x<=0){
x=0;
}else if(x>box.clientWidth-ball.offsetWidth){
x=box.clientWidth-ball.offsetWidth
}
if(y<=0){
y=0;
}else if(y>box.clientHeight-ball.offsetHeight){
y=box.clientHeight-ball.offsetHeight
}
ball.style.left=x+"px";
ball.style.top=y+"px";
//四倍大小
rightImg.style.left= x*-4 +"px"
rightImg.style.top= y*-4 +"px";
this.onmouseout =function () {
ball.style.display="none";
bug2.style.display="none";
}
}
|