最近最新高清中文字幕,国产亚洲精品久久久999功能介绍

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

JS動(dòng)畫(huà)效果

            
                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
                                邏輯清晰

最熱最新

貝殼殼
1. 定時(shí)器
2. onmouseover 鼠標(biāo)移入
3. onmouseout鼠標(biāo)移除
4. odiv.offsetLeft? odiv的當(dāng)前l(fā)eft值
5. 在兩個(gè)代碼很相似的情況下，可以把不同的地方挑出來(lái)作為參數(shù)傳進(jìn)去（如鼠標(biāo)移入與鼠標(biāo)移除的函數(shù)）
查看全部

1 采集收起來(lái)源：JS速度動(dòng)畫(huà)
2018-04-12
貝殼殼 03:28

思路

查看全部

0 采集收起來(lái)源：JS動(dòng)畫(huà)效果課程介紹
2018-04-12
騎士先生 03:35

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

查看全部

0 采集收起來(lái)源：JS動(dòng)畫(huà)效果課程介紹
2018-04-12
刀不磨要生銹

<!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");//oDiv是局部變量，只在此函數(shù)內(nèi)有效
//鼠標(biāo)移入事件
oDiv.onmouseover=function(){
starMove(0);
}
//鼠標(biāo)移出事件
oDiv.onmouseout=function(){
starMove(-200);
}

var timer = null;
function starMove(target){
clearInterval(timer);//解決“speed”的疊加問(wèn)題
var oDiv=document.getElementById("div1");
//創(chuàng)建一個(gè)定時(shí)器timer
timer=setInterval(function(){

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

if(oDiv.offsetLeft==target){
clearIntral(timer);//符合條件運(yùn)動(dòng)停止
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
}
</script>

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

查看全部

3 采集收起來(lái)源：JS緩沖動(dòng)畫(huà)
2018-04-10
刀不磨要生銹

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>分享</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");//oDiv是局部變量，只在此函數(shù)內(nèi)有效
//鼠標(biāo)移入事件
oDiv.onmouseover=function(){
starMove(0);
}
//鼠標(biāo)移出事件
oDiv.onmouseout=function(){
starMove(-200);
}

var timer = null;
function starMove(target){
clearInterval(timer);//解決“speed”的疊加問(wèn)題
var oDiv=document.getElementById("div1");
//創(chuàng)建一個(gè)定時(shí)器timer
timer=setInterval(function(){

var speed =0;
if(oDiv.offsetLeft > target){
speed = -10;
}else{
speed = 10;
}

if(oDiv.offsetLeft==target){
clearIntral(timer);//符合條件運(yùn)動(dòng)停止
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
}
</script>

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

查看全部

5 采集收起來(lái)源：JS速度動(dòng)畫(huà)
2018-04-10
刀不磨要生銹

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>改變透明度</title>
<style type="text/css">
#div1{
width:160px;
height:160px;
background-color:red;
filter: alpha(opacity:30);
opacity:0.3;
}
</style>
<script type="text/javascript">
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(target){
var oDiv = document.getElementById("div1");
clearInterval(timer);
timer = setInterval(function(){

var speed = 0;
if(alpha > target){
speed = -10;
}else{
speed = 10;
}

if(alpha == target){
claerInterval(timer);
}else{
alpha+=speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
}
},30);
}
}
</script>
</head>

<body>
<div id=div1></div>
</body>
</html>

查看全部

1 采集收起來(lái)源：JS透明度動(dòng)畫(huà)
2018-04-10
刀不磨要生銹

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多物體改變透明度</title>
<style type="text/css">
div{
width:160px;
height:160px;
background-color:red;
float:left;
margin:10px;
filter: alpha(opacity:30);
opacity:0.3;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName("div");

for(var i=0;i<oDiv.length;i++){
oDiv[i].alpha = null;
oDiv[i].onmouseover = function(){
startMove(this,100);
}
oDiv[i].onmouseout = function(){
startMove(this,30);
}
}

// var timer = null;
// var alpha = 30;

function startMove(obj,target){
// var oDiv = document.getElementById("div");
clearInterval(obj.timer);
obj.timer = setInterval(function(){

var speed = 0;
if(obj.alpha > target){
speed = -10;
}else{
speed = 10;
}

if(obj.alpha == target){
claerInterval(obj.timer);
}else{
obj.alpha+=speed;
obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
obj.style.opacity = obj.alpha/100;
}
},30);
}
}
</script>
</head>

<body>
<div id=div1></div>
<div id=div2></div>
<div id=div3></div>
<div id=div4></div>
</body>
</html>

查看全部

1 采集收起來(lái)源：JS多物體動(dòng)畫(huà)
2018-04-10
刀不磨要生銹

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多物體運(yùn)動(dòng)</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul,li{
list-style: none;
}
ul li{
width:200px;
height:100px;
background-color: chartreuse;
margin-bottom:20px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName('li');

for(var i = 0;i < oDiv.length;i++){
oDiv[i].timer = null;//在對(duì)象上定義一個(gè)單獨(dú)的屬性值
oDiv[i].onmouseover = function(){
startMove(this,400);//this來(lái)指定所選擇的當(dāng)前元素
}
oDiv[i].onmouseout = function(){
startMove(this,200);
}
}

//var timer = null;
function startMove(obj,target){
clearInterval(obj.timer);

obj.timer = setInterval(function(){
var speed = (target - obj.offsetWidth)/8;
speed = speed >0?Math.ceil(speed):Math.floor(speed);

if(obj.offsetWidth == target){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth+speed+'px';
}
},30);
}

}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

查看全部

1 采集收起來(lái)源：JS多物體動(dòng)畫(huà)
2018-04-10
慕絲4089693 09:37

getStyle()

查看全部

1 采集收起來(lái)源：獲取樣式
2018-04-09
半世煙云落

查看全部

1 采集收起來(lái)源：獲取樣式
2018-04-03
GYNexus

JSON格式：var json = {key : value , key1 : value1};
遍歷：for(var i : json) {
????????? i;(key值)
????????? json[i];(value值)
}

查看全部

0 采集收起來(lái)源：完美運(yùn)動(dòng)框架
2018-03-23
GYNexus

鏈?zhǔn)絼?dòng)畫(huà)，在startMove(obj,attr,iTarget,fn)再加一個(gè)fn參數(shù)，并在清除動(dòng)畫(huà)之后，加入fn方法：if(fn){fn();} 在主頁(yè)中，在三個(gè)參數(shù)之后再加入一個(gè)參數(shù) startMove(Li,'width',400,function(){ startMove(Li,'height',200,function(){ startMove(Li,'opacity',100); }) })

查看全部

0 采集收起來(lái)源：JS鏈?zhǔn)絼?dòng)畫(huà)
2018-03-23
GYNexus

