Блог

Главная - Вопросы по программированию - Как сделать, чтобы содержимое начиналось посередине / вверху вместо низа?

Как сделать, чтобы содержимое начиналось посередине / вверху вместо низа?

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Я использую этот javascript, чтобы заставить изображения прокручиваться вертикально снизу вверх, но я не могу понять, как заставить изображения начинать прокрутку, когда рамка заполнена. Прямо сейчас он пуст, когда загружается сайт / скрипт, и я хотел бы это изменить.

Спасибо! (Прошу прощения за длинный код)

Вот код:

 <script>

step = 1
nextMessage = 1

counter = 20;

function initTSV1() {
    tsvDisplay = document.getElementById("tsvcont")

    for (var i = 0; i < 2; i  ) {
        newDiv = document.createElement("DIV")
        newDiv.setAttribute("id", "tsvdiv"   i)

/*newDiv.onmouseover=function(){
    clearTimeout(timer);
    counter = 40;
}

newDiv.onmouseout=function(){
    counter = 20;
    scrollTSV1();
}*/

        newDiv.style.position = "absolute"
        newDiv.style.padding = "0 5 0 10" // top right bottom left
        tsvDisplay.appendChild(newDiv)
    }

    tsvDv0 = document.getElementById("tsvdiv0")
    tsvDv1 = document.getElementById("tsvdiv1")
    tsvDv0.innerHTML = info[0]
    tsvDv1.innerHTML = info[1]

    tsvDv0.style.top = tsvDisplay.offsetHeight
    tsvDv1.style.top = tsvDisplay.offsetHeight   tsvDv0.offsetHeight   "px"

    scrollTSV1()
}

function scrollTSV1() {

/*$("#tsvcont").mouseover(function() {
    counter = 40;

}).mouseout(function() {
    counter = 20;
});*/


    $("#tsvcont").mouseout(function() {
        counter = 20;
    }).mouseover(function() {
        counter = 40;
    });



    tsvDv0Pos = parseInt(tsvDv0.style.top)
    tsvDv1Pos = parseInt(tsvDv1.style.top)

    tsvDv0Pos -= step
    tsvDv1Pos -= step

    tsvDv0.style.top = tsvDv0Pos   "px"
    tsvDv1.style.top = tsvDv1Pos   "px"

    if (tsvDv0Pos < -tsvDv0.offsetHeight) {

        nextMessage  
        if (nextMessage == info.length) {
            nextMessage = 0
        }
        tsvDv0.innerHTML = info[nextMessage]

        if (tsvDv1.offsetHeight < tsvDisplay.offsetHeight) {

            if (tsvDv1.offsetTop < tsvDisplay.offsetHeight - tsvDv1.offsetHeight) {
                tsvDv0.style.top = tsvDisplay.offsetHeight   "px"
            }
            else {
                tsvDv0.style.top = tsvDv1.offsetTop   tsvDv1.offsetHeight   "px"
            }

        }
        else {
            tsvDv0.style.top = tsvDv1.offsetTop   tsvDv1.offsetHeight   "px"
        }

    }

    if (tsvDv1Pos < -tsvDv1.offsetHeight) {

        nextMessage  
        if (nextMessage == info.length) {
            nextMessage = 0
        }
        tsvDv1.innerHTML = info[nextMessage]

        if (tsvDv0.offsetHeight < tsvDisplay.offsetHeight) {

            if (tsvDv0.offsetTop < tsvDisplay.offsetHeight - tsvDv0.offsetHeight) {
                tsvDv1.style.top = tsvDisplay.offsetHeight   "px"
            }
            else {
                tsvDv1.style.top = tsvDv0.offsetTop   tsvDv0.offsetHeight   "px"
            }

        }
        else {
            tsvDv1.style.top = tsvDv0.offsetTop   tsvDv0.offsetHeight   "px"
        }

    }

    timer = setTimeout("scrollTSV1()", counter);

}

// add onload="initTSV1()" to the opening BODY tag

</script>

<style>

#tsvcont{
    position:relative;
    width:290px;          /* width = target width - (border * 2) */
    height:500px;
    overflow:hidden;
    text-align:left;
}

#tsvdiv0 {
    position:absolute;
    width:290px;          /* width = tsvcont width - ((border   padding) * 2) */
    padding:0px 0px 30px 0px;
    height:600px;

}
#tsvdiv1{
    position:relative;
    width:290px;          /* width = tsvcont width - ((border   padding) * 2) */
    padding:30px 5 0px 5;
    height:600px;

    }
</style>


</HEAD>
<BODY onLoad="initTSV1()">
<DIV id="tsvcont" style="position:relative; width:290px; height:500px; overflow:hidden; text-align:left; left: 50px";></DIV>

Комментарии:

1. в stack вам следует выбрать один ответ на ваши вопросы, поскольку accepted таким образом, в будущих вопросах люди будут более склонны помогать ^_^

2. Спасибо, чувак 🙂 Я сделал это сейчас 🙂

Ответ №1:

вместо размещения функции в теле выгружается, поскольку вы используете jQuery

попробуйте это:

 $(function(){
   initTSV1();
});

поместите это куда-нибудь в скрипт

Комментарии:

1. Я не совсем понимаю, куда это поместить, поскольку уже есть функция <code> initTSV1(){ tsvDisplay=document.getElementById(«tsvcont»)</ code> Не могли бы вы объяснить это немного подробнее, пожалуйста? 🙂 Спасибо

2. Код Нила — это вызов function initTSV1() функции. IIRC, $(function(){...} это в основном сокращение от document.ready() . Другими словами, он вызывается initTSV1() после того, как страница полностью загружена и готова к работе.

3. Спасибо, Шона, но я все еще не знаю, куда поместить код. Я не знаком с jquery. Должен ли я вызывать код с помощью <script type=»javascript»> $(function(){ initTSV1(); }); </script> или я должен поместить это в функцию come somewhere?

4. @Jaoza — Вы можете поместить это в свой собственный тег script, если хотите (хотя я бы ограничил это действительно простыми вещами, эта функция может стать действительно длинной, действительно быстрой, если у вас много JS). Обычно у меня есть файл master .js, в котором хранится большая часть моих пользовательских материалов, и я помещаю его в начало.

5. @Shauna спасибо за вашу помощь, но я должен попросить вас объяснить подробнее, поскольку я не знаю точно, где мы сейчас находимся 🙂 Итак, исходный код (длинный код, с которого я начал этот поток), что с ним нужно сделать? Достаточно ли, если я добавлю код, который Нил написал в начале скрипта, или мне следует что-то заменить? Я действительно не понимаю, так как я действительно не понимаю, как работает скрипт. Спасибо за понимание.