JS реализует полный пример текстового прокрутки вниз

Автор：Eve Cole Время обновления：2025-05-15 13:16:01

В этой статье описывается метод JS для прокрутки текста вниз. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:

Кода -копия выглядит следующим образом:

<! Доктип>

<html>

<голова>

<title> jd.com и taobao listing </title>

<style>

@Charset "UTF-8";

@name: база

@Function: сбросить стиль браузера по умолчанию

/* Предотвращение влияния пользовательского цвета фона на веб-страницах, добавьте, чтобы пользователи настраивали шрифты*/

html {

Цвет:#000; фон: #fff;

-Вебкит-текст-размер-100%;

-М-мс-текст-размер-100%;

}

/* Внутренние и внешние поля обычно по -разному делают позиции каждого стиля браузера*///

Body, Div, DL, DT, DD, UL, OL, LI, H1, H2, H3, H4, H5, H6, Pre, Code, Form, Fieldset, Legend, Input, Textarea, P, Blockquote, TH, TD, HR, Button, Arti

CLE, в сторону, детали, фигнирование, фигура, нижний колонтитул, заголовок, hgroup, меню, навигация, раздел {

Полевая: 0; прокладка: 0;

Цвет:#333;

}

/ * Сбросить теги HTML5, то есть необходимо создать (тег) в JS */

Статья, в стороне, детали, фигнирование, фигура, нижний колонтитул, заголовок, hgroup, меню, навигация, раздел {

дисплей: блок;

}

/* HTML5 Media Files соответствуют IMG*/

аудио, холст, видео {

дисплей: inline-block;*дисплей: inline;*Zoom: 1;

}

/* Обратите внимание, что элементы формы не наследуют родительский шрифт*/

тело, кнопка, ввод, выберите, Textarea {

Шрифт: 12px/1,5 Tahoma, Arial, // 5b8b // 4f53;

}

Ввод, выберите, Textarea {

размер шрифта: 100%;

}

/* Удалите поля каждой ячейки таблицы и сделайте его края перекрывать*/

стол{

пограничный коллапс: коллапс; Расхождение границы: 0;

}

/* Т.е. Исправлена ошибка: th не наследует текстовое значение*/

th {

Текст-альбом: наследуя;

}

/* Удалить границу по умолчанию*/

Fieldset, img {

граница: 0;

}

/* IE6 7 8 (Q) ошибка отображается как встроенная производительность*/

iframe {

дисплей: блок;

}

/* Удалите границу этого элемента под Firefox*/

abbr, аббревиатура {

граница: 0; font-variant: нормальный;

}

/* Последовательный стиль Del*/

del {

Текстовое декорация: проводятся линейки;

}

Адрес, заголовок, цитирование, код, dfn, em, th, var {

в стиле шрифта: нормальный;

шрифт-вес: 500;

}

/ * Удалите логотип перед списком, LI наследует */

ol, ul {

Список стиля: нет;

}

/* Выравнивание является наиболее важным фактором в типографии, не сосредоточьте все*/

Подпись, th {

Текст-альбом: слева;

}

/* Из Yahoo, создайте заголовки на заказ, адаптируйтесь к нескольким системным приложениям*/

H1, H2, H3, H4, H5, H6 {

размер шрифта: 100%;

шрифт-вес: 500;

}

Q: До, Q: после {

содержание:'';

}

/* Unified SuperScript и Script*/

sub, sup {

размер шрифта: 75%; высота линии: 0; позиция: относительно; Вертикальный аровка: базовая линия;

}

sup {top: -0.5em;}

sub {внизу: -0.25em;}

a {

Цвет: #333;

}

/* Пусть отображение ссылки подчеркнет в состоянии пахни*/

A: Hover {

Текстовое декорация: подчеркивание;

Цвет: #C00;

}

/* Нет подключения по умолчанию, сохраняя страницу краткой*/

ins, a {

Текстовое декорация: нет;

}

/* Очистить поплавок*/

