第九节 JS运动应用

其他 2019-01-13 23:51:23 阅读次数: 0

多物体运动框架

　　多个物体同时运动

　　　　例子：多个Div，鼠标移入变宽

　　　　　　单定时器，存在问题

　　　　　　每个Div一个定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个div变宽</title>
    <style>
        div{
            width: 100px;
            height: 50px;
            background: red;
            margin: 10px;
        }
        /*鼠标移入时宽度变宽；鼠标移除，恢复原状*/
    </style>
    <script>
        // window.onload = function () {
        //     var aDiv = document.getElementsByTagName('div');
        //     for (var i=0; i<aDiv.length; i++){
        //         aDiv[i].onmouseover = function(){
        //             startMove(this, 400)
        //         };
        //         aDiv[i].onmouseout = function(){
        //             startMove(this, 100)
        //         };
        //     }
        // };
        //
        // var timer = null;
        // function startMove(obj, iTarget){
        //     clearInterval(timer);
        //     timer = setInterval(function () {
        //         var speed = (iTarget - obj.offsetWidth)/6;
        //         speed = speed>0?Math.ceil(speed):Math.floor(speed);
        //         if (obj.offsetWidth==iTarget) {
        //             clearInterval(timer);
        //         } else {
        //             obj.style.width = obj.offsetWidth+speed+'px';
        //         }
        //     }, 30);
        // }

        //问题是，当我们把鼠标移入一个div，并快速移出，然后快速移入下一个div时，鼠标移入的第一个div有可能不能恢复原状，
        //其实问题的根源就是 整个程序就只有一个“定时器”，当第一个div在动的时候，还没有完全恢复，第二个div的定时器已经把
        // 上一个的定时器覆盖掉，所以出现这种情况，解决办法如下：
        window.onload = function () {
            var aDiv = document.getElementsByTagName('div');
            for (var i=0; i<aDiv.length; i++){
                aDiv[i].timer = null;   //自定义属性，给每个div都加一个定时器

                aDiv[i].onmouseover = function(){
                    startMove(this, 400)
                };
                aDiv[i].onmouseout = function(){
                    startMove(this, 100)
                };
            }
        };
        // var timer = null;
        function startMove(obj, iTarget){
            clearInterval(obj.timer);   //关闭相应div的定时器
            obj.timer = setInterval(function () {   //开启相应div的定时器
                var speed = (iTarget - obj.offsetWidth)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                if (obj.offsetWidth==iTarget) {
                    clearInterval(obj.timer);   //关闭相应div的定时器
                } else {
                    obj.style.width = obj.offsetWidth+speed+'px';
                }
            }, 30);
        }
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>
View Code

多物体运动框架

　　定时器作为物体的属性

　　参数传递：物体、目标值

　　例子：多个Div淡出淡入

　　　　所有东西都不能共用

　　　　属性与运动对象：速度、其他属性值（如透明度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个div淡入淡出</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 20px;
            float: left;
            background: red;
            filter: alpha(opacity: 30);
            opacity: 0.3;
        }
    </style>
    <script>
        window.onload=function () {
            var aDiv = document.getElementsByTagName('div');

            for (var i=0; i<aDiv.length;i++){
                aDiv[i].alpha = 30;     //把每个div的alpha分开

                aDiv[i].onmouseover = function () {
                    startMove(this, 100);
                };
                aDiv[i].onmouseout = function (){
                    startMove(this, 30);
                };
            }
        };
        // var alpha = 30;     //虽然把alpha分开了不同的div，但是任然存在鼠标快速由一个div移入到另一个div时，透明度变化较慢的情况
        // 所以我们的解决办法是，把每个div的alpha也分开，
        function startMove(obj, iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var speed = (iTarget-obj.alpha)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);
                
                if (obj.alpha==iTarget) {
                    clearInterval(obj.timer);
                } else {
                    obj.alpha+=speed;
                    obj.style.filter = 'alpha(opacity: '+obj.alpha+')';
                    obj.style.opacity = obj.alpha/100;
                }
            }, 30);
        }
    </script>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>
View Code

任意值的运动框架

　　offset属性的Bug

　　　　有边框的Div变宽

