元素缩放

<style>
div{background:#CCCCCC;text-align:center;}
#first{float:left;width:100px; height:150px; line-height:150px;}
#second{clear:left;float:left;margin-top:10px;width:100px;height:150px; line-height:150px;}
#third{zoom:1; width:200px;margin-left:110px; height:310px; line-height:310px;}
</style>
</head>

<body>

<div id="first">A</div>
<div id="second">B</div>
<div id="third">C</div>
</body>
<script>
window.onload = function() {
function zoom(id,x,y){
// 设置缩放函数参数:容器id、横向缩放倍数、纵向缩放倍数(等比例缩放时也可以设定一个参数)
var obj=document.getElementById(id);
// 获取元素对象值
var dW=obj.clientWidth;
// 获取元素宽度
var dH=obj.clientHeight;
// 获取元素高度
//var dW=obj.offsetTop;
//var dH=obj.offsetLeft;
obj.οnmοuseοver=function(){
// 鼠标移入
this.style.width=dW*x+"px";
// 横向缩放
this.style.height=dH*y+"px";
// 纵向缩放
this.style.backgroundColor="#f00";
// 设置调试背景

//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>

转载于:https://www.cnblogs.com/liangxuru/p/5698982.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值