亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

JS動畫效果

vivian Web前端工程師
難度初級
時長 2小時 8分
學習人數
綜合評分9.60
537人評價 查看評價
9.8 內容實用
9.6 簡潔易懂
9.4 邏輯清晰 
  • <!DOCTYPE?html>
<html>

<head>
????<meta?charset="UTF-8">
????<title>淘寶jQ運動</title>
????<style?type="text/css">
????*?{
????????padding:?0;
????????margin:?0;
????}

????#move?{
????????width:?240px;
????????margin:?10px?auto;
????????background-color:?#f5f4f4;
????????border:?1px?solid?#ccc;
????????overflow:?hidden;
????}

????#move?a?{
????????float:?left;
????????display:?inline-block;
????????width:?58px;
????????height:?25px;
????????border:?1px?solid?#ddd;
????????border-radius:?3px;
????????background:?#fff;
????????text-align:?center;
????????margin:?10px?10px;
????????position:?relative;
????????padding-top:?40px;
????????color:?#9c9c9c;
????????font-size:?12px;
????????text-decoration:?none;
????????line-height:?25px;
????????overflow:?hidden;
????}

????#move?a?i?{
????????position:?absolute;
????????top:?20px;
????????left:?0;
????????display:?inline-block;
????????width:?100%;
????????text-align:?center;
????????opacity:?1;
????????filter:?alpha(opacity=100);
????????/*transition:?all?.3s?ease-in;*/
????}

????#move?a:hover?{
????????color:?#f00;
????}

????#move?a:hover?.i1{
????????-webkit-animation:?taobao?.5s?ease-in-out?.1s;
????????-o-animation:?taobao?.5s?ease-in-out?.1s;
????????animation:?taobao?.5s?ease-in-out?.1s;
????}

????/*#move?a:hover?.i1?{*/
????????/*top:?-25px;*/
????????/*opacity:?0;*/
????/*}*/
????@keyframes?taobao?{
????????from{
????????????top:?20px;
????????????opacity:?1;
????????}
????????50%{
????????????top:?-25px;
????????????opacity:?0;
????????}
????????75%{
????????????top:?30px;
????????????opacity:?0;
????????}
????????to{
????????????top:?20px;
????????????opacity:?1;
????????}
????}

????#move?img?{
????????border:?none;
????}
????</style>
????<!--<script?type="text/javascript"?src="jQ/jquery-1.4.4.min.js"></script>-->
????<!--?<script>
????????$(function(){
????????????$('#move?a').mouseenter(function(){
????????????????$(this).find('i').animate({top:'-25px',opacity:'0'},300,'swing',function(){
????????????????????$(this).css({top:'30px'})
????????????????????$(this).animate({top:'20px',opacity:'1'},300,'swing')
????????????????})
????????????})
????????})
????</script>?-->
</head>

<body>
????<div?id='move'>
????????<a?href='#'><i?class="i1"><img?src="images/tickets.png"></i><p>彩票</p></a>
????????<a?href='#'><i?class="i2"><img?src="images/film.png"></i><p>電影</p></a>
????????<a?href='#'><i?class="i3"><img?src="images/fork.png"></i><p>外賣</p></a>
????????<a?href='#'><i><img?src="images/fly.png"></i><p>繳費</p></a>
????????<a?href='#'><i><img?src="images/game.png"></i><p>游戲</p></a>
????????<a?href='#'><i><img?src="images/protection.png"></i><p>理財</p></a>
????</div>
</body>

</html>


    查看全部
    3 采集 收起 來源：jQuery動畫案例

    2018-06-09 

  • <!DOCTYPE?html>
<html>

<head>
????<meta?charset="UTF-8">
????<title>淘寶js運動</title>
????<style?type="text/css">
????*?{
????????padding:?0;
????????margin:?0;
????}

????#move?{
????????width:?240px;
????????margin:?10px?auto;
????????background-color:?#f5f4f4;
????????border:?1px?solid?#ccc;
????????overflow:?hidden;
????}

