第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時(shí)綁定郵箱和手機(jī)立即綁定

JS動畫效果

vivian Web前端工程師
難度初級
時(shí)長 2小時(shí) 8分
學(xué)習(xí)人數(shù)
綜合評分9.60
537人評價(jià) 查看評價(jià)
9.8 內(nèi)容實(shí)用
9.6 簡潔易懂
9.4 邏輯清晰 
  • <!DOCTYPE?HTML>
<html>
<head>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
????<title>?p標(biāo)簽</title>
????<style?type='text/css'>

????????*{
????????????margin:0px;
????????????padding:0px;
????????}
????????li{
????????????width:200px;
????????????height:100px;
????????????margin:20px;
????????????list-style:none;
????????????background-color:yellow;
????????????opacity:?0.3;
????????????filter:?alpha(opacity:30);
????????}
????</style>
????<script?type='text/javascript'>
????????window.onload=function(){
????????????var?Li1=document.getElementById('li1');
????????????var?Li2=document.getElementById('li2');
????????????Li1.onmouseover=function(){
????????????????startMove(this,'opacity',100);
????????????}
????????????Li1.onmouseout=function(){
????????????????startMove(this,'opacity',30);
????????????}
????????????Li2.onmouseover=function(){
????????????????startMove(this,'height',400);
????????????}

????????????Li2.onmouseout=function(){
????????????????startMove(this,'height',100);
????????????}
????????}

