當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS实现css属性动画效果
生活随笔
收集整理的這篇文章主要介紹了
JS实现css属性动画效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
html代碼
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>css屬性運(yùn)動(dòng)框架</title><style>body,div{margin: 0;padding: 0;}ul,li{list-style: none;}ul li{width: 200px;height: 100px;background: yellowgreen;margin-bottom: 20px;filter:alpha(opacity:30);opacity: 0.3;border:4px solid #666666;}</style><script src="js/move.js"></script><script>window.onload=function(){var Li1=document.getElementById('li1');var Li2=document.getElementById('li2');var Li3=document.getElementById('li3');var Li4=document.getElementById('li4');var Li5=document.getElementById('li5');Li1.onmouseover=function(){startMove(this,{height:200});}Li1.onmouseout=function(){startMove(this,{height:100});}Li2.onmouseover=function(){startMove(this,{width:400});}Li2.onmouseout=function(){startMove(this,{width:200});}Li3.onmouseover=function(){startMove(this,{opacity:100});}Li3.onmouseout=function(){startMove(this,{opacity:30});}Li4.onmouseover=function(){startMove(Li4,{width:400},function(){startMove(Li4,{height:200},function(){startMove(Li4,{opacity:100},function(){});});});}Li4.onmouseout=function(){startMove(Li4,{opacity:30},function(){startMove(Li4,{height:100},function(){startMove(Li4,{width:200});});});}Li5.onmouseover=function(){startMove(Li5,{width:400,height:200,opacity:100});}Li5.onmouseout=function(){startMove(Li5,{width:200,height:100,opacity:30});} }</script></head><body><ul><li id="li1">高動(dòng)畫</li><li id="li2">寬動(dòng)畫</li><li id="li3">透明度動(dòng)畫</li><li id='li4'>高寬透明度鏈?zhǔn)絼?dòng)畫</li><li id='li5'>高寬透明度同時(shí)動(dòng)畫</li></ul></body> </html>引入的JS代碼,運(yùn)動(dòng)框架move.js
//運(yùn)動(dòng) //startMove(obj,{attr1:itarget1,attr2:itarget2},fn) function startMove(obj,json,fn) {clearInterval(obj.timer);obj.timer = setInterval(function() {var flag=true;//標(biāo)桿,假設(shè)所有運(yùn)動(dòng)都達(dá)到了目標(biāo)值for(var attr in json){//1.去當(dāng)前的值var icur = 0;if(attr == 'opacity') {icur = Math.round(parseFloat(getStyle(obj,attr)) * 100); //parseFloat獲取小數(shù).Math.round四舍五入} else {icur = parseInt(getStyle(obj, attr)); //parseInt獲取整數(shù)}//2.算速度var speed = (json[attr] - icur) / 8;speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//3.檢測(cè)屬性動(dòng)畫是否全部達(dá)到目標(biāo)值if(icur !== json[attr]) {flag=false;//如果不是所有的動(dòng)畫都達(dá)到目標(biāo)值，標(biāo)桿設(shè)為false} if(attr == 'opacity') {obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')';obj.style.opacity = (icur + speed) / 100;}else {obj.style[attr] = icur + speed + 'px';}}//在動(dòng)畫結(jié)束的時(shí)候檢測(cè)是否有回調(diào)函數(shù),如果檢測(cè)到有回調(diào)函數(shù)，執(zhí)行if(flag){clearInterval(obj.timer);if(fn){fn();}}}, 30)}//獲取對(duì)象屬性function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];//IE}else{return getComputedStyle(obj,false)[attr];//火狐 chrome}}總結(jié)
以上是生活随笔為你收集整理的JS实现css属性动画效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 思普linux安装教程,思普产品全生命周
- 下一篇： jmap 文件解析_干货分享丨jvm系列