????#move?a?{
????????float:?left;
????????display:?inline-block;
????????width:?58px;
????????height:?25px;
????????border:?1px?solid?#ddd;
????????border-radius:?3px;
????????background:?#fff;
????????text-align:?center;
????????margin:?10px?10px;
????????position:?relative;
????????padding-top:?40px;
????????color:?#9c9c9c;
????????font-size:?12px;
????????text-decoration:?none;
????????line-height:?25px;
????????overflow:?hidden;
????}

????#move?a?i?{
????????position:?absolute;
????????top:?20px;
????????left:?0;
????????display:?inline-block;
????????width:?100%;
????????text-align:?center;
????????opacity:?1;
????????filter:?alpha(opacity=100);
????}

????#move?a:hover?{
????????color:?#f00;
????}

????#move?img?{
????????border:?none;
????}
????</style>
????<script?type="text/javascript"?src="../move.js"></script>
????<script>
????????window.onload=function(){
????????????var?oMove=document.getElementById('move'),
????????????????aList=oMove.getElementsByTagName('a');

????????????for(var?i=0;i<aList.length;i++){
????????????????//onmouseenter不會影響子元素，不會引發事件冒泡
????????????????aList[i].onmouseenter=function(){
????????????????????var?_this=this.getElementsByTagName('i')[0];
????????????????????startMove(_this,{top:-25,opacity:0},function(){
????????????????????????_this.style.top=30+'px';
????????????????????????startMove(_this,{top:20,opacity:100});
????????????????????});
????????????????}
????????????}
????????}
????</script>
</head>

<body>
????<div?id='move'>
????????<a?href='#'><i><img?src="images/tickets.png"></i><p>彩票</p></a>
????????<a?href='#'><i><img?src="images/film.png"></i><p>電影</p></a>
????????<a?href='#'><i><img?src="images/fork.png"></i><p>外賣</p></a>
????????<a?href='#'><i><img?src="images/fly.png"></i><p>繳費</p></a>
????????<a?href='#'><i><img?src="images/game.png"></i><p>游戲</p></a>
????????<a?href='#'><i><img?src="images/protection.png"></i><p>理財</p></a>
????</div>
</body>
    //完美運動框架

//獲取css屬性
function?getStyle(obj,?attr)?{
????if?(obj.currentStyle)?{
????????//針對IE8獲取元素某項css屬性
????????return?obj.currentStyle[attr];
????}?else?{
????????//針對其他瀏覽器，false為偽類選項
????????return?getComputedStyle(obj,?false)[attr];
????}
}

//若傳入fn(用于函數回調)執行鏈式運動
//startMove(obj,{attr1,iTarget1,attr2,iTarget2},?fn)
function?startMove(obj,?json,?fn)?{

????clearInterval(obj.timer);

????obj.timer?=?setInterval(function()?{
????????var?flag?=?true;?//每次循環初始化flag值,否則flag無法為true，定時器無法真正結束
????????//for()in遍歷循環,將json中以attr屬性循環，json[attr]為它的對應值
????????for?(var?attr?in?json)?{
????????????//1.取當前值
????????????var?iCur?=?0;//初始化
????????????if?(attr?==?'opacity')?{
????????????????iCur?=?Math.round(parseFloat(getStyle(obj,?attr))?*?100);
????????????}?else?{
????????????????iCur?=?parseInt(getStyle(obj,?attr));
????????????}

????????????//2.算速度
????????????var?speed?=?(json[attr]?-?iCur)?/?5;
????????????//speed類整數變量需要判斷取整
????????????speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed);

????????????//3.檢測停止
????????????//只要有一個運動目標沒有完成，則flag為false，未完成運動繼續執行
????????????//已達到的運動目標會因為speed最終等于0而“停止”，沒有實際停止定時器
????????????if?(iCur?!=?json[attr])?{
????????????????flag?=?false;
????????????}
????????????if?(attr?==?'opacity')?{
????????????????obj.style.filter?=?'alpha(opacity:'?+?(iCur?+?speed)?+?')';
????????????????obj.style.opacity?=?(iCur?+?speed)?/?100;
????????????}?else?{
????????????????//用style[]追加變量，因為attr傳入的是字符所以不能用style.xxx
????????????????obj.style[attr]?=?iCur?+?speed?+?'px';
????????????}
????????}
????????//如果flag成立，即所有運動目標完成，則停止定時器，判斷是否有回調函數存在
????????if?(flag)?{
????????????clearInterval(obj.timer);
????????????if?(fn)?{
????????????????//為了不讓fn()在回調時指向window，用call()改變this指向
????????????????//var?that=this也可以
????????????????fn.call(obj);
????????????}
????????}
????},?10)//時間間隔,變更達到增減動畫速度
}


    查看全部
    11 采集 收起 來源：JS動畫案例

    2018-06-09

  • ss

    <!DOCTYPE?html>

