为什么宽高没有反应？透明度却有反应？
笑声怜人
2016-12-02 14:34
<title>无标题文档</title>
<style>
body,ul,li{
padding:0;
margin:0;}
ul,li{
list-style:none;}
ul li{
width:200px;
height:100px;
background:yellow;
margin-bottom:20px;
border:4px solid #000;
filter:alpha(opacity:30);
opacity:0.3;
}
</style>
<script>
window.onload = function(){ //window.onload的含义是
//var li1:定义变量，document：对象，指整个页面、getElementById:方法，用于获取id
var li1 = document.getElementById("li1");
var li2 = document.getElementById("li2");
var li3 = document.getElementById("li3");
var li4 = document.getElementById("li4");
li1.onmouseover = function(){ //鼠标移动到li1时
startMove(this,'height',400); //this指的是li1这个对象
}
li1.onmouseout = function(){
startMove(this,'height',100);
}
li2.onmouseover = function(){
startMove(this,'width',400);
}
li2.onmouseout = function(){
startMove(this,'width',200);
}
li3.onmouseover = function(){
startMove(this,'opacity',50); //opacity透明度
}
li3.onmouseout = function(){
startMove(this,'opacity',100);
}
li4.onmouseover=function(){
startMove(this,"width",400,function(){
startMove(this,"height",200,function(){
startMove(this,"opacity",100);
});
});
}
li4.onmouseout=function(){
startMove(this,"opacity",30,function(){
startMove(this,"height",100,function(){
startMove(this,"width",200);
});
});
}
}
function getStyle(obj,attr){ //两种获取的方法，解决浏览器兼容的问题
if(obj.currentStyle){
return obj.currentStyle.attr;
}
else{
return getComputedStyle(obj,false)[attr];
}
}
var alpha = 30;
function startMove(obj,attr,iTarget,fn){
clearInterval(obj.timer);//清除定时器
obj.timer=setInterval(function(){
var icur = 0;//判断是否是透明度，透明度没有单位，使用写一个函数来判断
if(attr == 'opacity'){
icur= Math.round(parseInt(getStyle(obj,attr))*100);//Math.round:四舍五入,去除小数点尾巴。parseInt() 函数可解析一个字符串，并返回一个整数。
}
else{
icur= parseInt(getStyle(obj,attr));
}
var icur=parseInt(getStyle(obj,attr));
var speed = (iTarget-icur)/8;
speed = speed>0?Math.ceil(speed):Math.floor(speed); //Math.floor()向下取整；Math.ceil()向上取整；Math.round()四舍五入；
if(icur == iTarget) {
clearInterval(obj.timer);
}
else if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(icur +speed)+')';
obj.style.opacity = (icur + speed)/100;
}
else{
obj.style.attr = icur+ speed+'px';
}
},30) //30是30毫秒
}
</script>
</head>
<body>
<ul>
<li id="li1"></li>
<li id="li2"></li>
<li id="li3"></li>
<li id="li4"></li>
</ul>
</body>
</html>
1回答
-
- stone310
- 2016-12-04 09:46:03
obj.style.attr = icur+ speed+'px'改成obj.style[attr] = icur+ speed+'px';
JS动画效果
113925 学习 · 1443 问题
相似问题