简易运动框架综合案例，仿FLASH运动

最新推荐文章于 2020-04-26 21:46:21 发布

Alex十年

最新推荐文章于 2020-04-26 21:46:21 发布

阅读量244

点赞数

分类专栏： JavaScript知识总结

本文链接：https://blog.csdn.net/ilikejj0/article/details/79631601

版权

JavaScript知识总结专栏收录该内容

22 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="index.css" />
        <script src="move.js"></script>
        <script>
            function getByClass(oParent,sClass){
                var aEle = document.getElementsByTagName('*');
                var aResult = [];
                for(var i = 0;i<aEle.length;i++){
                    if(aEle[i].className==sClass){
                        aResult.push(aEle[i]);
                    }
                }
                return aResult;
            }
            window.onload = function(){
                var oDiv = document.getElementById('playimages');
                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];

                //左右按钮

                //当鼠标移入时，箭头显示出来，使用透明度
                //此时会出现一个问题，当鼠标移入到箭头上时，箭头也会消失
                //所以需要给箭头也加入一个onmouseover事件
                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);
                }


                //大图切换

                var oDivSmall = getByClass(oDiv,'small_pic')[0];
                var aLiSmall = oDivSmall.getElementsByTagName('li');
                var aUlSmall = oDivSmall.getElementsByTagName('ul')[0];
                var oUlBig = getByClass(oDiv,'big_pic')[0];
                var aLiBig = oUlBig.getElementsByTagName('li');
                //每点击一张小图，大图的层级就加一
                var nowZIndex = 2;
                //这个是针对下面大图从上往下拉实现的动态效果，当是第一张时，会再次刷新，
                //所以要用一个变量来记录当前的值
                var now=0;

                //给每一个小图的li加一个点击事件
                for(var i=0;i<aLiSmall.length;i++){
                    //根据点击第几张小图，就改变第几张大图，给小图加一个标记
                    aLiSmall[i].index = i;
                    aLiSmall[i].onclick=function(){

                        //如果当前图片的index与now想等，就不执行，如果不相等，就另now等于现在的index,
                        if(this.index==now)return;
                        now=this.index;
                        tab();

                    }
                    //给每一个小的li加上一个onmouseover，当放上去的时候，透明度发生改变
                    aLiSmall[i].onmouseover=function(){
                        startMove(this,'opacity',100);
                    }
                    aLiSmall[i].onmouseout=function(){
                        //如果不进行判断会出现一个bug，那就是当你最开始移入第一张时，再移出后，会变成不透明的
                        if(this.index!=now){
                            startMove(this,'opacity',60);
                        }                       
                    }
                }
                //有点仿照无缝滚动
                aUlSmall.style.width = aLiSmall.length*aLiSmall[0].offsetWidth+'px';
                function tab(){
                    //仿照选项卡的模式，
                        for(var i=0;i<aLiSmall.length;i++){
                            startMove(aLiSmall[i],'opacity',60);
                        }
                        startMove(aLiSmall[now],'opacity',100);
                        //根据小图的index来知道是哪一张大图，此时使对应的大图的层级增加1；
                        aLiBig[now].style.zIndex = nowZIndex++;
                        aLiBig[now].style.height = '0px';
                        startMove(aLiBig[now],'height',320);
                        //这里有一个规律，就是当下面小框里变一个时，这个ul向左移动为0，一两个时还是0
                        //移3个时，ul要向左移动一个li的宽度，这个是使大图对应的小图在中间位置
                        //以此类推规律即是-（n-1)*li的宽度
                        if(now==0){
                            startMove(aUlSmall,'left',0);
                        }else if(now==aLiSmall.length-1){
                            startMove(aUlSmall,'left',-(now-2)*aLiSmall[0].offsetWidth);
                        }else{
                            startMove(aUlSmall,'left',-(now-1)*aLiSmall[0].offsetWidth);
                        }

                }
                //给按钮添加上一张下一张
                oBtnPrev.onclick=function(){
                    now--;
                    if(now==-1){
                        now = aLiSmall.length-1;
                    }
                    tab();
                }
                oBtnNext.onclick=function(){
                    now++;
                    if(now==aLiSmall.length){
                        now=0;
                    }
                    tab();
                }
                //自动播放
                var timer = setInterval(oBtnNext.onclick,2000);
                oDiv.onmouseover = function(){
                    clearInterval(timer);
                }
                oDiv.onmouseout = function(){
                    timer = setInterval(oBtnNext.onclick,2000);
                }
            }
        </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>
</html>

css

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; 
               filter:alpha(opacity:0); opacity:0; cursor: pointer; }
.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; 
               filter:alpha(opacity:0); opacity:0; cursor: pointer; }

.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; }

function getStyle(obj,name){
    if(obj.currentStyle){
        return obj.currentStyle[name];
    }else{
        return getComputedStyle(obj,false)[name];
    }
}

function startMove(obj,attr,target){
    clearInterval(obj.time);
    obj.time=setInterval(function(){
        //此时，可以使用之前封装好的函数,但是一定要记得使用parseInt，
        //因为得到的值带有px，使用parseInt把他转化为整数
        //对于透明度要换一种方式
        var curr=0;
        if(attr=='opacity'){
            //计算机存储小数时出现的bug，0.07*100得到的是7.000000001，所以四舍五入
            curr = Math.round(parseFloat(getStyle(obj,attr))*100);
        }else{
            curr = parseInt(getStyle(obj,attr));
        }

        var speed = (target-curr)/6;
        speed = speed>0?Math.ceil(speed):Math.floor(speed);
        //此时不需要使用>号，是因为对于缓冲运动而言，速度是变化的，到最后的时候，速度回变成1
        //因此不会存在高度大于目标值的情况
        if(curr==target){
            clearInterval(obj.time);
        }else{
            //此时可以利用[]获取属性的方法把属性作为参数传进来，
            //即把obj.style.height 转换为obj.style['height']

            if(attr=='opacity'){
                //记得加括号
                obj.style.filter = 'alpha(opacity:'+(curr+speed)+')';
                obj.style.opacity = (curr+speed)/100;
            }else{
                obj.style[attr] = curr+speed+'px';
            }                       
        }
    },30)
}