為什么字體的大小設(shè)置不了,呼叫大神,謝謝
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>同時(shí)運(yùn)動</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
ul li{
width: 400px;
height: 300px;
font-size: 12px;
background: pink;
border:4px solid blue;
filter:alpha(opacity:30);
opacity: 0.3;
}
</style>
<script src="js/move.js"></script>
<script type="text/javascript">
window.onload=function(){
var li=document.getElementById('li1');
li.onmouseover=function(){
startmove(li,{width:600,height:500,opacity:100,font:20});
}
li.onmouseout=function(){
startmove(li,{width:400,height:300,opacity:30})
}
}
</script>
</head>
<body>
<ul>
<li id="li1">dd</li>
</ul>
</body>
</html>
2017-01-10
將font-size改為fontSize,使用駝峰寫法
2017-01-10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>同時(shí)運(yùn)動</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
ul li{
width: 400px;
height: 300px;
font-size: 12px;
background: pink;
border:4px solid blue;
filter:alpha(opacity:30);
opacity: 0.3;
}
</style>
<script src="js/move.js"></script>
<script type="text/javascript">
window.onload=function(){
var li=document.getElementById('li1');
li.onmouseover=function(){
startmove(li,{width:600,height:500,opacity:100},function(){
startmove(li,{font-size:18});
});
}
li.onmouseout=function(){
startmove(li,{width:400,height:300,opacity:30})
}
}
</script>
</head>
<body>
<ul>
<li id="li1">dd</li>
</ul>
</body>
</html>
function getstyle(obj,attr){
if (obj.currentStyle) {
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
//startmove(obj,{attr1:target1,attr2:target2}):同時(shí)傳入多個(gè)屬性與屬性值
function startmove(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var flag=true;//假設(shè)所有的運(yùn)動都到達(dá)目標(biāo)值
for(var attr in json){
//取當(dāng)前值
var icur=0;
if (attr=='opacity') {
icur=Math.round(parseFloat(getstyle(obj,attr))*100);
}else{
icur=parseInt(getstyle(obj,attr));
}
//算速度
var speed=(json[attr]-icur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//檢測停止
//某一個(gè)屬性到達(dá)目標(biāo)值之后就會清除定時(shí)器,這時(shí)候如果其中有一個(gè)屬性比較快到達(dá)目標(biāo)值時(shí),那么就會觸發(fā)清除定時(shí)器,導(dǎo)致其它的屬性還沒有到達(dá)目標(biāo)值,就被迫停止了。所以得讓所有得屬性到達(dá)目標(biāo)值時(shí)才能關(guān)閉定時(shí)器
if (icur!=json[attr]) {
flag=false;
}
//如果屬性是透明度的話要用if另做判斷,因?yàn)橥该鞫葲]有單位,和其他屬性不一樣
if (attr=='opacity') {
obj.style.filter='alpha(opacity:'+(icur+speed)+')';
obj.style.opacity=(icur+speed)/100;
}else{
obj.style[attr]=icur+speed+'px';
}
}
//如果所有的運(yùn)動都到達(dá)目標(biāo)值,那么就觸發(fā)觸發(fā)清除定時(shí)器,如果有外加函數(shù),那么就再執(zhí)行外加函數(shù)fn()
if (flag==true) {
clearInterval(obj.timer);
//如果有外加函數(shù),就執(zhí)行
if (fn) {
fn();
}
}
},30)
}
2017-01-10
這問題貌似是少了單位px,或者em
2017-01-10
startmove(li,{width:600,height:500,opacity:100,font:20});
startmove(li,{width:600,height:500,opacity:100,font-size:20});
2017-01-10
font-size:20