图片随鼠标移动

最新推荐文章于 2021-06-04 03:02:11 发布

deerlu

最新推荐文章于 2021-06-04 03:02:11 发布

阅读量128

点赞数

分类专栏： javascript 文章标签： JavaScript .net HTML ViewUI

本文链接：https://blog.csdn.net/deerlu/article/details/83400835

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文介绍了一个名为 MovePicture 的 JavaScript 脚本，该脚本能实现图片元素跟随鼠标移动的功能，并兼容 Netscape 和 Internet Explorer 等浏览器。通过检测浏览器类型来调整脚本的行为，确保跨浏览器的一致体验。

摘要由CSDN通过智能技术生成

Html代码：


<html>
	<head>
		<title>Move Picture</title>
		<script type="text/javascript" src="MovePicture.js">

		</script>
	</head>
	<body>
	</body>
</html>

MovePicture.js 代码：


var image="picture.png";
				var newtop=15;
				var newleft=15;
				if (navigator.appName == "Netscape") {
				layerStyleRef="layer.";
				layerRef="document.layers";
				styleSwitch="";
				}
				else
				{
				layerStyleRef="layer.style.";
				layerRef="document.all";
				styleSwitch=".style";
				}

				function helpor_net() {

					layerName = 'iit';

					eval('var curElement='+layerRef+'["'+layerName+'"]');
					eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
					eval('curElement'+styleSwitch+'.visibility="visible"');
					eval('newleft=document.body.clientWidth-curElement'+styleSwitch+'.pixelWidth');
					eval('newtop=document.body.clientHeight-curElement'+styleSwitch+'.pixelHeight');
					eval('height=curElement'+styleSwitch+'.height');
					eval('width=curElement'+styleSwitch+'.width');
					width=parseInt(width);
					height=parseInt(height);
					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'+styleSwitch+'.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'+styleSwitch+'.pixelTop=newtop');
					}

				document.onmousemove = helpor_net;

				if (navigator.appName == "Netscape") {

				}else{
					document.write('<div ID="OuterDiv">');
					document.write('<img ID="iit" src="'+image+'" STYLE="position:absolute;TOP:20pt;LEFT:20pt;Z-INDEX:20;visibility:hidden;">');
					document.write('</div>')
				}