图片跟随鼠标移动事件
代码:
//鼠标move事件,传入图片地址作于显示
function moveImgSelector(path) {
var mos = getMousePos(), wc = document.getElementById("imgdiv");
with (wc.style) {
left = mos.x;
top = mos.y;
}
wc.style.display="block";
document.getElementById("img").src=path;
}
//获取鼠标位置
function getMousePos() {
var e = window.event;
var mouse_x = e.clientX;
var mouse_y = e.clientY;
var scroll_x = window.pageXOffset || document.body.scrollLeft;
var scroll_y = window.pageYOffset || document.body.scrollTop;
var win_width = document.body.offsetWidth;
var win_height = document.body.offsetHeight;
var image_width = 400;
var image_height = 400;
if(mouse_x < 2){
move_to_x = scroll_x + 2;
}else if(mouse_x > win_width - image_width - 20){
move_to_x = scroll_x + mouse_x - image_width - 20;
}else{
move_to_x = scroll_x + mouse_x;
}
if(mouse_y < 2){
move_to_y = scroll_y + 2;
}else if(mouse_y > win_height - image_height - 20){
move_to_y = scroll_y + mouse_y - image_height - 20;
} else {
move_to_y = scroll_y + mouse_y;
}
return {x:move_to_x , y :move_to_y}
}
//离开事件,清除悬浮的imgdiv
function cleanImgDiv(){
document.getElementById("imgdiv").style.display="none";
}