1、獲取當(dāng)前透明度不用parseInt<br> 2、設(shè)置透明度要考慮兼容<br> obj.style.filter='alpha(opacity:'+(當(dāng)前透明度+變化速度)+')';<br> obj.style.opacity=(當(dāng)前透明度+變化速度)/100;<br>針對(duì)chrome和火狐瀏覽器 3、透明度不加“px”<br> 在使用parseInt()時(shí)處理透明度小數(shù)時(shí),會(huì)有影響單位設(shè)置<br> 相應(yīng)位置進(jìn)行判斷 IE/FireFox<br> 取相應(yīng)值 Math.round()四舍五入取整數(shù)值<br> Math.round(parseFloat(getStyle(obj,attr))*100)

查看全部

0 采集收起來(lái)源：任意屬性值（二）
2018-03-23
GYNexus

1、dom.style.xxx 這種寫(xiě)法只能獲取行內(nèi)樣式例如 <div ></div> div.style.width能獲取到是200px，但是沒(méi)有出現(xiàn)在引號(hào)中的樣式是獲取不到的 2、萬(wàn)能方法。 getComputedStyle(div,null).xxx 這個(gè)是標(biāo)準(zhǔn)方法，需要做一下兼容 currentStyle 是IE的 3、友情贈(zèng)送獲取任何樣式的代碼 function getStyle(obj,style){//引用時(shí)style要帶引號(hào) if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; } }
設(shè)置width的style寫(xiě)在div里和寫(xiě)在文檔開(kāi)頭的<style></style>里，獲取的div元素的oDiv.style.width不一樣（后者會(huì)把border padding等的寬度也加上）
parseInt（）是獲取整數(shù)

查看全部

1 采集收起來(lái)源：獲取樣式
2018-03-23
GYNexus

多物體運(yùn)動(dòng) for循環(huán)來(lái)為每一個(gè)TagNameList[i]添加事件并添加屬性來(lái)區(qū)分各自的定時(shí)器(用于取消) 利用參數(shù)中的this來(lái)指定所選擇的當(dāng)前元素多物體不要共用一個(gè)值,在對(duì)象上定義一個(gè)單獨(dú)的屬性保持值存在多項(xiàng)共用一個(gè)值，并且這個(gè)值會(huì)發(fā)生改變時(shí)，最好單獨(dú)給賦值，避免出現(xiàn)爭(zhēng)用的情況。 <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ // 給每一個(gè)li設(shè)置一個(gè)timer，才不會(huì)致使他們?nèi)宼imer aLi[i].timer=null; aLi[i].onmouseover=function(){ startMove(this,400); }; aLi[i].onmouseout=function(){ startMove(this,200) } } var oDivLi=document.getElementsByTagName('div'); for(var j=0;j<oDivLi.length;j++){ oDivLi[j].timer=null; oDivLi[j].alpha=30; oDivLi[j].onmouseover=function(){ startMove1(this,100); }; oDivLi[j].onmouseout=function(){ startMove1(this,30); } } };

查看全部

0 采集收起來(lái)源：JS多物體動(dòng)畫(huà)
2018-03-23