Wirkung:
Idee:
Verwenden Sie den multifunktionalen schwebenden Bewegungsrahmen, um den Weibo-Effekt zu erzielen. Fügen Sie zunächst die Attribute im Textbereich zum neu erstellten li hinzu, fügen Sie dann das li zum ul hinzu und verwenden Sie dann den schwebenden Bewegungsrahmen, um die Daten dynamisch anzuzeigen.
Code:
Kopieren Sie den Codecode wie folgt:
<head runat="server">
<title></title>
<style type="text/css">
*
{
Rand: 0;
Polsterung: 0;
}
#ul1
{
Breite: 300px;
Höhe: 300px;
Rand: 1 Pixel einfarbig schwarz;
Rand: 10 Pixel automatisch;
Überlauf: versteckt;
}
#ul1li
{
Listenstil: keiner;
Polsterung: 4px;
border-bottom: 1px #999 gestrichelt;
Überlauf: versteckt;
Deckkraft: 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
var btn = document.getElementById('btn');
var txt = document.getElementById('t1');
var oUl = document.getElementById('ul1');
btn.onclick = function () {
var cLi = document.createElement('li');
cLi.innerHTML = txt.value; //Daten zu li hinzufügen
txt.value = '';
if (oUl.children.length > 0) { //Bestimmen Sie, ob bereits li vorhanden ist. Wenn ja, fügen Sie es ein. Wenn nicht, erstellen Sie ein neues
oUl.insertBefore(cLi, oUl.children[0]);
} anders {
oUl.appendChild(cLi);
}
var iHeight = cLi.offsetHeight; //Ermitteln Sie die Höhe von li
cLi.style.height = '0';
move(cLi, { height: iHeight }, function () { //Verwenden Sie dann die schwebende Bewegung, um die Daten anzuzeigen
move(cLi, { opacity: 100 });
});
}
}
//------------------------------------------------ ----------------------------------
//Den Nicht-Interline-Stil abrufen
Funktion getStyle(ojb, name) {
if (ojb.currentStyle) {
return ojb.currentStyle[name];
}
anders {
return getComputedStyle(ojb, false)[name];
}
}
//Anwendung der Pufferbewegung JSON
//json{attr,finsh}
//json{width:200,height:200}
function move(obj, json, fnName) { //obj ist das Objekt, Json ist das Attribut des Objekts, fnName ist die Funktion
clearInterval(obj.timer); //Vorherigen Timer schließen
obj.timer = setInterval(function () {
var timeStop = true; //Aufzeichnen, ob alle Attribute ausgeführt wurden
for (var attr in json) { //Durchlaufe die Daten in json
var oGetStyle = 0;
if (attr == 'opacity') { //Transparenz beurteilen
oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100); //Transparenz wird gerundet und nach der Konvertierung zugewiesen
}
anders {
oGetStyle = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - oGetStyle) / 5; //Geschwindigkeit finden
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //Carry-Rundung
if (oGetStyle != json[attr])
timeStop = false;
if (attr == 'opacity') { //Transparenz
obj.style.filter = 'alpha(opacity:' + (oGetStyle + speed) + ')' //Der Transparenz einen Wert zuweisen
obj.style.opacity = (oGetStyle + Geschwindigkeit) / 100;
}
anders {
obj.style[attr] = oGetStyle + speed + 'px'; //Div verschieben
}
}
if (timeStop) { //Wenn alle Eigenschaften ausgeführt wurden, schließen Sie den Timer
clearInterval(obj.timer);
if (fnName) { //Funktion, die ausgeführt werden soll, wenn der Timer ausgeschaltet ist
fnName();
}
}
}, 30)
}
//------------------------------------------------ ----------------------------------
</script>
</head>
<Körper>
<textarea id="t1"></textarea>
<input type="button" id="btn" value="Publish" />
<ul id="ul1">
<li style="display: none;"></li>
</ul>
</body>