<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
<script type="text/javascript">
</head>
<body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;}
div{
width:100px;height:100px;background-color:yellowgreen;border:2px solid red;/*padding:5px;*/float: left;margin:10px;/*position: absolute;*//*left:20px;top:30px;*/
}
#div3{
/*IE9-11、火狐和谷歌用opacity*/opacity: 0.5;/*IE用6-8的是filter*/filter: alpha(opacity:50);
}</style>
<script type="text/javascript">
window.οnlοad=function(){
var oDiv1=document.getElementById('div1');var oDiv2=document.getElementById('div2');var oDiv3=document.getElementById('div3');var oDiv4=document.getElementById('div4');var oDiv5=document.getElementById('div5');var oTxt1=document.getElementById('txt1');//offsetWidth和offsetHeight,获取的都是对象的盒模型（宽、border、padding）//offsetWidth=width+border+padding//offsetHeight=height+border+padding//所以我们如果用obj.style.width，但是它只能获取行间的样式，不能获取非行间样式（即样式表里的样式）//getStyle完全不考虑border、padding的大小function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name]; // IE用
}else{
return getComputedStyle(obj,false)[name]; // 火狐和谷歌用
}
}oDiv1.οnmοuseοver=function(){
startMove(oDiv1,'height',200);
}oDiv1.οnmοuseοut=function(){
startMove(oDiv1,'height',100);
}oDiv2.οnmοuseοver=function(){
startMove(oDiv2,'width',200);
}oDiv2.οnmοuseοut=function(){
startMove(oDiv2,'width',100);
}oDiv3.οnmοuseοver=function(){
startMove(oDiv3,'opacity',100);
}oDiv3.οnmοuseοut=function(){
startMove(oDiv3,'opacity',50);
}oDiv4.οnmοuseοver=function(){
startMove(oDiv4,'fontSize',40);
}oDiv4.οnmοuseοut=function(){
startMove(oDiv4,'fontSize',18);
}oDiv5.οnmοuseοver=function(){
startMove(oDiv5,'borderWidth',20);
}oDiv5.οnmοuseοut=function(){
startMove(oDiv5,'borderWidth',1);
}function startMove(obj,attr,iTarget){
clearInterval(obj.timer);obj.timer=setInterval(function(){
var cur=0;var speed=0;if(attr=='opacity'){
cur=Math.round(parseFloat(getStyle(obj,attr))*100);oTxt1.value=cur;
}else{
cur=parseInt(getStyle(obj,attr));
}speed=(iTarget-cur)/6;speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);if(cur==iTarget){
clearInterval(obj.timer);
}else{
if(attr=='opacity'){
obj.style[attr]=(cur+speed)/100;obj.style.filter='alpha:(opacity:'+(cur+speed)/100+')' ;
}else{
obj.style[attr]=(cur+speed)+'px';
}
}
},30);
}
}</script>
</head>
<body>
<input type="text" name="txt1" " id="txt1" value="" />
<div id="div1">
变高
</div>
<div id="div2">
变宽
</div>
<div id="div3">
透明度
</div>
<div id="div4">
字体大小
</div>
<div id="div5">
边框
</div></body>
</html>
4789
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