　　　　　　用currentSty代替offset

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>a_bug_of_offset</title>
    <style>
        #div1{
            width: 200px;
            height: 200px;
            background: red;
            border: 1px solid black;
        }
        #div2{
            height: 200px;
            background: red;
            border: 1px solid black;
        }
        #div3{
            width: 200px;
            height: 200px;
            background: red;
            border: 1px solid black;
        }
    </style>
    <script>
        setInterval(function () {
            var oDiv1 = document.getElementById('div1');

            oDiv1.style.width = oDiv1.offsetWidth-1+'px';
            //问题来了，样式表中未加“border”之前，div确实在一直变窄，直至消失，而加入“border”之后div就开始慢慢变宽了，
            //原因是，offsetwidth获得的是div的“盒模型”（其中包括：border、padding、width等等）尺寸，究其根本原因是
            //因为width=200 左右border为2 offsetWidth=200+2=202，202-1=201px赋值给Width；
            //现在offsetWidth=201+2=203px 203-1=202px再赋值给Width；
            //offsetWidth=202+2=204px 204-1=203px再赋值给Width；如此继续，Width会越来越大，div的宽度也就越来越宽
            //
            //另外，同理，当改为：“oDiv.style.width = oDiv.offsetWidth-2+'px';”时，原先offsetWidth=200+2=202px，
            //offsetWidth-2=200px赋值给width，offsetWidth有等于200+2px，如此反复，width始终等于200px，
            //offsetWidth始终等于202px，所以当“-2”时，div不发生任何变化，
        }, 30);

        //解决办法是不使用offsetWidth 如下，把div2的width放到行间
        setInterval(function () {
            var oDiv2 = document.getElementById('div2');
            oDiv2.style.width = parseInt(oDiv2.style.width)-1+'px';
        }, 30);

        //上述解决办法，又存在一个局限性，因为“a.style.b”只能获取行间样式，而不能获取样式表中的样式，解决办法是：
        function getStyle(obj, name){   //该方法帮助我们获取非行间（样式表里的）样式
            if(obj.currentStyle){
                return obj.currentStyle[name];
            } else {
                return getComputedStyle(obj, false)[name];
            }
        }
        setInterval(function () {
            var oDiv3 = document.getElementById('div3');
            oDiv3.style.width = parseInt(getStyle(oDiv3, 'width'))-1+'px';
        }, 30);
    </script>
</head>
<body>
    <div id="div1"></div>
    <div id="div2" style="width: 200px"></div>
    <div id="div3"></div>
</body>
</html>
View Code

 　　　　

　　原有运动框架的问题：只能让某个值运动起来，如果想让其他值运动起来，要修改程序

　　　　由上述代码我们可以看出，offset...存在相应的bug，所以之前用过offset...的相关代码也会有同样的错误出现，开始用“offset...”仅仅是因为它比较简单，而且很容易让人们理解运动的概念，但是之后为了避免此类错误的出现，我们就不再优先考虑offset...了，所以下面改进版的“任意值的运动框架-改进版”如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>任意值变化框架-改进版</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 20px;
            float: left;
            background: red;
            font-size: 14px;
            border: 1px solid blue;
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv1 = document.getElementById('div1');
            oDiv1.onmouseover = function () {
                startMove(this, 'height', 400);
            };
            oDiv1.onmouseout = function (){
                startMove(this, 'height', 200);
            };

            var oDiv2 = document.getElementById('div2');
            oDiv2.onmouseover = function () {
                startMove(this, 'width', 400);
            };
            oDiv2.onmouseout = function (){
                startMove(this, 'width', 200);
            };

            var oDiv3 = document.getElementById('div3');
            oDiv3.onmouseover = function () {
                startMove(this, 'font-size', 24);   //font-size也可以写成fontSize
            };
            oDiv3.onmouseout = function () {
                startMove(this, 'fontSize', 14);   //font-size也可以写成fontSize
            }

            var oDiv4 = document.getElementById('div4');
            oDiv4.onmouseover = function () {
                startMove(this, 'border-width', 24);    //border-width也可以写成borderWidth
            };
            oDiv4.onmouseout = function () {
                startMove(this, 'border-width', 1);     //border-width也可以写成borderWidth
            }
        };

        function getStyle(obj, name){   //该方法帮助我们获取非行间（样式表里的）样式
            if(obj.currentStyle){
                return obj.currentStyle[name];
            } else {
                return getComputedStyle(obj, false)[name];
            }
        }

        function startMove(obj, attr, iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var cur = parseInt(getStyle(obj, attr));

                var speed = (iTarget-cur)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);

                if (cur==iTarget) {
                    clearInterval(obj.timer);
                } else {
                    obj.style[attr] = cur+speed+'px';
                }
            }, 30);
        }
    </script>
</head>
<body>
    <div id="div1">变长</div>
    <div id="div2">变宽</div>
    <div id="div3">字体变大</div>
    <div id="div4">变宽</div>
</body>
</html>
View Code

扩展的运动框架：

　　运动属性作为参数

　　封装opacity

　　　　小数的问题　　　