<html>

????<head>

????????<meta?charset="UTF-8">

????????<title>多物體運動</title>

????????<style?type="text/css">

????????????*{

????????????????padding:0;

????????????????margin:0;

????????????}

????????????ul,li{

????????????????list-style:?none;

????????????}

????????????ul?li{

????????????????width:200px;

????????????????height:100px;
????????????????line-height:?100px;

????????????????background-color:?chartreuse;

????????????????margin-bottom:20px;
????????????????opacity:?0.3;
????????????????border:?2px?solid?#000;
????????????????font-size:?18px;
????????????????color:?#000;

????????????}

????????</style>
????????<script?type="text/javascript">
????????????window.onload=function(){
????????????????var?aLi=document.getElementsByTagName('li');

????????????????for(var?i=0;i<aLi.length;i++){
????????????????????aLi[i].timer=null;
????????????????????//width運動與opacity運動分開設定定時器
????????????????????aLi[i].timerOpacity=null;
????????????????????aLi[i].alpha=30;
????????????????????aLi[i].onmouseover=function(){
????????????????????????startMove(this,400,100);
????????????????????}
????????????????????aLi[i].onmouseout=function(){
????????????????????????startMove(this,100,20);
????????????????????}
????????????????}
????????????????
????????????????//?var?timer=null;
????????????????//設置共用定時器會導致多個目標爭搶同一個定時器，導致每一個之前觸發的物體運動無法結束，多物體運動不能設置共用變量，所以需要為每個li設置單獨定時器
????????????????function?startMove(obj,iTarget,iOpacity){
????????????????????clearInterval(obj.timer);
????????????????????clearInterval(obj.timerOpacity);
????????????????????obj.timer=setInterval(function(){
????????????????????????//這里不使用offsetWidth是因為它包含了邊框等寬度，無法使元素本身的width達到目標值
????????????????????????var?speed=(iTarget-parseInt(getStyle(obj,'width')))/8;
????????????????????????speed=speed>0?Math.ceil(speed):Math.floor(speed);
????????????????????????if(parseInt(getStyle(obj,'width'))==iTarget){
????????????????????????????clearInterval(obj.timer);
????????????????????????}else{
????????????????????????????//parseInt()取整數數字，去掉屬性單位
????????????????????????????obj.style.width=parseInt(getStyle(obj,'width'))+speed+'px';
????????????????????????????obj.style.fontSize=parseInt(getStyle(obj,'fontSize'))+speed/10+'px';
????????????????????????}
????????????????????},30)

????????????????????function?getStyle(obj,attr){
????????????????????????if(obj.currentStyle){
????????????????????????????//針對IE獲取元素某項css屬性
????????????????????????????return?obj.currentStyle[attr];
????????????????????????}else{
????????????????????????????//針對其他瀏覽器
????????????????????????????return?getComputedStyle(obj,false)[attr];
????????????????????????}
????????????????????}

????????????????????obj.timerOpacity=setInterval(function(){
????????????????????????//?var?oSpeed=(iOpacity-obj.style.opacity)/10;
????????????????????????//變速的值使得無法達成obj.alpha==iOpacity(小數存在)，先使用勻速
????????????????????????if(obj.alpha>iOpacity){
????????????????????????????oSpeed=-10;
????????????????????????}else{
????????????????????????????oSpeed=10;
????????????????????????}
????????????????????????if(obj.alpha==iOpacity){
????????????????????????????clearInterval(obj.timerOpacity);
????????????????????????}else{
????????????????????????????obj.alpha+=oSpeed;
????????????????????????????obj.style.opacity=obj.alpha/100;
????????????????????????}
????????????????????},30)
????????????????}
????????????}
????????</script>

????</head>

????<body>

????????<ul>

????????????<li>ABC</li>

????????????<li>EFG</li>

????????????<li>123</li>

????????</ul>

????</body>

</html>


    查看全部
    1 采集 收起 來源：獲取樣式

    2018-06-08 

  • <!DOCTYPE?html>
<html>
?<head>
??<title>?new?document?</title>?
??<style>
???????*{padding:0;margin:0;}
???????#div1{height:200px;width:200px;position:relative;background:#F00;left:-200px;top:0px;}
???????#div2{height:200px;width:200px;background:#66F;?filter:alpha(opacity:50);opacity:0.5;-moz-opacity:0.5;}
???????#share{height:32px;line-height:16px;width:15px;?background:#03F;color:#fff;position:absolute;left:200px;top:85px;}
???????#ul?li{height:50px;width:200px;?background:#FF3;margin:10px?0px;border:4px?solid?#39F;opacity:1;?filter:alpha(opacity:100);?cursor:pointer;}
??</style>?
??<script>
??window.onload?=?function(){
??????var?oDiv=document.getElementById("div1");
??????var?aDiv=document.getElementById("div2");
??????var?aLi=document.getElementsByTagName("li");
??????//鼠標移入,div1滑出
??????oDiv.onmouseover?=?function(){
??????????startMove(oDiv,{left:0});
??????????}
??????//鼠標移開,div1滑回
??????oDiv.onmouseout?=?function(){
??????????startMove(oDiv,{left:-200});
??????????}
??????//鼠標移入,div2透明度變100
??????aDiv.onmouseover?=?function(){
??????????startMove(aDiv,{opacity:100});
??????????}
??????aDiv.onmouseout?=?function(){
??????????startMove(aDiv,{opacity:30});
??????????}
??????//黃塊組合運動
??????for(i=0;i<aLi.length;i++){?
??????????aLi[i].timer=null;???//給每個li單獨添加定時器，避免公用定時器
??????????aLi[i].onmouseover?=?function(){
??????????????var?nextE=this;
??????????????startMove(this,{width:400,height:100},function(){
??????????????????startMove(nextE,{opacity:50});
??????????????????});
??????????????}
??????????aLi[i].onmouseout?=?function(){
??????????????startMove(this,{opacity:100,width:390,height:50});
??????????????}
??????????}
??????}
?????//var?timer=null;
????//json
//????var?json?=?{a:2,b:7,c:0};
//????for(var?i?in?json){
//????????//alert(i);????//依次彈出變量a,b,c
//????????alert(json[i]);??//依次彈出變量的值2,7,0
//????????}
??
??
//Start運動框架
????//json語句
????//????var?json?=?{a:2,b:7,c:0};
????//????for(var?i?in?json){
????//????????//alert(i);????//依次彈出變量a,b,c
????//????????alert(json[i]);??//依次彈出變量的值2,7,0
????//????????}
???//startMove(obj,{attr1:itarget1,attr2:itarget2},fn)????//attr表屬性，iTarget表目標值，多個屬性目標值組成json數組
??function?startMove(e,json,fn){????//e表對象，json表{attr1:itarget1,attr2:itarget2,···}，fn表回調函數
??????clearInterval(e.timer);????????//清除定時器，e.timer表示給每個對象定義一個定時器，避免共用一個定時器
??????e.timer?=?setInterval(function(){
???????????for(var?attr?in?json){???//定義attr為json中的變量，即屬性，遍歷所有屬性。避免一個屬性變化完后，其他屬性也停止變化
???????????????var?flag?=?true;?????//假設所有屬性都已經滿足icur?==?json[attr]時，flag為true
?????????????//取當前的值
??????????????var?icur=0;
??????????????if(attr?==?'opacity'){
??????????????????icur=Math.round(parseFloat(getStyle(e,attr))*100);?
??????????????????}
??????????????else{
??????????????????icur=parseInt(getStyle(e,attr));??????????????
??????????????????}
??????????????//算速度
??????????????var?speed=(json[attr]-icur)/5;????
??????????????speed=speed>0?Math.ceil(speed):Math.floor(speed);
??????????????//檢測停止
??????????????if(icur?!=?json[attr]){???//json[attr]表示iTarget,即如果當前存在屬性值不等于目標值,flag值為false
??????????????????flag=false;????
??????????????????}
??????????????if(attr?==?'opacity'){
??????????????????e.style.opacity=(icur+speed)/100;
??????????????????e.style.filter="alpha(opacity:"+icur+speed+")";
??????????????????}
??????????????else{
??????????????????e.style[attr]=icur+speed+"px";
??????????????????}
????????????}?
??????????if(flag){?????//flag為true，即所有當前屬性值等于目標值時時，執行下面的方法
??????????????clearInterval(e.timer3);
??????????????if(fn){
??????????????????fn();
??????????????????}
????????????}
??????},50)
??????}
??????//獲取樣式,兼容處理
??function?getStyle(obj,attr){
??????if(obj.currentStyle){
??????????return?obj.currentStyle[attr];
??????????}
??????else{
??????????return?getComputedStyle(obj,false)[attr];
??????????}
??????}
//End運動框架
??</script>
?</head>?
?<body>?
???????<div?id="div1">
???????????<span?id="share">分享</span>
???????</div>
???????<div?id="div2"></div>
???????<ul?id="ul">
???????????<li?id="li1"></li>
???????????<li?id="li2"></li>
???????????<li?id="li3"></li>
???????</ul>
?</body>
</html>
    查看全部
  • //Start運動框架
????//json語句
????//????var?json?=?{a:2,b:7,c:0};
????//????for(var?i?in?json){
????//????????//alert(i);????//依次彈出變量a,b,c
????//????????alert(json[i]);??//依次彈出變量的值2,7,0
????//????????}
???//startMove(obj,{attr1:itarget1,attr2:itarget2},fn)????//attr表屬性，iTarget表目標值，多個屬性目標值組成json數組
??function?startMove(e,json,fn){????//e表對象，json表{attr1:itarget1,attr2:itarget2,···}，fn表回調函數
??????clearInterval(e.timer);????????//清除定時器，e.timer表示給每個對象定義一個定時器，避免共用一個定時器
??????e.timer?=?setInterval(function(){
???????????for(var?attr?in?json){???//定義attr為json中的變量，即屬性，遍歷所有屬性。避免一個屬性變化完后，其他屬性也停止變化
???????????????var?flag?=?true;?????//假設所有屬性都已經滿足icur?==?json[attr]時，flag為true
?????????????//取當前的值
??????????????var?icur=0;
??????????????if(attr?==?'opacity'){
??????????????????icur=Math.round(parseFloat(getStyle(e,attr))*100);?
??????????????????}
??????????????else{
??????????????????icur=parseInt(getStyle(e,attr));??????????????
??????????????????}
??????????????//算速度
??????????????var?speed=(json[attr]-icur)/5;????
??????????????speed=speed>0?Math.ceil(speed):Math.floor(speed);
??????????????//檢測停止
??????????????if(icur?!=?json[attr]){???//json[attr]表示iTarget,即如果當前存在屬性值不等于目標值,flag值為false
??????????????????flag=false;????
??????????????????}
??????????????if(attr?==?'opacity'){
??????????????????e.style.opacity=(icur+speed)/100;
??????????????????e.style.filter="alpha(opacity:"+icur+speed+")";
??????????????????}
??????????????else{
??????????????????e.style[attr]=icur+speed+"px";
??????????????????}
????????????}?
??????????if(flag){?????//flag為true，即所有當前屬性值等于目標值時時，執行下面的方法
??????????????clearInterval(e.timer3);
??????????????if(fn){
??????????????????fn();
??????????????????}
????????????}
??????},50)
??????}
??????//獲取樣式,兼容處理
??function?getStyle(obj,attr){
??????if(obj.currentStyle){
??????????return?obj.currentStyle[attr];???//IE
??????????}
??????else{
??????????return?getComputedStyle(obj,false)[attr];???//FireFox及谷歌
??????????}
??????}
//End運動框架
    查看全部

  • getStyle()方法：opacity(透明度)需另外判斷

    function startMove3(e,attr,iTarget){
    ?? ?? clearInterval(e.timer3);
    ?? ?? e.timer3 = setInterval(function(){
    ?? ??? ?? var icur=0;
    ?? ??? ?? if(attr == 'opacity'){
    ?? ??? ??? ?? icur=Math.round(parseFloat(getStyle(e,attr))*100);
    ?? ??? ??? ?? }
    ?? ??? ?? else{
    ?? ??? ?????? icur=parseInt(getStyle(e,attr));?? ??? ??? ? ?
    ?? ??? ??? ?? }
    ?? ??? ?? var speed=(iTarget-icur)/10;
    ?? ??? ?? speed=speed>0?Math.ceil(speed):Math.floor(speed);
    ?? ??? ?? if(icur == iTarget){
    ?? ??? ??? ?? clearInterval(e.timer3);
    ?? ??? ??? ?? }
    ?? ??? ?? else{
    ?? ??? ??? ?? if(attr == 'opacity'){
    ?? ??? ??? ??? ?? e.style.opacity=(icur+speed)/100;
    ?? ??? ??? ??? ?? e.style.filter="alpha(opacity:"+icur+speed+")";
    ?? ??? ??? ??? ?? }
    ?? ??? ??? ?? else{
    ?? ??? ??? ??? ?? e.style[attr]=icur+speed+"px";
    ?? ??? ??? ? //?? e.style.height=icur+speed+"px";
    ?? ??? ??? ??? ?? }
    ?? ??? ??? ? ?
    ?? ??? ??? ?? }
    ?? ??? ?? },50)
    ?? ?? }
    ? //獲取樣式,兼容處理
    ? function getStyle(obj,attr){
    ?? ?? if(obj.currentStyle){
    ?? ??? ?? return obj.currentStyle[attr];
    ?? ??? ?? }
    ?? ?? else{
    ?? ??? ?? return getComputedStyle(obj,false)[attr];
    ?? ??? ?? }
    ?? ?? }

    查看全部

  • 運動框架實現思路

    1. 速度（改變值left、right、width、height、opacity）

    2. 緩沖（先快后慢，先慢后快等）

    3. 多物體運動

    4. 任意值變化（寬變、高變等）

    5. 鏈式運動（執行一個運動后，緊接著執行另一個運動）

    6. 同時運動（所有屬性同時變化）


    查看全部
  • Html+css的制作。加上前臺頁面。制作前臺出網頁
    查看全部

  • 代碼截圖

    查看全部
    0 采集 收起 來源：JS速度動畫

    2018-05-16

  • 主要內容

    查看全部

  • 獲取樣式值封裝函數

    function getStyle(obj,attr){

    ????if(obj.currentStyle){

    ????????return obj.currentStyle[attr];

    ????}else{

    ????????return getComputedStyle(obj,false)[attr]

    ????}

    }


    查看全部
    0 采集 收起 來源：獲取樣式

    2018-05-02

  • 主要是多物體運動，所有元素值都不能共用。

    查看全部
    0 采集 收起 來源：JS多物體動畫

    2018-05-02

  • function startMove(obj,json,fn){

    ? ? ? ? ? ? ? ? ?var flag =true;? //設定所有假設都成立

    ? ? ? ? ?clearInterval(obj.timer);

    ? ? ? ? ? ? obj.timer =setInterval(function(){

    ? ? ? ? ? ?

    ? ? ? ? ? ? ? ? for(attr in json){

    ? ? ? ? ? ? ? ? var icur =0;

    ? ? ? ? ? ? if(attr =='opacity'){

    ? ? ? ? ? ? var icur =parseFloat(getStyle(obj,attr)*100);

    ? ? ? ? ? ? }else{

    ? ? ? ? ? ? var icur =parseInt(getStyle(obj,attr));

    ? ? ? ? ? ? }

    ? ? ? ? ? ? var speed =(json[attr] - icur)/8;

    ? ? ? ? ? ? speed =speed>0? Math.ceil(speed) : Math.floor(speed);

    ? ? ? ? ? ? if(json[attr] != icur){

    ? ? ? ? ? ? flag = false;

    ? ? ? ? ? ? ? ?}? ? ?// 如果遍歷所有只要有不等于的假設不成立，繼續執行該進行的操作。?

    ? ? ? ? ? ?

    ? ? ? ? ? ? if(attr == 'opacity'){

    ? ? ? ? ? ? obj.style.filter = "alpha(opacity:"+(icur +speed)+")";

    ? ? ? ? ? ? obj.style.opacity= (icur+speed)/100;

    ? ? ? ? ? ? }else{

    ? ? ? ? ? ? obj.style[attr] = icur +speed+'px';

    ? ? ? ? ? ? }

    ? ? ? ??

    ? ? ? ? ? ? ? ? if(flag){

    ? ? ? ? ? ? ? ? ? ? ? ? clearInterval(obj.timer);

    ? ? ? ? ? ? ? ? ? ? ? ? ?if(fn){

    ? ? ? ? ? ? ? ? ? ? ? ? fn();

    ? ? ? ? ? ? ? ? ? }

    ? ? ? ? ? ? ? ? ? ? ? ? ?}

    ? ? ? ? ? ?

    ? ? ? ? ?}

    ? ? ? ? ? ? },30)

    ? ? ? ? ? ? ??

    }

    function getStyle(obj,attr){

    if(obj.currentStyle){

    return obj.currentStyle[attr];

    }? //基于IE

    else{

    return getComputedStyle(obj,false)[attr];

    }

    }


    查看全部

  • 轉發：JS動畫框架及案例鏈接? ? https://blog.csdn.net/qq_15096707/article/details/50571021

    查看全部
    0 采集 收起 來源：JS動畫案例

    2018-05-07

  • 1、所有主流瀏覽器(IE,Firefox,Opera,Chrome,Safari)都支持opacity屬性。

    ?注意：IE8和早期版本支持另一種過濾器屬性。像：filter:Alpha(opacity=100) ?

    2、由于無法獲取對象的透明度，所以可通過變量儲存。（var alpha=初始值 alpha+=speed）

    3、IE：style.filter=‘alpha(opactiy:’+值+')' ? ?非IE .style.opactiy=值/100（火狐或者chrome關于透明度的滿值1，IE是100）

    查看全部
    3 采集 收起 來源：JS透明度動畫

    2018-04-12

首頁上一頁45678910下一頁尾頁

舉報

0/150
提交
取消
課程須知
1.您至少已經具備JavaSript的知識。2.您已經具備一些開發經驗。
老師告訴你能學到什么？
1.使用定時器實現簡單動畫。2.如何一步步封裝庫。2.培養編程的思想。

微信掃碼，參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號
友情提示：

您好，此課程屬于遷移課程，您已購買該課程，無需重復購買，感謝您對慕課網的支持！