為什么這個(gè)程序?qū)⒑瘮?shù)getStyle和startMove封裝在1個(gè)js文件里,透明度運(yùn)行顯示不正常,而在一個(gè)html文件就能正常運(yùn)行呢?
function getStyle(obj,attr){
? ? if(obj.currentStyle){
? ? return obj.currentStyle[attr];
? ? }else{
? ? return getComputedStyle(obj,false)[attr];
? ? }
}
function startMove(obj,attr,goal){
? ? ?clearInterval(obj.timer);
? ? ?obj.timer=setInterval(function(){
? ? ? var icce=0;
? ? ? if(attr=='opacity'){
? ? ? ? ?icce=Math.round(parseFloat(getStyle(obj,attr))*100);
? ? ? }else{
? ? ? icce=parseInt(getStyle(obj,attr));
? ? ? ? }
? ? ? var speed=(goal-icce)/8;
? ? ? speed=speed>0?Math.ceil(speed):Math.floor(speed);
? ? ? if (icce==goal){
? ? ? clearInterval(obj.timer);
? ? ? }else{
? ? ? if(attr=='opacity'){
? ? ? obj.style.filer='alpha(opacity:'+(icce+speed)+')';
? ? ? obj.style.opacity=(icce+speed)/100;
? ? ? }else{
? ? ? obj.style[attr]=icce+speed+'px';
? ? ? }
? ? ? }
? ? ?},30)
}
2016-06-20
aLi.onmouseover=function(){
? startMove(this,'width',600);
}
ali.onmouseout=function(){
startMove(this,'opacity',90);
mouseover改變寬度,mouseout改變透明度,要完美顯示,應(yīng)該還需要再加定時(shí)器吧。
2016-04-25
合到一起就能完美運(yùn)行顯示,這是為什么
2016-04-25
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
? ? ?ul,li{
? ? ? list-style: none;
? ? ?}
? ? ?li{
? ? ? ? width:400px;
? ? ? ? height: 200px;
? ? ? ? background: green; ? ? ?
? ? ? ? border-radius: 10px;
? ? ? ? border: 4px solid #111;
? ? ? ? filter: alpha(opacity:30);
? ? ? ? opacity: 0.3;
? ? ?}
</style>
<script src="js/move.js"></script>
<script>
window.onload=function(){
var aLi=document.getElementById('ali');
aLi.onmouseover=function(){
? startMove(this,'width',600);
}
ali.onmouseout=function(){
startMove(this,'opacity',90);
}
}
</script>
</head>
<body>
? <ul>
? <li id="ali"></li>
? </ul>
</body>
</html>
這個(gè)是與之相關(guān)的html