1. 技术文章
  2. 运动框架中级

运动框架中级

由 不问归期 提交于 2020-01-08 06:12:16
多个物体同时运动
•例子：多个Div，鼠标移入变宽
–单定时器，存在问题
–每个Div一个定时器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
div {width:100px; height:50px; background:red; margin-top:50px;}
</style>
<script>
window.onload=function()
{
    var aDiv=document.getElementsByTagName('div');
    var i=0;
    
    for(i=0; i<aDiv.length; i++)
    {
        aDiv[i].timer=null;
        aDiv[i].onmouseover=function()
        {
            startMove(this, 3000);
            }
        aDiv[i].onmouseout=function()
        {
            startMove(this, 100);
            }
        }
    }
function startMove(obj, iTarget)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        //算速度
        var iSpeed=(iTarget-obj.offsetWidth)/8;
        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
        //判断
        if(obj.offsetWidth==iTarget)
        {
            clearInterval(obj.timer);
        }
        else
        {
            obj.style.width=obj.offsetWidth+iSpeed+'px';
        }
    }, 30)
}
    
</script>
</head>

<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
large div onclick 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; border:1px solid black;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
setInterval(function (){
    var oDiv=document.getElementById('div1');
    //没转换成整数，会变成+1
    oDiv.style.width=oDiv.offsetWidth-1+'px';
}, 30);

</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>
large div onclick 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:100px; height:100px; background:red; border:1px solid black;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//获取行间样式的函数
function getStyle(obj, attr)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[attr];
    }
    else
    {
        return getComputedStyle(obj, false)[attr];
    }
}

setInterval(function (){
    var oDiv=document.getElementById('div1');
    
    //oDiv.style.width=oDiv.offsetWidth-1+'px';
    oDiv.style.width=parseInt(getStyle(oDiv, 'width'))-1+'px';
}, 30);

</script>
</head>

<body>
large div onclick 3

 

多物体运动框架
•定时器作为物体的属性
•参数的传递：物体、目标值
•例子：多个Div淡入淡出
–所有东西都不能公用
–属性与运动对象绑定：速度、其他属性值（如透明度等）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    
    oDiv.onmouseover=function ()
    {
        startMove(oDiv, 'opacity', 100);
    }
    
    oDiv.onmouseout=function ()
    {
        startMove(oDiv, 'opacity', 30);
    }
}
//获取行间样式
function getStyle(obj, attr)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[attr];
    }
    else
    {
        return getComputedStyle(obj, false)[attr];
    }
}
//判断 对象 属性 数值的函数
function startMove(obj, attr, iTarget)
{
    //开启单个定时器
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var iCur=0;
        //判断属性是不是透明度
        if(attr=='opacity')
        {
            iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
        }
        else
        {
            iCur=parseInt(getStyle(obj, attr));
        }
        //判断速度
        var iSpeed=(iTarget-iCur)/8;
        iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
        
        //终止条件
        if(iCur==iTarget)
        {
            clearInterval(obj.timer);
        }
        //不终止判断
        else
        {
            //把以前转换数值转换过来
            if(attr=='opacity')
            {
                obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                obj.style.opacity=(iCur+iSpeed)/100;
                
                document.getElementById('txt1').value=obj.style.opacity;
            }
            else
            {
                //继续加
                obj.style[attr]=iCur+iSpeed+'px';
            }
        }
    }, 30)
}

</script>
</head>
moveup moveout div

 

loffset属性的Bug
•有边框的Div变宽
–用currentStyle代替offset
l原有运动框架的问题
•只能让某个值运动起来
•如果想让其他值运动起来，要修改程序
l扩展的运动框架
•运动属性作为参数
•封装opacity
–小数的问题
 
l效果思路
•两边的按钮——淡入淡出
•大图下拉——层级、高度变化
•下方的li——多物体淡入淡出
•下方的Ul——位置计算
l左右按钮
•淡入淡出
–鼠标移到按钮上，按钮会消失
»层级问题
»按钮和遮罩上都得加上事件
 
l下方Li效果
•点击切换大图——选项卡
•Li淡入淡出——移入移出
•Ul移动——位置计算
l大图片切换
•图片层级——zIndex一直加1
•图片下拉效果(运动框架)
–可以改为淡入淡出
l加入自动播放
•和选项卡一样
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿FLASH的图片轮换效果 —— www.miaov.com 妙味课堂</title>
<link rel="stylesheet" type="text/css" href="miao_style.css">
<script src="../move.js"></script>
<script>
function getByClass(oParent, sClass)
{
    var aEle=document.getElementsByTagName('*');
    var i=0;
    var aResult=[];
    
    for(i=0;i<aEle.length;i++)
    {
        if(aEle[i].className==sClass)
        {
            aResult.push(aEle[i]);
        }
    }
    
    return aResult;
}

