鏈式的運動不了
<!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>緩沖運動</title>
<style>
*{ margin:0; padding:0}
div{ width:200px; height:200px; ?background:#f00; margin-bottom:10px; border:2px solid #999;opacity:.3; filter:alpha(opacity=30)}
</style>
<script>
window.onload=function(){
var Li1=document.getElementById('div1');
Li1.onmouseover=function(){
this.timer=null;
startMove(this,'opacity',100,function(){
startMove(this,'width',400);
});
}
}
var alpha=30;
function startMove(obj,attr,iTarget,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//1.取當前的值
var iCur=0;
if(attr=='opacity'){
iCur=Math.round(parseFloat(getStyle(obj,attr))*100);//如果統(tǒng)一用下面parseInt(getStyle(obj,attr))這個，獲取透明度時，都是0.幾，取出來就只能出來0，沒有透明度的變化；乘以100是配合filter;Math.round 是為了四舍五入
}else{
iCur=parseInt(getStyle(obj,attr));
}
//2.算速度
var speed=(iTarget-iCur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//3.檢測是否停止還是運動
if(iCur==iTarget){
clearInterval(obj.timer);
if(fn){
fn();
}
}
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){//兼容ie
return obj.currentStyle[attr];
}
else{//兼容火狐
return getComputedStyle(obj,false)[attr];
}
}
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div></div>
</body>
</html>
有什么問題？為什么只能改變透明度，多運動就不行了。
腳本那里提示這個：
TypeError: Argument 1 of Window.getComputedStyle does not implement interface Element.?
2017-08-15
謝謝老師們的解惑，原來把調(diào)用函數(shù)的this 提前賦值給一個變量，那這個變量就變成了oDiv了，下面用這個變量就能代表oDiv 這個對象了，哈哈哈，厲害?
2016-12-10
你的問題解決了嗎？到底是哪里出問題了呢？
2015-10-23
startMove(this,'opacity',100,function(){
startMove(this,'width',400);
});
主要是this的問題，提前把 this存在一個變量中
var _this =this;
startMove(_this,'opacity',100,function(){
startMove(_this,'width',400);
});
2015-06-14
<!DOCTYPE HTML>
<!--鏈式運動框架運動分階段進行當運動停止的時候執(zhí)行下一個運動-->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {width:100px;height:100px;background:red;filter:alpha(opacity:30);opacity:0.3;margin:10px;}
</style>
?
<script>
window.onload=function ()
{
?? ?var oDiv=document.getElementsByTagName('div');//先獲取div元素
?? ?for(var i=0;i<oDiv.length;i++){
?? ?oDiv[i].timer = null;
?? ?oDiv[i].onmouseover=function ()
?? ?{?? ?
?? ??? ?var _this = this;
?? ??? ?startMove(_this,'width',300,function(){//先是寬變300
?? ??? ??? ?startMove(_this,'height',300,function(){//當寬變300的時候即運動結(jié)束時候開啟另一個運動使其高變?yōu)?00
?? ??? ??? ??? ?startMove(_this,'opacity',100);//使透明度變成100原來是30
?? ??? ??? ?});
?? ??? ?
?? ??? ?});
?? ?};
?? ?oDiv[i].onmouseout=function ()//當鼠標移出的時候跟移進的時候效果相反即可。
?? ?{
?? ??? ?var _this = this;
?? ??? ?startMove(_this,'opacity',30,function(){
?? ??? ??? ?startMove(_this,'height',100,function(){
?? ??? ??? ??? ?startMove(_this,'width',100);
?? ??? ??? ?});
?? ??? ?
?? ??? ?});
?? ?};
};//以下是運動框架的內(nèi)容
function getStyle(obj, name)
{
?? ?if(obj.currentStyle)
?? ?{
?? ??? ?return obj.currentStyle[name];
?? ?}
?? ?else
?? ?{
?? ??? ?return getComputedStyle(obj, false)[name];
?? ?}
}
function startMove(obj, attr, iTarget, fnEnd)//比普通的運動框架寫多了一個函數(shù)說明下一階段要執(zhí)行的運動
{
?? ?clearInterval(obj.timer);
?? ?obj.timer=setInterval(function (){
?? ??? ?var cur=0;
?? ??? ?
?? ??? ?if(attr=='opacity')
?? ??? ?{
?? ??? ??? ?cur=Math.round(parseFloat(getStyle(obj, attr))*100);
?? ??? ?}
?? ??? ?else
?? ??? ?{
?? ??? ??? ?cur=parseInt(getStyle(obj, attr));
?? ??? ?}
?? ??? ?
?? ??? ?var speed=(iTarget-cur)/6;
?? ??? ?speed=speed>0?Math.ceil(speed):Math.floor(speed);
?? ??? ?
?? ??? ?if(cur==iTarget)
?? ??? ?{
?? ??? ??? ?clearInterval(obj.timer);
?? ??? ??? ?
?? ??? ??? ?if(fnEnd)fnEnd();
?? ??? ?}
?? ??? ?else
?? ??? ?{
?? ??? ??? ?if(attr=='opacity')
?? ??? ??? ?{
?? ??? ??? ??? ?obj.style.filter='alpha(opacity:'+(cur+speed)+')';
?? ??? ??? ??? ?obj.style.opacity=(cur+speed)/100;
?? ??? ??? ?}
?? ??? ??? ?else
?? ??? ??? ?{
?? ??? ??? ??? ?obj.style[attr]=cur+speed+'px';
?? ??? ??? ?}
?? ??? ?}
?? ?}, 30);
}
}
</script>
</head>
<body>
?? ?<div ></div>
?? ?<div></div>
?? ?<div></div>
</body>
</html>
2014-12-24
如果換成<ul><li></li><li></li><li></li></ul>,這樣豈不是用不了循環(huán)？
var aLi=document.getElementsByTagName('li');
for(var i=0; i<aLi.length; i++){
aLi[i].timer=null;
aLi[i].index=i;
aLi[i].alpha=30;
aLi[i].onmouseover=function(){
startMove(aLi[this.index],'opacity',100,function(){
startMove(aLi[this.index],'width',400);
});
}
}
2014-12-24
為什么老師的就可以。。。