課程
/前端開發
/JavaScript
/JS動畫效果
老師講的很好 代碼能不能共享一下呢
2015-03-20
源自：JS動畫效果 5-1
正在回答
move.js代碼：
? ? ? ? ? ? function ?getStyle(obj,attr){
? ? ? ? ? ? ? ? if(obj.currentStyle){
? ? ? ? ? ? ? ? return obj.currentStyle[attr];
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? return getComputedStyle(obj,false)[attr];
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?//fn是一個函數，當我執行完一個參數后，沒有馬上結束，而是去調用fn函數，再去執行一個新的函數
? ? ? ? ?function ?startMove(obj,attr,iTarget,fn){
? ? ? ? ? ? ? ? ?clearInterval(obj.timer);
? ? ? ? ? ? ? ? ?obj.timer=setInterval(function(){
? ? ? ? ? ? ? ? ? //1.取當前的值
? ? ? ? ? ? ? ? ? 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);
? ? ? ? ? ? ? ? ? ? ? ? //如果第一次運動停止了，又傳來了一個fn,就去執行fn
? ? ? ? ? ? ? ? ? ? ? ? if (fn) {
? ? ? ? ? ? ? ? ? ? ? ? ? fn();
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? if(attr=='opacity'){
? ? ? ? ? ? ? ? ? ? ? ? ? obj.style.filter='alpha(opacity:'+(icur+speed)+')';//適用于Ie瀏覽器
? ? ? ? ? ? ? ? ? ? ? ? ? obj.style.opacity=(icur+speed)/100;//針對火狐與谷歌瀏覽器，因為是小數，所以要除以100
? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? obj.style[attr]=icur+speed+'px';}
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ?},30)
? ? ? ? ? ? }
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鏈式運動框架</title>
<style type="text/css">
? ? ? ? ?body,ul,li{
? ? ? ? ? margin:0;
? ? ? ? ? padding: 0;
? ? ? ? ?}
? ? ? ? ?ul,li{
? ? ? ? ? list-style: none;
? ? ? ? ?ul ?li{
? ? ? ? ? width: 200px;
? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: yellow;
? ? ? ? ? ? margin-bottom: 20px;
? ? ? ? ? ? border: 4px solid #000;
? ? ? ? ? ? fiter:alpha(opacity:30);
? ? ? ? ? ? opacity: 0.3;
? ? ? ? ?</style>
? ? ? ? ?<script ?src="move.js"></script>//注意此處加入的move.js是根據自己的move.js在什么文件夾里決定的，我放的是在桌面上。
? ? ? ? ?<script>
? ? ? ? ? ? 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);
? ? ? ? ?</script>
</head>
<body>
<ul>
<li ?id="li1">1.把大象裝進冰箱，需要打開冰箱門；把大象裝進去；關上門。想要把長頸鹿裝進去，先開門把大象取出來，再把長頸鹿裝進去，關門</li>
</ul>
</body>
</html>
舉報
通過本課程JS動畫的學習，從簡單動畫開始，逐步深入各種動畫框架封裝
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2015-12-30
move.js代碼：
? ? ? ? ? ? function ?getStyle(obj,attr){
? ? ? ? ? ? ? ? if(obj.currentStyle){
? ? ? ? ? ? ? ? return obj.currentStyle[attr];
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? return getComputedStyle(obj,false)[attr];
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ?}
? ? ? ? ? ? ? ?//fn是一個函數，當我執行完一個參數后，沒有馬上結束，而是去調用fn函數，再去執行一個新的函數
? ? ? ? ?function ?startMove(obj,attr,iTarget,fn){
? ? ? ? ? ? ? ? ?clearInterval(obj.timer);
? ? ? ? ? ? ? ? ?obj.timer=setInterval(function(){
? ? ? ? ? ? ? ? ? //1.取當前的值
? ? ? ? ? ? ? ? ? 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);
? ? ? ? ? ? ? ? ? ? ? ? //如果第一次運動停止了，又傳來了一個fn,就去執行fn
? ? ? ? ? ? ? ? ? ? ? ? if (fn) {
? ? ? ? ? ? ? ? ? ? ? ? ? fn();
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? if(attr=='opacity'){
? ? ? ? ? ? ? ? ? ? ? ? ? obj.style.filter='alpha(opacity:'+(icur+speed)+')';//適用于Ie瀏覽器
? ? ? ? ? ? ? ? ? ? ? ? ? obj.style.opacity=(icur+speed)/100;//針對火狐與谷歌瀏覽器，因為是小數，所以要除以100
? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? obj.style[attr]=icur+speed+'px';}
? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ?},30)
? ? ? ? ? ? }
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鏈式運動框架</title>
<style type="text/css">
? ? ? ? ?body,ul,li{
? ? ? ? ? margin:0;
? ? ? ? ? padding: 0;
? ? ? ? ?}
? ? ? ? ?ul,li{
? ? ? ? ? list-style: none;
? ? ? ? ?}
? ? ? ? ?ul ?li{
? ? ? ? ? width: 200px;
? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: yellow;
? ? ? ? ? ? margin-bottom: 20px;
? ? ? ? ? ? border: 4px solid #000;
? ? ? ? ? ? fiter:alpha(opacity:30);
? ? ? ? ? ? opacity: 0.3;
? ? ? ? ?}
? ? ? ? ?</style>
? ? ? ? ?<script ?src="move.js"></script>//注意此處加入的move.js是根據自己的move.js在什么文件夾里決定的，我放的是在桌面上。
? ? ? ? ?<script>
? ? ? ? ? ? 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);
? ? ? ? ? ? ?});
? ? ? ? ? ? ?});
? ? ? ? ? ? ?}
? ? ? ? ? ? }
? ? ? ? ?</script>
</head>
<body>
<ul>
<li ?id="li1">1.把大象裝進冰箱，需要打開冰箱門；把大象裝進去；關上門。想要把長頸鹿裝進去，先開門把大象取出來，再把長頸鹿裝進去，關門</li>
</ul>
</body>
</html>