　　但是由于我们在上述代码中用的是：parseInt()进行取整，但是如果我们在使用透明度的时候都需要用到小数，所以此时由于parseInt()的使用，又限制了程序的完整性，解决办法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>parseInt局限的改进</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 20px;
            float: left;
            background: red;
            font-size: 14px;
            border: 10px solid blue;
            filter: alpha(opacity: 30); /*IE浏览器 物体透明度*/
            opacity: 30%;    /*Chrome、FF浏览器 物体透明度，也可以写成0.3*/
        }
    </style>
    <script>
        window.onload = function () {
            var oDiv1 = document.getElementById('div1');
            oDiv1.onmouseover = function () {
                startMove(this, 'opacity', 100);
            };
            oDiv1.onmouseout = function (){
                startMove(this, 'opacity', 30);
            };
        };

        function getStyle(obj, name){   //该方法帮助我们获取非行间（样式表里的）样式
            if(obj.currentStyle){
                return obj.currentStyle[name];
            } else {
                return getComputedStyle(obj, false)[name];
            }
        }

        function startMove(obj, attr, iTarget) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var cur = 0;

                if (attr == 'opacity') {
                    cur = Math.round(parseFloat(getStyle(obj, attr))*100);  //乘以100符合咱们平时对opacity的设置 Math.round()下面会有介绍
                } else {
                    cur = parseInt(getStyle(obj, attr));
                }

                var speed = (iTarget-cur)/6;
                speed = speed>0?Math.ceil(speed):Math.floor(speed);

                if (cur==iTarget) {
                    clearInterval(obj.timer);
                } else {
                    if (attr == 'opacity') {
                        obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';    //IE透明度
                        obj.style.opacity = (cur+speed)/100;

                        var oTxt = document.getElementById('txt1');
                        oTxt.value = obj.style.opacity;
                    } else {
                        obj.style[attr] = cur+speed+'px';
                    }

                }
            }, 30);
        }


        // alert(0.06*100);    //返回值为 6 没错
        // alert(0.07*100);    //返回值为：7.000000000000001，出现误差，
        // // 这是由于计算机存储容量有限，所以计算机并不一定会全部存储数据的实际值，而是近似值，但是只要是近似值就会有误差，
        // // 但是这并不会妨碍我们的使用，而且并不是PC存在这个问题，手机等计算设备都会有这种问题。
        // // 目前这种情况已经相对很少出现了，当然我们也有解决办法 Math.round() 四舍五入
        // alert(Math.round(3.499999999999999));   //返回值为3
        // alert(Math.round(3.4999999999999999));   //返回值为4
    </script>
</head>
<body>
    <div id="div1">变长</div>
    <input id="txt1" type="text"/>
</body>
</html>
View Code

仿Flash图片展示 - 1

　　效果思路：

　　　　两边的按钮——淡入淡出

　　　　大图下拉——层级、高度变化

　　　　下方的li——多物体淡入淡出

　　　　下方的ul——位置计算

　　左右按钮

　　　　淡出淡入

　　　　　　鼠标移动到按钮上，按钮会消失

　　　　　　　　层级问题

　　　　　　　　按钮和遮罩上都得加上事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿Flash图片轮转效果</title>
    <link rel="stylesheet" type="text/css" href="31.css"/>
    <script src="31JS_StartMove.js"></script>
    <script>
        function getByClass(oParent, sClass){
            var aEle = oParent.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];

            var oDivSmall = getByClass(oDiv, 'small_pic')[0];
            var oUlSmall = oDivSmall.getElementsByTagName('ul')[0];
            var aLiSmall = oDivSmall.getElementsByTagName('li');

            var oUlBig = getByClass(oDiv, 'big_pic')[0];
            var aLiBig = oUlBig.getElementsByTagName('li');

            var nowZIndex = 2;    //用于改变图片的层级，层级越大，图片越靠上，最大层级的图片永远在最上方
            var now = 0;    //为上一张和下一张做准备

            oUlSmall.style.width = aLiSmall.length*aLiSmall[0].offsetWidth+'px';    //把放小图的div加宽，使其能放下所有图片

            //左右按钮
            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 (var i=0; i<aLiSmall.length; i++){
                aLiSmall[i].index = i;
                aLiSmall[i].onclick = function(){
                    //计算当前是哪一张照片，如果是当前显示的图片，点击小图切换是，如果点击的小图和显示的大图对应，则大图没有反应即可，避免图片重复刷新
                    if (this.index == now) return;

                    now = this.index;

                    tab();  //函数调用
                };

                aLiSmall[i].onmouseover = function () {
                    startMove(this, 'opacity', 100);
                };
                aLiSmall[i].onmouseout = function () {
                    if (this.index != now) {
                        startMove(this, 'opacity', 60);
                    }
                }
            }

            //函数封装
            function tab(){
                aLiBig[now].style.zIndex = nowZIndex++;

                for (var i=0; i<aLiSmall.length;i++){
                    startMove(aLiSmall[i], 'opacity', 60);
                }
                startMove(aLiSmall[now], 'opacity', 100);

                aLiBig[now].style.height = 0;
                startMove(aLiBig[now], 'height', 320);   //控制大图片转换，转换方式是调整图片高度

                if (now == 0){      //当图片是第一张图片时，第一张小图left=0，即靠左放
                    startMove(oUlSmall, 'left', 0);
                } else if (now == aLiSmall.length-1){   //当图片为最后一张图片时，最后一张小图靠右摆放
                    startMove(oUlSmall, 'left', -(now-2)*aLiSmall[0].offsetWidth);
                } else {    //当图片既不是第一张，也不是最后一张时，靠中间摆放
                    startMove(oUlSmall, 'left', -(now-1)*aLiSmall[0].offsetWidth);
                }
                // startMove(oUlSmall, '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="img/bg1.jpg"/></li>
            <li><img src="img/bg2.jpg"></li>
            <li><img src="img/bg3.jpg"></li>
            <li><img src="img/bg4.jpg"></li>
            <li><img src="img/bg5.jpg"></li>
            <li><img src="img/bg3.jpg"></li>
        </ul>
        <div class="small_pic">
            <ul style="width: 390px;">
                <li style="filter: alpha(opacity: 100); opacity: 1;"><img src="img/bg1.jpg"/></li>
                <li><img src="img/bg2.jpg"></li>
                <li><img src="img/bg3.jpg"></li>
                <li><img src="img/bg4.jpg"></li>
                <li><img src="img/bg5.jpg"></li>
                <li><img src="img/bg3.jpg"></li>
            </ul>
        </div>
    </div>
</body>
</html>
View Code 
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;
    top: 0;
    left: 0;
    z-index: 0;
    background: url("img/loading.jpg") no-repeat center center;
    position: absolute;
}
.big_pic li img{
    width: 400px;
    height: 320px;
}

.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("img/btn.jpg") no-repeat;
    position: absolute;
    top: 130px;
    left: 10px;
    z-index: 3001;
    /*display: none;*/
    filter: alpha(opacity:0);
    opacity: 0;
    cursor: pointer;
}
.prev .next img{
    width: 60px;
    height: 60px;
}
.big_pic .next{
    width: 60px;
    height: 60px;
    background: url("img/btn.jpg") no-repeat 0 -60px;
    position: absolute;
    top: 130px;
    right: 10px;
    z-index: 3001;
    /*display: none;*/
    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: 0px;
    left: 0px;
}
.small_pic li{
    width: 120px;
    height: 94px;
    float: left;
    padding-right: 10px;
    background: url("img/loading.jpg") no-repeat center center;
    cursor: pointer;
    filter: alpha(opacity=100);
    opacity: 0.6;
}
.small_pic li img{
    width: 120px;
    height: 94px;

}
31.css 
function getStyle(obj, name){   //该方法帮助我们获取非行间（样式表里的）样式
    if(obj.currentStyle){
        return obj.currentStyle[name];
    } else {
        return getComputedStyle(obj, false)[name];
    }
}

function startMove(obj, attr, iTarget) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var cur = 0;

        if (attr == 'opacity') {
            cur = Math.round(parseFloat(getStyle(obj, attr))*100);  //乘以100符合咱们平时对opacity的设置
        } else {
            cur = parseInt(getStyle(obj, attr));
        }

        var speed = (iTarget-cur)/6;
        speed = speed>0?Math.ceil(speed):Math.floor(speed);

        if (cur==iTarget) {
            clearInterval(obj.timer);
        } else {
            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';    //IE透明度
                obj.style.opacity = (cur+speed)/100;

                var oTxt = document.getElementById('txt1');
                oTxt.value = obj.style.opacity;
            } else {
                obj.style[attr] = cur+speed+'px';
            }

        }
    }, 30);
}
31JS_StartMove.js

图片自行找，然后把名字改成文件中的图片名称即可，甚至不用管你找的图片尺寸，因为在CSS样式表中有对图片调整的代码。

仿Flash图片展示 - 2

　　下方li效果

　　　　点击切换大图——选项卡

　　　　li淡入淡出——移入移除

　　　　ul移动——位置计算

　　大图片切换

　　　　图片层级——zIndex一直加1

　　　　图片下拉效果（运动框架）

　　　　　　可改为淡入淡出

　　加入自动播放

　　　　和选项卡一样

重要知识点：

　　多物体运动

　　任意值运动

猜你喜欢

转载自www.cnblogs.com/han-bky/p/10256204.html
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022