????????function?getStyle(obj,attr){
????????????if(obj.currentStyle){
????????????????return?obj.currentStyle[attr];
????????????}else{

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

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

????????}

????????function?startMove(obj,attr,target){

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

????????????obj.timer=setInterval(function(){
????????????????var?icur=null;
????????????????if(attr=='opacity'){
????????????????????icur?=?Math.round(parseFloat(getStyle(obj,attr))*100);
????????????????}
????????????????else{
????????????????????icur=parseInt(getStyle(obj,attr));
????????????????}
????????????????var?speed=(target-icur)/8;
????????????????speed=speed>0?Math.ceil(speed):Math.floor(speed);

????????????????if(icur==target){
????????????????????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)
????????}
????</script>
</head>
<body>
<ul>
????<li?id='li1'></li>
????<li?id='li2'></li>
</ul>
</body>
</html>


    查看全部

  • move.js 框架

    function?getStyle(obj,?attr){
????if(obj.currentStyle){
????????return?obj.currentStyle[attr];
????}else{
????????return?getComputedStyle(obj,?false)[attr];
????}
}
function?startMove(obj,?attr,?iTarget,?fn){
????clearInterval(obj.timer);
????obj.timer?=?setInterval(function(){
????????//1、取當(dāng)前的值
????????var?icur?=?0;
????????if(attr?==?'opacity'){
????????????icur?=?Math.round(parseFloat(getStyle(obj,?attr))*100);
????????}else{
????????????icur?=?parseInt(getStyle(obj,?attr));
????????}
????????//2、算速度
????????var?speed?=?(iTarget?-?icur)?/?8;
????????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)
}

    JavaScript

    鼠標(biāo)移入先變寬，再變高，然后變透明度

    鼠標(biāo)移出先變透明度，再變高，最后變寬

    window.onload?=?function(){
????var?Li?=?document.getElementById('li1');
????Li.onmouseover?=?function(){
????????startMove(Li,?'width',?400,?function(){
????????????startMove(Li,?'height',?200,?function(){
????????????????startMove(Li,?'opacity',?100);
????????????});
????????});
????}
????Li.onmouseout?=?function(){
????????startMove(Li,?'opacity',?30,?function(){
????????????startMove(Li,?'height',?100,?function(){
????????????????startMove(Li,?'width',?200);
????????????});
????????});
????}
}



    查看全部

  • 運(yùn)動框架實(shí)現(xiàn)思路

    查看全部
  • fliter標(biāo)簽
    查看全部
    0 采集 收起 來源：JS透明度動畫

    2019-01-17

  • fliter標(biāo)簽
    查看全部
    0 采集 收起 來源：JS透明度動畫

    2019-01-17

  • 阿里巴巴矢量圖標(biāo)庫

    www.iconfont.cn

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

    2019-01-11

  • function startMove(obj,attr,iTarget,fn){ //添加一個(gè)回調(diào)函數(shù)fn clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=null; //1.判斷類型 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.檢測停止 if(icur==iTarget){ clearInterval(obj.timer); if(fn){ //判斷是否存在回調(diào)函數(shù),并調(diào)用 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){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }

    查看全部

  • <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title> p標(biāo)簽</title>

    <style type='text/css'>

    ? ? *{

    ? ? ? ? margin:0px;

    ? ? ? ? padding:0px;

    ? ? }

    ? ? li{

    ? ? ? ? width:200px;

    ? ? ? ? height:100px; ? ?

    ? ? ? ? margin:20px;

    ? ? ? ? list-style:none;

    ? ? ? ? background-color:yellow;

    ? ? }

    </style>

    <script type='text/javascript'>

    window.onload=function(){

    ? ? var Li1=document.getElementById('li1');

    ? ? var Li2=document.getElementById('li2');

    ? ? Li1.onmouseover=function(){

    ? ? ? ? startMove(this,'width',400);

    ? ? }

    ? ? Li1.onmouseout=function(){

    ? ? ? ? startMove(this,'width',200);

    ? ? }

    ? ? Li2.onmouseover=function(){

    ? ? ? ? startMove(this,'height',400);

    ? ? }

    ? ? Li2.onmouseout=function(){

    ? ? ? ? startMove(this,'height',100);

    ? ? }

    }

    function getStyle(obj,attr){

    if(obj.currentStyle){

    return obj.currentStyle[attr];

    }else{

    return getComputedStyle(obj,false)[attr];

    }

    }

    function startMove(obj,attr,target){

    ? ? clearInterval(obj.timer);

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

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

    ? ? ? ? var speed=(target-icur)/8;

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

    ? ? ? ? if(icur==target){

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

    ? ? ? ? }

    ? ? ? ? else{

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

    ? ? ? ? }

    ? ? },30)

    }

    </script>

    </head>

    <body>

    <ul>

    ? ? <li id='li1'></li>

    ? ? <li id='li2'></li>

    </ul>

    </body>

    </html>


    查看全部
  • window.onload?=?function(){
var?Li1?=?document.getElementById('li1');
Li1.timer?=?null;?//?為?需要運(yùn)動的對象添加一個(gè)計(jì)時(shí)器
//?var?Li2?=?document.getElementById('li2');
//?var?Li3?=?document.getElementById('li3');
//?alert(Math.round(0.3000009));
Li1.onmouseover?=?function(){
StartMove(this,?'opacity',?100);
};
Li1.onmouseout?=?function(){
StartMove(this,?'opacity',?30);
};
};
//?var?timer?=?null;?多物體運(yùn)動時(shí)不要使用公用值
//?var?alpha?=?30;
function?StartMove(obj,?attr,?Target){
clearInterval(obj.timer);
obj.timer?=?setInterval(function(){
var?attr_cur?=?0;?//?需要改變的屬性的當(dāng)前值
if?(attr?===?'opacity'){
attr_cur?=?parseFloat(getStyle(obj,?attr))?*?100;
}?else?{
attr_cur?=?parseInt(getStyle(obj,?attr));
}
var?speed?=?(Target?-?attr_cur)?/?8;
speed?=?speed?>?0???Math.ceil(speed)?:?Math.floor(speed);
if?(attr_cur?===?Target){
clearInterval(obj.timer);
}?else?if?(attr?===?'opacity'){
obj.style[attr]?=?(attr_cur?+?speed)/100;
obj.style.filter?=?'Alpha(opacity?=?'+?(attr_cur?+?speed)?+')';
}?else?{
obj.style[attr]?=?attr_cur?+?speed?+?'px';
}
},30);
};
function?getStyle(obj,?attr){
if?(obj.currentStyle){
return?obj.currentStyle[attr];
}?else?{
return?window.getComputedStyle(obj,?false)[attr];
}
}

    我用的Html5 沒有遇到透明度小數(shù)不精確的現(xiàn)象，我通過輸出觀察發(fā)現(xiàn)透明度確實(shí)有不精確的現(xiàn)象，但是經(jīng)過下一次變化后小數(shù)就會被清除掉。

    https://img1.sycdn.imooc.com//5c04da8600019e2f06770420.jpg

    查看全部

  • offsetLeft會越來越大，與目標(biāo)差值越來越下，speed越來越小。

    查看全部
    0 采集 收起 來源：JS緩沖動畫

    2018-11-09

  • 用offsetLeft是因?yàn)閘eft可讀寫，且offset返回的是數(shù)值，left返回的是字符串

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

    2018-11-09

  • 2、只要是多物體運(yùn)動所有的東西都不能共用。記住?。?！
    查看全部
    0 采集 收起 來源：JS多物體動畫

    2018-10-30

  • 1、對這節(jié)課取個(gè)好理解的名字，多個(gè)物體設(shè)置相同動畫，如何實(shí)現(xiàn)。
    查看全部
    0 采集 收起 來源：JS多物體動畫

    2018-10-30

  • 1、對這節(jié)課取個(gè)好理解的名字，多個(gè)物體設(shè)置相同動畫，如何實(shí)現(xiàn)。
    查看全部
  • 老師這個(gè)例子很好。用剩余路程的改變來作為變化速度的改變。很好的解法。學(xué)習(xí)了，將來類似的情況就用這個(gè)解法。
    查看全部
    0 采集 收起 來源：JS緩沖動畫

    2018-10-30

首頁上一頁1234567下一頁尾頁

舉報(bào)

0/150
提交
取消
課程須知
1.您至少已經(jīng)具備JavaSript的知識。2.您已經(jīng)具備一些開發(fā)經(jīng)驗(yàn)。
老師告訴你能學(xué)到什么？
1.使用定時(shí)器實(shí)現(xiàn)簡單動畫。2.如何一步步封裝庫。2.培養(yǎng)編程的思想。

微信掃碼，參與3人拼團(tuán)

微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號
友情提示：

您好，此課程屬于遷移課程，您已購買該課程，無需重復(fù)購買，感謝您對慕課網(wǎng)的支持！