区域放大效果js代码

最新推荐文章于 2023-08-30 16:53:51 发布

weixin_41758067

最新推荐文章于 2023-08-30 16:53:51 发布

阅读量876

点赞数

分类专栏： cursor 鼠标移入放大效果文章标签： clientHeigh clientWidth onmo

本文链接：https://blog.csdn.net/weixin_41758067/article/details/80794734

版权

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
	<html>
	<head>
	<title>区域快放大的倍数</title>
	<style>
	*{margin:0;padding:0;}
	div{background:#cccccc;position:absolute;}
	#first{width:100px;height:150px;}
	#second{top:160px; width:100px;height:150px;}
	#third{left:110px; width:200px;height:310px;}
	</style>
	</head>
	<body>
	<div id="first"></div>
	<div id="second"></div>
	<div id="third"></div>
	<script type="text/javascript">
	function big(id,x,y){
	<!--获取ID-->
	var obj=document.getElementById(id);
	<!--获取ID的高和宽或者用offsetLeft，offsettop-->
	var dH=obj.clientHeight;
	var dW=obj.clientWidth;
	obj.οnmοuseοver=function(){
	this.style.height=dH*y+"px";
	this.style.width=dW*y+"px";
	this.style.backgroundColor="red";
	this.style.zIndex="1";
	}
	obj.οnmοuseοut=function(){
	this.style.height="";
	this.style.width="";
	this.style.backgroundColor="";
	this.style.zIndex="";
	}
	}
	<!--调用函数-->
	big("first",2,2);
	big("second",2,2)
	big("third",2,2);
	</script>
	</body>
	</html>

关注