4.13 图片跟随鼠标.htm

来自「这些源代码介绍JavaScript实现一些有趣的特效」· HTM 代码 · 共 53 行

HTM

53 行

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
<SCRIPT LANGUAGE="JavaScript">
   var newtop=0;
   var newleft=0;
   divStyleRef="layer.style.";
   layerRef="document.all";
   mystyle=".style";
   function doMouseMove() 
   {
	layerName = 'myimg';    //获取包装图片的div
	eval('var curElement='+layerRef+'["'+layerName+'"]');
	eval(layerRef+'["'+layerName+'"]'+mystyle+'.visibility="hidden"');
	eval('curElement'+mystyle+'.visibility="visible"');
        //设置div的显示位置-坐标和高度、宽度
	eval('newleft=document.body.clientWidth-curElement'+mystyle+'.pixelWidth');
	eval('newtop=document.body.clientHeight-curElement'+mystyle+'.pixelHeight');
	eval('height=curElement'+mystyle+'.height');
	eval('width=curElement'+mystyle+'.width');
	width=parseInt(width);
	height=parseInt(height);
       //鼠标移出边界时的div位置的判断
	if (event.clientX > (document.body.clientWidth - 5 - width))
	{
	newleft=document.body.clientWidth + document.body.scrollLeft - 5 - width;
	}
	else
	{
	newleft=document.body.scrollLeft + event.clientX;
	}
	eval('curElement'+mystyle+'.pixelLeft=newleft');
	if (event.clientY > (document.body.clientHeight - 5 - height))
	{
	newtop=document.body.clientHeight + document.body.scrollTop - 5 - height;
	}
	else
	{
	newtop=document.body.scrollTop + event.clientY;
	}
	eval('curElement'+mystyle+'.pixelTop=newtop');
    }
    document.onmousemove = doMouseMove;    //绑定鼠标移动事件
    //动态输出div和图像-默认情况下图像隐藏
    document.write('<div ID=mydiv>');
    document.write('<img ID=myimg src="LOGO1.gif"  STYLE="position:absolute;TOP:0pt;LEFT:0pt;width=103;height=28;Z-INDEX:2;visibility:hidden;">')
    document.write('</div>')
</SCRIPT>
</head>
<body>
</body>
</html>

4.13 图片跟随鼠标.htm - 源码说明

本页面展示了「这些源代码介绍JavaScript实现一些有趣的特效」中的 4.13 图片跟随鼠标.htm 源码文件，采用 HTM 编程语言编写，共 53 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫下载站收录了大量与JavaScript相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C

搜索代码Ctrl + F

全屏模式F11

增大字号Ctrl + =

减小字号Ctrl + -

显示快捷键?