window.onload=function ()
{
    var oDiv=document.getElementById('playeimages');
    var oBtnPrev=getByClass(oDiv, 'prev')[0];
    var oBtnNext=getByClass(oDiv, 'next')[0];
    var oMarkLeft=getByClass(oDiv, 'mark_left')[0];
    var oMarkRight=getByClass(oDiv, 'mark_right')[0];
    
    var oSmallUl=getByClass(oDiv, 'small_pic')[0].getElementsByTagName('ul')[0];
    var aSmallLi=oSmallUl.getElementsByTagName('li');
    var oBigUl=getByClass(oDiv, 'big_pic')[0];
    var aBigLi=oBigUl.getElementsByTagName('li');
    var iNow=0;
    var iMinZindex=2;
    var i=0;
    
    oSmallUl.style.width=aSmallLi.length*aSmallLi[0].offsetWidth+'px';
    
    //上面的左右按钮
    oBtnPrev.onmouseover=oMarkLeft.onmouseover=function ()
    {
        startMove(oBtnPrev, 'opacity', 100);
    }
    
    oBtnPrev.onmouseout=oMarkLeft.onmouseout=function ()
    {
        startMove(oBtnPrev, 'opacity', 0);
    }
    
    oBtnNext.onmouseover=oMarkRight.onmouseover=function ()
    {
        startMove(oBtnNext, 'opacity', 100);
    }
    
    oBtnNext.onmouseout=oMarkRight.onmouseout=function ()
    {
        startMove(oBtnNext, 'opacity', 0);
    }

    //小图点击，大图显示
    for(i=0;i<aSmallLi.length;i++)
    {
        aSmallLi[i].index=i;
        aSmallLi[i].onmouseover=function ()
        {
            startMove(this, 'opacity', 100);
        }
        aSmallLi[i].onmouseout=function ()
        {
            if(this.index!=iNow)
            {
                startMove(this, 'opacity', 60);
            }
        }
        
        aSmallLi[i].onclick=function ()
        {
            if(this.index==iNow)return;
            iNow=this.index;
            
            tab();
        }
        
        function tab()
        {
            for(i=0;i<aSmallLi.length;i++)
            {
                startMove(aSmallLi[i], 'opacity', 60);
            }
            startMove(aSmallLi[iNow], 'opacity', 100);
            aBigLi[iNow].style.zIndex=iMinZindex++;
            aBigLi[iNow].style.height=0;
            
            startMove(aBigLi[iNow], 'height', oBigUl.offsetHeight);
            
            if(iNow==0)
            {
                startMove(oSmallUl, 'left', 0);
            }
            else if(iNow==aSmallLi.length-1)
            {
                startMove(oSmallUl, 'left', -(iNow-2)*aSmallLi[0].offsetWidth);
            }
            else
            {
                startMove(oSmallUl, 'left', -(iNow-1)*aSmallLi[0].offsetWidth);
            }
        }
        
        oBtnPrev.onclick=function ()
        {
            iNow--;
            if(iNow==-1)
            {
                iNow=aSmallLi.length-1;
            }
            
            tab();
        }
        
        oBtnNext.onclick=function ()
        {
            iNow++;
            if(iNow==aSmallLi.length)
            {
                iNow=0;
            }
            
            tab();
        }
    }
}
</script>
</head>

<body>
<div id="playimages" class="play">
    <ul class="big_pic">
        <div class="prev"></div>
        <div class="next"></div>

        <div class="text">加载图片说明……</div>
        <div class="length">计算图片数量……</div>
        
        <a class="mark_left" href="javascript:;"></a>
        <a class="mark_right" href="javascript:;"></a>
        <div class="bg"></div>
        
        <li style="z-index:1;"><img src="images/1.jpg" /></li>
        <li><img src="images/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
        <li><img src="images/5.jpg" /></li>
        <li><img src="images/6.jpg" /></li>
    </ul>
    <div class="small_pic">
        <ul style="width:390px;">
            <li style="filter: 100; opacity: 1;"><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
            <li><img src="images/6.jpg" /></li>
        </ul>
    </div>
</div>

</body>
picture onclick 
body { background: #666; } ul { padding: 0; margin: 0; } li { list-style: none; } img { border: 0; }

.play { width: 400px; height: 430px; margin: 50px auto 0; background: #999; font: 12px Arial; }

.big_pic { width: 400px; height: 320px; overflow: hidden; border-bottom: 1px solid #ccc; background: #222; position: relative; }
.big_pic li { width: 400px; height: 320px; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 0; background: url(images/loading.gif) no-repeat center center; }

.mark_left { width: 200px; height: 320px; position: absolute; left: 0; top: 0; background: red; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.mark_right { width: 200px; height: 320px; position: absolute; left: 200px; top: 0; background: green; filter: alpha(opacity:0); opacity: 0; z-index:3000; }
.big_pic .prev { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat; position: absolute; top: 130px; left: 10px; z-index: 3001; cursor: pointer; filter:alpha(opacity: 0); opacity:0; }
.big_pic .next { width: 60px; height: 60px; background: url(images/btn.gif) no-repeat 0 -60px; position: absolute; top: 130px; right: 10px; z-index: 3001;cursor: pointer; filter:alpha(opacity: 0); opacity:0; }

.big_pic .text { position: absolute; left: 10px; top: 302px; z-index: 3000; color: #ccc; }
.big_pic .length { position: absolute; right: 10px; bottom: 4px; z-index: 3000; color: #ccc; }
.big_pic .bg { width: 400px; height: 25px; background: #000; filter: alpha(opacity=60); opacity: 0.6; position: absolute; z-index: 2999; bottom: 0; left: 0; }
.small_pic { width: 380px; height: 94px; position: relative; top: 7px; left: 10px; overflow: hidden; }
.small_pic ul { height: 94px; position: absolute; top: 0; left: 0; }
.small_pic li { width: 120px; height: 94px; float: left; padding-right: 10px; background: url(images/loading.gif) no-repeat center center; cursor: pointer; filter: alpha(opacity=60); opacity: 0.6; }
.small_pic img { width: 120px; height: 94px; }
picture onclick
l多物体运动
l任意值运动
标签
background
pic
position
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!