js-帶運動效果的留言板

阿新 • • 發佈：2019-01-04

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #ul1{
                position: absolute;
                right: 10px;
                top: 8px;
                width: 700px;
                height: 500px;
                border: 1px solid black;
                margin:  
0;
                padding: 10px;
                overflow: hidden;
            }
            li{
                line-height: 28px;
                border-bottom: 1px dotted #000;
                list-style: none;
                word-break: break-all;
                overflow: hidden;            
            }
         
</style>
        <script src="move.js"></script>
        <script>
            window.onload=function(){
                var oContent=document.getElementById("content");
                var oBtn=document.getElementById("btn");
                var oUl=document.getElementById("ul1");
                
                oBtn.onclick 
=function(){
                    var oLi=document.createElement("li");
                    oLi.innerHTML=oContent.value;
                    if(oUl.children[0]){
                        oUl.insertBefore(oLi,oUl.children[0]);
                    }else{
                        oUl.appendChild(oLi)
                    }
                    var iHeight=parseInt(css(oLi,"height"));
                    oLi.style.height="0px";
                    oLi.style.opacity="0";
                    oLi.style.filter="alpha(opacity=0)";
                    startMove(oLi,{
                        height:iHeight,
                        opacity:100
                    })
                }
            }
        </script>
    </head>
    <body>
        <textarea id="content" rows="10" cols="50"></textarea>
        <input type="button" value="留言" id="btn" />
        <ul id="ul1">
            <li>111111111111</li>
            <li>111111111111</li>
            <li>111111111111</li>
            <li>111111111111</li>
            <li>111111111111</li>
        </ul>
    </body>
</html>

function startMove(obj, json, fn) {
    clearInterval(obj.iTimer);
    var iCur = 0;
    var iSpeed = 0;
    obj.iTimer = setInterval(function() {

        var iBtn = true;

        for(var attr in json) {
            var iTarget = json[attr];
            if(attr == "opacity") {
                iCur = Math.round(css(obj, "opacity") * 100);
            } else {
                iCur = parseInt(css(obj, attr));
            }

            iSpeed = (iTarget - iCur) / 8;

            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

            if(iCur != iTarget) {
                iBtn = false;
                if(attr == "opacity") {
                    obj.style.opacity = (iCur + iSpeed) / 100;
                    obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed) + ')';
                } else {
                    obj.style[attr] = iCur + iSpeed + 'px';
                }
            }

        }
        if(iBtn) {
            clearInterval(obj.iTimer);
            fn && fn.call(obj);
        }

    }, 30);
}

function css(obj, attr) {
    if(obj.currentStyle) {
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, false)[attr];
    }
}

js-帶運動效果的留言板

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style>

JS原生編寫實現留言板功能

實現這個留言板功能比較簡單，所以先上效果圖：實現使用者留言內容，留言具體時間。 <script> window.onload = function(){ var oMess

使用three.js實現機器人手臂的運動效果

rotation 讓我 mes 特殊性骨骼都是包括跟著實現圖　　Three.js 是一款運行在瀏覽器中的 3D 引擎，你可以用它創建各種三維場景，包括了攝影機、光影、材質等各種對象。你可以在它的主頁上看到許多精彩的演示。不過，這款引擎目前還處在比較不成熟的開發

vue學習筆記第一天-vue.js簡易留言板

fad ima con targe right 彈出框 n) ade ack <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l

js簡易留言板

() != date() turn eth create rip eply doc <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

js 實現簡易留言板功能

con wid NPU children 標準 element 出錯 hdel focus <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

DOM操作相關案例模態對話框,簡易留言板,js模擬選擇器hover,tab選項卡,購物車案例

order 選擇器點擊 ttr 選擇 this 鼠標懸停 pos 清空 1.模態框案例需求：打開網頁時有一個普通的按鈕，點擊當前按鈕顯示一個背景圖，中心並彈出一個彈出框，點擊X的時候會關閉當前的模態框代碼如下： <!DOCTYPE html> &l

vue.js生命週期鉤子、過濾器、互動練習001 仿留言板

需求: 呼叫介面獲取留言資料過濾時間只取年月日開啟網頁便執行請求程式碼: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /&g

留言板驗證js+php+mySQL

//表單驗證function verify(){ //form提交之前先判空 var mfzdlj = $(".mfzdlj").val().trim(); var mfname = $("#mfuse

js寫的留言板。

VUE.JS做的留言板

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdn.

D3.js實現帶動畫效果的柱狀圖

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content

js簡單圖片版時鐘，帶翻轉效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>時鐘</title> <style type="text/css">

React.js留言板（Mock.js模仿資料互動）

React 起源於 Facebook 的內部專案，因為該公司對市場上所有JavaScript 框架都不滿意，都不滿意，就決定自己寫一套，用來架設Instagram的網站。做出來以後，發現這套東西很好用，就在2013年5月開開源了。由於 React 的設計思想極其獨

留言板（初學者使用js實現）

select input creat cto app tno element innerhtml insert 代碼如下： <!DOCTYPE html> <html lang="en"> <head> 　　<meta

jsp做的一個簡易留言板功能

cti var llb onload 計算 bst image message html 1.先登錄才能留言 2.可以留言 3.可以回復 4.自己寫的留言可以自己刪除 5.留言進行分頁顯示，避免留言只能顯示一部分 1.登錄後會有 2.寫留言提交按鈕在你沒寫東西前是

js 分享運動框架

tag width 速度 cti back script oct 分享 ear <!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔&

js（運動）

如果 scrip 定時 etl 定時器 oct nload utf log 一、使一個物體運動到一定位置停止。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="

微信公眾平臺開發之留言板

tracking time 方法 ref font img 建議 south data- 微信公眾平臺開發之留言板是方便用戶互相之間交流的最好方法。關註微信公號的用戶之間是不能進行對話的。為了方便用戶之間的交流留言板起到了非常大的作用。當用戶進入留言板後能夠在上面留

JSP實現留言板分頁顯示，新留言顯示在第一個~

date() sdf style string hid pre || lan pat 頁面效果圖：留言Servlet-----MessageServlet package cn.MuJH.newsManager.servlet; import java.io.

js-帶運動效果的留言板

相關推薦