📄 s10_17.htm
字号:
<HTML>
<HEAD>
<META name="GENERATOR" content="Microsoft FrontPage 5.0">
<META name="ProgId" content="FrontPage.Editor.Document">
<TITLE>图片追随鼠标效果</TITLE>
</HEAD>
<BODY onmousemove="onMouseMove()">
<SCRIPT LANGUAGE="JavaScript">
var mouse_x=0,mouse_y=0;//鼠标位置
var image_x=0,image_y=0;//图片位置(其值可能含有小数部分)
var to_move=false; //是否移动图片
function onMouseMove()
{//在鼠标移动事件中,获取鼠标的最新位置
mouse_x = document.body.scrollLeft + event.x;
mouse_y = document.body.scrollTop + event.y;
if(!to_move)
{
to_move=true;
moveImage(3);
}
}
function moveImage(distance)
{//把图片向鼠标移近 distance 个象素
var dx = mouse_x - followed_image.style.pixelLeft - followed_image.style.pixelWidth/2;
var dy = mouse_y - followed_image.style.pixelTop - followed_image.style.pixelHeight/2;
var r = Math.sqrt(dx * dx + dy * dy); // 图片中心与鼠标的距离
to_move = (r>5);
if (to_move)
{
image_x = image_x + distance*dx/r;
image_y = image_y + distance*dy/r;
followed_image.style.pixelLeft = image_x;
followed_image.style.pixelTop = image_y;
setTimeout("moveImage("+distance+")", 100); //启动定时器,使图片逐步移近鼠标
}
}
</SCRIPT>
<DIV ID="followed_image" STYLE="position: absolute; top: 0; left: 0; width: 80; height: 59">
<A target="_blank" href="http://www.zsu.edu.cn">
<IMG SRC="angel.gif" border="0" width="96" height="80"></A></DIV>
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -