Question

我正在尝试Gsap一个水平滚动文本，但是当我想要接收div元素的宽度以检查它的宽度（取决于动态.txt文件）它返回一个错误的宽度。有时当我刷新页面（括号）时它会给我很好的宽度，但是当我再次刷新时总会再次出错！只有当我让页面刷新而没有查看活动窗口时，并在一秒钟之后检查它是否自动刷新它会带来确切的值。

代码：

    <!DOCTYPE html>
<html>
<head>
<style>

@font-face {
    font-family: aclonica;
    src: url(./fonts/Aclonica-Regular.ttf);
}

div {
    display: inline-block;
    position: relative;
    font-family: aclonica;
    }

div.hijos{
    white-space: nowrap;
    display: inline-block;
    text-align: right;
    vertical-align: bottom;
    background-color: lightblue;
    left: 160px;
    width: 300px;
    height: 50px;
    overflow: hidden; 
    }

div.Titulos {
        display: block;
        left: 160px;
        width: 300px;
        height: 25px;
    }
.nombres {
        padding-top: 2px;
    }

.dinero {
        padding-top: 2px;
        color: #53a9ea;
    }
.Titulos{
        margin-top: 2px;
        margin-bottom: 2px;
        text-align: right;
        vertical-align: middle;
        color: #53a9ea;
        font-family: aclonica;
        font-size: 24px;
        text-shadow: 0px 0px 3px rgba(0, 0, 0, 1),1px 1px 5px rgba(0, 0, 0, 1), 0px 0px 4px rgba(0, 0, 0, 1), 0px 0px 4px rgba(0, 0, 0, 0.5);
    }
.hijos{
        display: block;
        text-align: right;
        color: #ffffff;
        font-family: aclonica;
        font-size: 22px;
        text-shadow: 0px 0px 3px rgba(0, 0, 0, 1),1px 1px 5px rgba(0, 0, 0, 1), 0px 0px 4px rgba(0, 0, 0, 1), 0px 0px 4px rgba(0, 0, 0, 0.5);
    }
.info{ 
        padding-top: 2px;
    } 
span {
        line-height: 100%;
        display: inline-block;
    }
#Top1{
        display: block;
        white-space: nowrap;
        position: relative;
        background-color:blue;
    }
.NoWrap {
        white-space: normal;

    }

#Tinfo{  
        padding-left: 5px;
        padding-right: 25px;
    }
#Tinfo2{  
        padding-left: 5px;
        padding-right: 25px;
    }

#Sline{
        line-height: 200%;
    }
.Inline{
        display: inline-block;
        vertical-align:top;
    }
#Inside1{
        position: relative;
        display:inline-block;
        background-color: chocolate;

    }
#Inside2{
        position: relative;
        display:inline-block;
        background-color:chartreuse;
    }
#TDonator{
        display: block;
    }



</style>

<script src="js/jquery.js"></script>
<script src="js/TimelineLite.min.js"></script> 
<script src="js/TimelineMax.min.js"></script> 
<script src="js/TweenMax.min.js"></script>
<script type="text/JavaScript">
setTimeout("location.href = 'TwitchAlerts.html';",30000);
</script>


</head>
<body  bgcolor="#E6E6FA">

<div id="5Don" class="Titulos" >Last 5 Donators</div>
<div id="Donators" class="hijos"></div>   
<div id="LastF" class="Titulos" >Last Follow</div>
<div id="Follower" class="hijos" class="NoWrap"></div>
<div id="TopDonator" class="Titulos" >Top Donator</div>
<div id="TDonator" class="hijos"></div>
<div id="salida1" ><h1></h1></div>   
<div id="salida2" >holaaaaa</div> 
<div id="salida3" ></div>

<script>
function hola(){
    $("#Follower").load("../StreamLabs/most_recent_follower.txt");
    $("#Donators").load("../StreamLabs/session_donators.txt");                
    $("#TDonator").load("../StreamLabs/all_time_top_donator.txt");

}   
hola(); 
function animation(){

    //var width1 = $Inside1.width();

    var tl = new TimelineMax();
     tl.staggerFrom(".Titulos", 0.5, {left:400, autoAlphalpha:0, ease: Back.easeOut.config(1.7)},0.25);
    //.from("#Inside1", 5, {left:500, autoAlphalpha:0, ease: Linear.easeNone},0.25);


    var $hold = $("#Inside1");
    var $holdclone = $("#Inside2");


    var listWidth = $("#Inside1").width();
    //var listWidth = 253.36; //Real Value//
    //listWidth = document.getElementById("Inside1").offsetWidth;;
    document.getElementById("salida1").innerHTML = listWidth;

    var salida2 =  document.getElementById("Tname").offsetWidth;
    //var salida2 = " uno "
    document.getElementById("salida2").innerHTML = "hola a todos si "+salida2;

    var infinite = new TimelineMax({repeat: -1, paused: false});
    var time = 10;

    infinite.fromTo($hold, time, {left:0}, {left: -listWidth, ease: Linear.easeNone}, 1);
    infinite.fromTo($holdclone, time, {left:0}, {left:-listWidth, ease: Linear.easeNone}, 1);
    infinite.fromTo($hold, time, {left:0}, {left: -250, ease: Linear.easeNone}, 11);
    infinite.fromTo($holdclone, time, {left:0}, {left: -250, ease: Linear.easeNone}, 11);
    //infinite.set($hold, {left: 50});
    //infinite.to($holdclone, time, {left: -listWidth, ease: Linear.easeNone}, time);
    //infinite.to($hold, time, {left: 0, ease: Linear.easeNone}, time);
}   

$(document).ready(function(){

        var str = document.getElementById("Donators").innerHTML;
        var res = str.split(" ");

        document.getElementById("Donators").innerHTML  ="";
        for (i = 1; i < res.length; i+=2) {
            document.getElementById("Donators").innerHTML  += '<span class="nombres">'+res[i-1] +'</span>';
            document.getElementById("Donators").innerHTML  += ' <span class="dinero">'+res[i] +' </span> ';
        }

        var str2 = document.getElementById("TDonator").innerHTML;
        var res2 = str2.split(" ");
        document.getElementById("TDonator").innerHTML  ="";
        document.getElementById("TDonator").innerHTML  += '<div id="Top1"><div id="Inside1" ><div class="info2 nombres"  id="Tname" >'+res2[0] +' </div><div class="info2 dinero" id="Tinfo">'+res2[1] +'</div></div></div>';

        $('<div id="Inside2"><div class="info2 nombres" id="Tname2" >'+"hola" +' </div><div class="info2 dinero" id="Tinfo2"> '+"res2[1]" +'</div></div>').insertAfter("#Inside1");

        var str3 = document.getElementById("Follower").innerHTML;
        document.getElementById("Follower").innerHTML  = '<span class="info" id="Fline">'+str3 +' </span><br><span  class="info" id="Sline">'+str3+'</span>';

    animation();
});
</script>

.Width（）＆amp; .clientWidth获得相同的错误信息

0 个答案: