大家來找茬
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style>
#div1{
?? ?width:200px;
?? ?height:200px;
?? ?background:#C6F;
?? ?border:4px solid #000;
?? ?opacity:0.3;
?? ?filter=alpha(opacity:30);
?? ?}
</style>
<script>
var div1=document.getElementById("div1");
div1.onmouseover=function(){
?? ?startMove(this,"opacity",100);
?? ?}
div1.onmouseout=function(){
?? ?startMove(this,"opacity",30);
?? ?}
var alpha=30;
function startMove(obj,attr,iTarget){
?? ?clearInterval(obj,timer);
?? ?obj.timer=setInterval(function(){
?? ??? ?var icur=0;
?? ??? ?if(attr=="opacity"){
?? ??? ??? ?icur=Math.round(parseFloat(getStyle(obj,attr)))*100;
?? ??? ??? ?}
?? ??? ?else{
?? ??? ??? ?icur=parseInt(getStyle(obj,attr));
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ?//var icur=parsetInt(getStyle(obj,attr));
?? ??? ?var speed=(iTarget-icur)/8;
?? ??? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
?? ??? ?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)
?? ?}
function getStyle(obj,attr){
?? ?if(obj.currentStyle){
?? ??? ?return obj.currentStyle[attr];//currentStyle針對IE瀏覽器
?? ??? ?}
?? ?else{
?? ??? ?return getComputedStyle(obj,false)[attr];//getComputedStyle針對firefox瀏覽器
?? ??? ?}
?? ?
?? ?}
</script>
</head>
?? ?
<body>
<div id="div1"></div>
</body>
</html>
2015-09-07
哈哈~我是看完這個(gè)視頻的前一半來評論的~然后接著看視頻的后半段~原來老師用的就是Math.round。。。。我這還以為你自己想的方法呢。。。
2015-09-07
首先你用了一個(gè)Math.round這個(gè)方法，非常棒。解決了老師該例onmouseout返回0.3出現(xiàn)的小bug。
但是呢，你太馬虎了。
首先css style里?filter:alpha(opacity=30);
然后定義function startMove中?：clearInterval(obj,timer);應(yīng)為obj.timer。但即使你改成了obj.timer還是不行。
因?yàn)檫@之前并沒有去定義這個(gè)timer.我這里在函數(shù)外面定義 timer=null；因?yàn)檫@里我們只調(diào)用這一個(gè)函數(shù)，不需要考慮多物體運(yùn)動(dòng)的例子，然后也要改?timer=setInterval();完美運(yùn)轉(zhuǎn)。下面是我改過的，稍微變動(dòng)了一下順序，順便用window.onload來加載：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<style>
#div1{
? ? width:200px;
? ? height:200px;
? ? background:#C6F;
? ? border:4px solid #000;
? ? opacity:0.3;
? ? filter:alpha(opacity=30);
? ? }
</style>
<script>
window.onload=function(){
var div1=document.getElementById("div1");
div1.onmouseover=function(){
? ? startMove(this,"opacity",100);
? ? }
div1.onmouseout=function(){
? ? startMove(this,"opacity",30);
? ? }
}
function getStyle(obj,attr){
? ? if(obj.currentStyle){
? ? ? ? return obj.currentStyle[attr];
? ? ? ? }
? ? else{
? ? ? ? return getComputedStyle(obj,false)[attr];
? ? ? ? }
? ? }
var alpha=30;
var timer=null;
function startMove(obj,attr,iTarget){
? ? clearInterval(timer);
? ? timer=setInterval(function(){
? ? ? ? var icur=0;
? ? ? ? if(attr=="opacity"){
? ? ? ? ? ? icur=Math.round(parseFloat(getStyle(obj,attr))*100);
? ? ? ? ? ? }
? ? ? ? else{
? ? ? ? ? ? icur=parseInt(getStyle(obj,attr));
? ? ? ? ? ? }
? ? ? ? var speed=(iTarget-icur)/8;
? ? ? ? speed=speed>0?Math.ceil(speed):Math.floor(speed);
? ? ? ? if(icur==iTarget){
? ? ? ? ? ? clearInterval(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)
? ? }
</script>
</head>
? ??
<body>
<div id="div1"></div>
</body>
</html>