区块放大

最新推荐文章于 2024-08-08 11:12:05 发布

homandjing

最新推荐文章于 2024-08-08 11:12:05 发布

阅读量121

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/homandjing/article/details/84264641

版权

Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

51cto上看到的一个前端面试题（http://developer.51cto.com/art/201206/345184.htm）

要实现的效果：

里面的要求是用js，顺便也加了css的实现。最关键的呢，就是z-index.

<head>
	<style>
		body{ margin:0; padding:0}  
		div{background:#CCCCCC; position:absolute}  
		
		#first{width:100px; height:150px}  
		#second{top:160px;width:100px;height:150px}  
		#third{ width:200px; height:310px; left:110px} 
		
		#first:hover{width: 125px; height: 190px; background: green; z-index: 1}
	
	</style>
</head>
<body>
	<div id="first"></div>     
	<div id="second"></div>     
	<div id="third"></div> 
</body>
<script>
function zoom(id,x,y){ // 设置缩放函数参数：容器id、横向缩放倍数、纵向缩放倍数（等比例缩放时也可以设定一个参数）  
	var obj=document.getElementById(id); // 获取元素对象值  
	var dW=obj.clientWidth; // 获取元素宽度  
	var dH=obj.clientHeight; // 获取元素高度  
	//var oTop=obj.offsetTop;  
	//var oLeft=obj.offsetLeft;  
	obj.οnmοuseοver=function(){ // 鼠标移入  
		this.style.width=dW*x+"px"; // 横向缩放  
		this.style.height=dH*y+"px"; // 纵向缩放  
		this.style.backgroundColor="green"; //设置调试背景
		this.style.zIndex=1; // 设置z轴优先  
	}  
	obj.οnmοuseοut=function(){ // 鼠标移出，设回默认值  
		this.style.width="";  
		this.style.height="";  
		this.style.padding="";  
		this.style.backgroundColor="";  
		this.style.zIndex="";  
	}  
}  
//zoom("first",1.25,1.25);
zoom("second",1.25,1.25);  
zoom("third",1.25,1.25);
</script>