ผล:
ความคิด:
ใช้เฟรมการเคลื่อนไหวแบบลอยตัวแบบมัลติฟังก์ชั่นเพื่อให้ได้เอฟเฟกต์ Weibo ขั้นแรก เพิ่มแอตทริบิวต์ในพื้นที่ข้อความไปยัง li ที่สร้างขึ้นใหม่ จากนั้นเพิ่ม li ลงใน ul จากนั้นใช้เฟรมการเคลื่อนไหวแบบลอยเพื่อแสดงข้อมูลแบบไดนามิก
รหัส:
คัดลอกรหัสรหัสดังต่อไปนี้:
<หัว runat="เซิร์ฟเวอร์">
<title></title>
<style type="text/css">
-
-
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
-
#ul1
-
ความกว้าง: 300px;
ความสูง: 300px;
เส้นขอบ: 1px สีดำทึบ;
ระยะขอบ: 10px อัตโนมัติ;
ล้น: ซ่อนเร้น;
-
#ul1li
-
รายการสไตล์: ไม่มี;
ช่องว่างภายใน: 4px;
ขอบล่าง: 1px #999 ประ;
ล้น: ซ่อนเร้น;
ความทึบ: 0;
-
</สไตล์>
<script type="text/javascript">
window.onload = ฟังก์ชั่น () {
var btn = document.getElementById('btn');
var txt = document.getElementById('t1');
var oUl = document.getElementById('ul1');
btn.onclick = ฟังก์ชั่น () {
var cLi = document.createElement('li');
cLi.innerHTML = txt.value; //เพิ่มข้อมูลลงใน li
txt.value = '';
if (oUl.children.length > 0) {//ตรวจสอบว่ามี li อยู่แล้วหรือไม่ ถ้ามี ให้แทรกเข้าไป ถ้าไม่มี ให้สร้างใหม่
oUl.insertBefore(cLi, oUl.children[0]);
} อื่น {
oUl.ผนวกเด็ก(cLi);
-
var iHeight = cLi.offsetHeight; // รับความสูงของ li
cLi.style.height = '0';
move(cLi, { height: iHeight }, function () {//จากนั้นใช้การเคลื่อนที่แบบลอยตัวเพื่อแสดงข้อมูล
ย้าย (cLi, { ความทึบ: 100 });
-
-
-
//------------------------------------------------ ----------------------------------
//รับสไตล์ที่ไม่ใช่แบบอินไลน์
ฟังก์ชั่น getStyle (ojb ชื่อ) {
ถ้า (ojb.currentStyle) {
กลับ ojb.currentStyle[ชื่อ];
-
อื่น {
กลับ getComputedStyle (ojb, false) [ชื่อ];
-
-
//การประยุกต์ใช้บัฟเฟอร์การเคลื่อนไหว json
//json{attr,finsh}
//json{ความกว้าง:200,ความสูง:200}
function move(obj, json, fnName) { //obj คืออ็อบเจ็กต์, Json คือแอ็ตทริบิวต์ของอ็อบเจ็กต์, fnName คือฟังก์ชัน
clearInterval(obj.timer); //ปิดตัวจับเวลาก่อนหน้า
obj.timer = setInterval (ฟังก์ชัน () {
var timeStop = true; //บันทึกว่าแอ็ตทริบิวต์ทั้งหมดถูกดำเนินการหรือไม่
for (var attr in json) { //สำรวจข้อมูลใน json
var oGetStyle = 0;
if (attr == 'ความทึบ') { // ตัดสินความโปร่งใส
oGetStyle = Math.round(parseFloat(getStyle(obj, attr)) * 100); // ความโปร่งใสจะถูกปัดเศษ จากนั้นจึงกำหนดหลังการแปลง
-
อื่น {
oGetStyle = parseInt(getStyle(obj, attr));
-
ความเร็ว var = (json [attr] - oGetStyle) / 5; // ค้นหาความเร็ว
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // ปัดเศษ
ถ้า (oGetStyle != json[attr])
หยุดเวลา = เท็จ;
if (attr == 'ความทึบ') { //Transparency
obj.style.filter = 'alpha (ความทึบ:' + (oGetStyle + speed) + ')'; // กำหนดค่าเพื่อความโปร่งใส
obj.style.opacity = (oGetStyle + ความเร็ว) / 100;
-
อื่น {
obj.style[attr] = oGetStyle + ความเร็ว + 'px'; //ย้าย div
-
-
if (timeStop) { // หากคุณสมบัติทั้งหมดถูกดำเนินการแล้ว ให้ปิดตัวจับเวลา
clearInterval(obj.จับเวลา);
if (fnName) { //ฟังก์ชั่นที่จะดำเนินการเมื่อปิดตัวจับเวลา
fnชื่อ();
-
-
}, 30)
-
//------------------------------------------------ ----------------------------------
</สคริปต์>
</หัว>
<ร่างกาย>
<textarea id="t1"></textarea>
<ประเภทอินพุต = "ปุ่ม" id = "btn" value = "เผยแพร่" />
<ul id="ul1">
<li style="display: none;"></li>
</ul>
</ร่างกาย>