Эффект:
Идея:
Используйте многофункциональный плавающий кадр движения для достижения эффекта Weibo. Сначала добавьте атрибуты в текстовой области к вновь созданному li, затем добавьте li в ul, а затем используйте плавающий кадр движения для динамического отображения данных.
Код:
Скопируйте код кода следующим образом:
<head runat="сервер">
<title></title>
<style type="text/css">
*
{
маржа: 0;
заполнение: 0;
}
#ul1
{
ширина: 300 пикселей;
высота: 300 пикселей;
граница: 1 пиксель, сплошная черная;
поле: 10 пикселей авто;
переполнение: скрыто;
}
#ul1li
{
стиль списка: нет;
отступ: 4 пикселя;
border-bottom: 1px #999 пунктирный;
переполнение: скрыто;
непрозрачность: 0;
}
</стиль>
<тип сценария="текст/javascript">
window.onload = функция () {
var btn = document.getElementById('btn');
var txt = document.getElementById('t1');
var oUl = document.getElementById('ul1');
btn.onclick = функция () {
вар cLi = document.createElement('li');
cLi.innerHTML = txt.value; //Добавляем данные в li
txt.value = '';
if (oUl.children.length > 0) { //Определяем, есть ли уже li, если да, вставляем его, если нет, создаем новый
oUl.insertBefore(cLi, oUl.children[0]);
} еще {
oUl.appendChild(cLi);
}
var iHeight = cLi.offsetHeight; //Получаем высоту li;
cLi.style.height = '0';
move(cLi, { height: iHeight }, function () { //Затем используем плавающее движение для отображения данных
move(cLi, {opacity: 100});
});
}
}
//------------------------------------------------ ----------------------------------
//Получаем немежстрочный стиль
функция getStyle(ojb, name) {
если (ojb.currentStyle) {
вернуть ojb.currentStyle[имя];
}
еще {
return getComputedStyle(ojb, false)[имя];
}
}
//Применение буферизации движения json
//json{attr,finsh}
//json{ширина:200,высота:200}
function move(obj, json, fnName) { //obj — объект, Json — атрибут объекта, fnName — функция
ClearInterval(obj.timer); //Закрываем предыдущий таймер
obj.timer = setInterval(function () {
var timeStop = true; //Записываем, все ли атрибуты были выполнены
for (var attr in json) { //Обходим данные в json
вар oGetStyle = 0;
if (attr == 'opacity') { //Оцениваем прозрачность
oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100 //Прозрачность округляется, а затем присваивается после преобразования
}
еще {
oGetStyle = parseInt(getStyle(obj, attr));
}
var скорость = (json[attr] - oGetStyle) / 5 //Найти скорость;
скорость = скорость > 0 ? Math.ceil(скорость): Math.floor(скорость); //Выполнить округление;
если (oGetStyle != json[attr])
timeStop = ложь;
if (attr == 'opacity') { //Прозрачность
obj.style.filter = 'alpha(opacity:' + (oGetStyle + Speed) + ')' //Присвоение значения прозрачности
obj.style.opacity = (oGetStyle + скорость)/100;
}
еще {
obj.style[attr] = oGetStyle + скорость + 'px' //Переместить div;
}
}
if (timeStop) { //Если все свойства выполнены, то закрываем таймер
ClearInterval (obj.timer);
if (fnName) { //Функция, которая будет выполняться при выключении таймера
имяфн();
}
}
}, 30)
}
//------------------------------------------------ ----------------------------------
</скрипт>
</голова>
<тело>
<textarea id="t1"></textarea>
<input type="button" id="btn" value="Publish" />
<ul id="ul1">
<li style="display: none;"></li>
</ul>
</тело>