.fn-clear: после {

видимость: скрыта;

дисплей: блок;

размер шрифта: 0;

содержание:" ";

ясно: оба;

высота: 0;

}

.fn-clear {

Увеличение: 1; / * для IE6 IE7 */

}

/* Скрыть, обычно используется для сотрудничества с JS*/

тело .fn-hide {

дисплей: нет;

}

/ * Установите встроенным, чтобы уменьшить ошибки, вызванные плаванием */

.fn-left, .fn-right {

дисплей: inline;

}

.fn-left {

Плавание: осталось;

}

.fn-right {

Поплавок: верно;

}

#club {ширина: 888px; высота: 190px; маржа: 40px auto; граница: 1px solid #ddddddd; граница-радий: 5px 5px 0px 0px;}

#club .modle {width: 443px; высота: 190px; граница правая: 1px solid #ddddddd; float: left;}

#club .modle_right {граница правая: none; float: right;}

#club .modle .modle_title {width: 443px; высота: 29px; line-hight: 29px; font-size: 12px; font-weight: bold; фон:#f3f3f3;}

#club .modle .modle_title span {padding-left: 7px;}

#club .modle .modle_con {width: 423px; margin: 0 Auto; высота: 160px; переполнение: скрыто;}

#club .modle .modle_con ul li {border-bottom: 1px #ddd detted; положение: относительно;}

#club .modle .modle_con .modle_img {width: 50px; высота: 79px; text-align: center;}

#club .modle .modle_con .modle_img img {margin-top: 14px;}

#club .modle .modle_con .modle_img i {display: block; width: 15px; высота: 17px; фон: url (../ image/buy.png) без повторного зарождения; позиция: абсолют; верх: 10px; слева: 60px;}

#club .modle .modle_con .modle_text {width: 337px; высота: 60px; переполнение: скрыто; маржа-stop: 15px; ladding-left: 8px;}

#club .modle .modle_con .modle_text pa {color:#005ea7;}

#club .modle .modle_con .modle_text div a {color:#999999;}

</style>

</head>

<тело>

<h2> <pan> Популярный список </span> </h2>

<div>

<ul>

<li>

<div>

<p> <a href = "###"> очень хороший электрический чайник </a> </p>

<Div> <a href = ""> скорость очень быстро. Сигнал хорош и легко настроить. Самое главное, чтобы увидеть, сколько трафика используется </a> </div>

</div>

</li>

<li>

<div>

<p> <a href = "###"> очень хороший электрический чайник </a> </p>

</div>

</li>

<li>

<div>

<p> <a href = "###"> очень хороший электрический чайник </a> </p>

</div>

</li>

<li>

<div>

<p> <a href = "###"> очень хороший электрический чайник </a> </p>

</div>

</li>

<li>

<div>

<p> <a href = "###"> очень хороший электрический чайник </a> </p>

</div>

</li>

</ul>

</div>

<h2> <pan> Популярный список </span> </h2>

<div>

<ul>

<li>

<div>

<p> <a href = "###"> очень хороший электрический чайник </a> </p>

</div>

</li>

<li>

<div>

<p> <a href = "###"> очень хороший электрический чайник </a> </p>

</div>

</li>

<li>

<div>

<p> <a href = "###"> очень хороший электрический чайник </a> </p>

</div>

</li>

<li>

<div>

<p> <a href = "###"> очень хороший электрический чайник </a> </p>

</div>

</li>

<li>

<div>

<p> <a href = "###"> очень хороший электрический чайник </a> </p>

</div>

</li>

</ul>

</div>

</div> <!-Club End->

<Скрипт>

$ (function () {

Функция Scolldown (id, Time) {

var liHeight = $ ("#"+id+"ul li"). Height ();

var time = время || 2500;

setInterval (function () {

$ ("#"+id+"ul"). Prepend ($ ("#"+id+"ul li: last"). css ("высота", "0px"). Анимат ({{{{

Высота: LiHeight+"px"

},"медленный"));

},время);

}

Scolldown ("MODLE_LEFT");

Scolldown ("modle_right", 3000);

});

</script>

</body>

</html>

Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.