商品放大镜代码

最新推荐文章于 2023-01-30 17:11:52 发布

wsf_123456

最新推荐文章于 2023-01-30 17:11:52 发布

阅读量103

点赞数

分类专栏：代码收藏文章标签：放大镜

本文链接：https://blog.csdn.net/wsf_123456/article/details/84247208

版权

代码收藏专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#div1{ width:300px; height:300px; background:red; position:relative;overflow:hidden}
</style>
<script>
window.οnlοad=function()
{
	var div1=document.getElementById("div1");	
	var odiv2=null;
	
	div1.οnmοuseοver=function(ev)
	{	
		if(odiv2 != null){
			return;
		}
		odiv2=document.createElement("div");
		odiv2.style.width="100px";
		odiv2.style.height="100px";
		odiv2.style.background="green";
		odiv2.style.position="absolute";
		odiv2.style.cursor="move";
		div1.appendChild(odiv2);

		//刚创建div的时候设置一下div的位置，否则div默认在左上角
		var oEvent=ev||event;
		var X=oEvent.clientX-div1.offsetLeft - 50;//鼠标在div的中央
		var Y=oEvent.clientY-div1.offsetTop - 50;
		odiv2.style.left=X+"px";
		odiv2.style.top=Y+"px";
		
		odiv2.οnmοusemοve=function(ev)
		{
			var oEvent=ev||event;
			var X=oEvent.clientX-div1.offsetLeft - 50;
			var Y=oEvent.clientY-div1.offsetTop - 50;
			odiv2.style.left=X+"px";
			odiv2.style.top=Y+"px";
		}

		odiv2.οnmοuseοut=function(){
			div1.removeChild(odiv2);
			odiv2 = null;
		}
	}
}
</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>

wsf_123456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
商品放大镜代码

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&
复制链接

扫一扫

专栏目录