孙宇晨将参加特朗普的晚宴,曰本真人性做爰毛片

首頁(yè) 免費(fèi)課 JS動(dòng)畫效果筆記

JS動(dòng)畫效果

            
                vivian
            
            Web前端工程師
                    
                難度初級(jí)
            
                時(shí)長(zhǎng) 2小時(shí) 8分
            
                學(xué)習(xí)人數(shù)
            
綜合評(píng)分9.60
                            537人評(píng)價(jià)
                        查看評(píng)價(jià)
                                9.8
                                內(nèi)容實(shí)用
                            
                                9.6
                                簡(jiǎn)潔易懂
                            
                                9.4
                                邏輯清晰

最熱最新

qq_心安有個(gè)你_0

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ??? ?<style type="text/css">
?? ??? ??? ?*{
?? ??? ??? ?margin: 0;
?? ??? ??? ?padding: 0;
?? ??? ?}
?? ??? ?#div1{
?? ??? ??? ?width: 200px;
?? ??? ??? ?height: 200px;
?? ??? ??? ?background: red;
?? ??? ??? ?filter: alpha(opcity:30);
?? ??? ??? ?opacity: 0.3;
?? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div id="div1">
?? ??? ??? ?
?? ??? ?
?? ??? ?</div>
?? ?</body>
?? ?<script>
?? ??? ?
?? ??? ?window.onload=function(){
?? ??? ??? ?var oDiv=document.getElementById('div1');
?? ??? ??? ?
?? ??? ??? ?oDiv.onmouseover=function(){
?? ??? ??? ??? ?startMove(100);
?? ??? ??? ?}
?? ??? ??? ?oDiv.onmouseout=function(){
?? ??? ??? ??? ?startMove(30);
?? ??? ??? ?}

?? ??? ?}
?? ??? ?var timer=null;
?? ??? ?var alpha=30;
?? ??? ?function startMove(iTarget){
?? ??? ??? ?var oDiv=document.getElementById('div1');
?? ??? ??? ?clearInterval(timer);
?? ??? ??? ?
?? ??? ??? ?timer=setInterval(function (){
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ??? ?var speed=0;
?? ??? ??? ??? ?if(alpha>iTarget){
?? ??? ??? ??? ??? ?speed=-10;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?else{
?? ??? ??? ??? ??? ?speed=10;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?if(alpha==iTarget){
?? ??? ??? ??? ??? ?clearInterval(timer);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?else{
?? ??? ??? ??? ??? ?alpha+=speed;
?? ??? ??? ??? ??? ?oDiv.style.filter='alpha(opactiy:'+alpha+')';
?? ??? ??? ??? ??? ?oDiv.style.opacity=alpha/100;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ?});
?? ??? ?}
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ??? ?
?? ?</script>
?? ?
</html>

查看全部

0 采集收起來(lái)源：JS透明度動(dòng)畫
2019-07-27
qq_心安有個(gè)你_0

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title></title>
?? ??? ?<style type="text/css">
?? ??? ??? ?*{
?? ??? ??? ?margin: 0;
?? ??? ??? ?padding: 0;
?? ??? ?}
?? ??? ?#div1{
?? ??? ??? ?width: 200px;
?? ??? ??? ?height: 200px;
?? ??? ??? ?background: red;
?? ??? ??? ?position: relative;
?? ??? ??? ?left: -200px;
?? ??? ??? ?top: 0;
?? ??? ?}
?? ??? ?#div1 span{
?? ??? ??? ?width: 20px;
?? ??? ??? ?height: 50px;
?? ??? ??? ?background: blue;
?? ??? ??? ?position: absolute;
?? ??? ??? ?left: 200px;
?? ??? ??? ?top:75px;
?? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?
?? ??? ?<div id="div1">
?? ??? ??? ?<span id="share">xc</span>
?? ??? ?</div>
?? ??? ?
?? ??? ?
?? ?</body>
?? ?
?? ?<script>
?? ??? ?
?? ??? ?window.onload=function(){
?? ??? ??? ?var oDiv=document.getElementById('div1');
?? ??? ??? ?
?? ??? ??? ?oDiv.onmouseover=function(){
?? ??? ??? ??? ?startMove(10,0);
?? ??? ??? ?}
?? ??? ??? ?oDiv.onmouseout=function(){
?? ??? ??? ??? ?startMove1(10,-200);
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?
?? ??? ?}
?? ??? ?var timer=null;
?? ??? ?function startMove(sleep,taiger){
?? ??? ??? ?clearInterval(timer)
?? ??? ??? ?var oDiv=document.getElementById('div1');
?? ??? ??? ?timer=setInterval(function(){
?? ??? ??? ??? ?if(oDiv.offsetLeft==taiger){
?? ??? ??? ??? ??? ?clearInterval(timer);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?else{
?? ??? ??? ??? ??? ?oDiv.style.left=oDiv.offsetLeft+sleep+'px';
?? ??? ??? ??? ?}
?? ??? ??? ?},30);
?? ??? ?}
?? ??? ?
?? ??? ?function startMove1(sleep,taiger){
?? ??? ??? ?clearInterval(timer)
?? ??? ??? ?var oDiv=document.getElementById('div1');
?? ??? ??? ?timer=setInterval(function(){
?? ??? ??? ??? ?if(oDiv.offsetLeft<= taiger){
?? ??? ??? ??? ??? ?clearInterval(timer);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?else{
?? ??? ??? ??? ??? ?oDiv.style.left=oDiv.offsetLeft-sleep+'px';
?? ??? ??? ??? ?}
?? ??? ??? ?},30);
?? ??? ?}
?? ??? ?
?? ?</script>
?? ?
?? ?
?? ?
</html>

查看全部

2 采集收起來(lái)源：JS速度動(dòng)畫
2019-07-27
qq_心安有個(gè)你_0

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>緩沖運(yùn)動(dòng)</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#div1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span{
width: 20px;
height: 50px;
background-color: blue;
position:absolute;
left: 200px;
top: 75px;
}
</style>

<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");
//鼠標(biāo)移入事件
oDiv.onmouseover=function(){
starMove(0);
}
//鼠標(biāo)移出事件
oDiv.onmouseout=function(){
starMove(-200);
}

var timer = null;
function starMove(target){
clearInterval(timer);
var oDiv=document.getElementById("div1");
//創(chuàng)建一個(gè)定時(shí)器timer
timer=setInterval(function(){

var speed =(target - oDiv.offsetLeft)/20;
speed = speed>0?Math.ceil(speed):Math.floor(speed);

if(oDiv.offsetLeft==target){
clearIntral(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
}
</script>

</head>
<body>
<div id = div1>
<span>分享</span>
</div>
</body>
</html>

查看全部

0 采集收起來(lái)源：JS緩沖動(dòng)畫
2019-07-27
qs九點(diǎn)九分 03:32

111111

查看全部

0 采集收起來(lái)源：JS動(dòng)畫效果課程介紹
2019-06-21
甜橙可愛(ài)多

當(dāng)加了一個(gè)定時(shí)器后，為什么不清除定時(shí)器，動(dòng)畫也能停止？
注意：在緩沖運(yùn)動(dòng)中，一定是在緩沖運(yùn)動(dòng)中，speed的值為0后動(dòng)畫停止了，此時(shí)定時(shí)器實(shí)際上還在運(yùn)行中。

查看全部

0 采集收起來(lái)源：完美運(yùn)動(dòng)框架
2019-04-23
甜橙可愛(ài)多

Math.floor(num)向下取整
Math.ceil(num)向上取整
0.5向上取整為1，向下取整為0
-0.5向上取整為0，向下取整為-1

查看全部

0 采集收起來(lái)源：JS緩沖動(dòng)畫
2019-04-22
howevert 11:31

getStyle,上面針對(duì)IE瀏覽器，下面針對(duì)火狐瀏覽器。獲取css樣式的值

查看全部

0 采集收起來(lái)源：獲取樣式
2019-04-05

慕粉0815224883

<!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;
????????}
????</style>
????<script?type='text/javascript'>
????????window.onload=function(){
????????????var?oLi=document.getElementsByTagName('li');
????????????for(var?i=0;i<oLi.length;i++){
????????????????oLi[i].onmouseover=function(){
????????????????????var?that=this;
????????????????????startMove(this,{width:400,height:200},function(){
????????????????????????startMove(that,{opacity:100});
????????????????????});
????????????????}
????????????????oLi[i].onmouseout=function(){
????????????????????var?that=this;
????????????????????startMove(this,{height:100,width:200},function(){
????????????????????????startMove(that,{opacity:30})
????????????????????});
????????????????}
????????????}
????????}
????????function?getStyle(obj,attr){
????????????if(obj.currentStyle){
????????????????return?obj.currentStyle[attr];
????????????}else{
????????????????return?getComputedStyle(obj,false)[attr];
????????????}
????????}
????????function?startMove(obj,json,fn){
????????????clearInterval(obj.timer);
????????????obj.timer=setInterval(function(){
????????????????for(var?attr?in?json){
????????????????????var?flag?=?true;
????????????????????var?icur=null;
????????????????????if(attr=='opacity'){
????????????????????????icur=Math.round(parseFloat(getStyle(obj,attr))*100);
????????????????????}
????????????????????else{
????????????????????????icur=parseInt(getStyle(obj,attr));
????????????????????}
????????????????????var?speed=(json[attr]-icur)/8;
????????????????????speed=speed>0?Math.ceil(speed):Math.floor(speed);

????????????????????if(icur!=json[attr]){
????????????????????????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)
????????}
????</script>
</head>

<body>
<ul>
????<li></li>
????<li></li>
????<li></li>
</ul>
</body>
</html>

查看全部

2 采集收起來(lái)源：完美運(yùn)動(dòng)框架

2019-04-01

首頁(yè)上一頁(yè)1 2 3 4 5 6 7 下一頁(yè)尾頁(yè)

舉報(bào)

0/150

提交

取消

開始學(xué)習(xí)

課程須知: 1.您至少已經(jīng)具備JavaSript的知識(shí)。2.您已經(jīng)具備一些開發(fā)經(jīng)驗(yàn)。

老師告訴你能學(xué)到什么？: 1.使用定時(shí)器實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫。2.如何一步步封裝庫(kù)。2.培養(yǎng)編程的思想。

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

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

熱搜

最近搜索清空

JS動(dòng)畫效果