• 带有动画效果的微博发布仿写


    程序里需要注意的是:<textarea>里面的内容用只能用.value获取,用.innerHTML或者.innerText是无法获取的。

    程序中用有一处动画是用tween.js完成的,tween.js文件使用说明及下载地址:http://www.cnblogs.com/cloudgamer/archive/2009/01/06/1369979.html

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>新浪微博动画版</title>
            <style media="screen">
                *{
                    margin: 0px;
                    padding: 0px;
                }
                .outlinewrap{
                    width: 600px;
                    margin: 20px auto;
                }
                .wrap{
                    width: 600px;
                    height: 165px;
                    padding: 7px;
                    border: 1px solid #ddd;
                }
                .headWrap{
                    padding-top: 6px;
                    padding-bottom:13px;
                }
                .head{
                    text-align: right;
                }
                .head a{
                    text-decoration: none;
                    color: red;
                }
                .inputWordWrap textarea{
                    width: 100%;
                    height: 77px;
                    resize: none;
                    outline: none;
                    border: none;
                }
                .inputWordWrap {
                    border: 1px solid #ccc;
                }
                footer{
                    margin-top: 10px;
                    text-align: right;
                }
                #releaseBtn{
                    text-decoration: none;
                    color: white;
                    padding: 10px 20px;
                    background-color: #ffc09f;
                    display: inline-block;
                    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.15) inset;
                }
                .clickInputBordStyle{
                    border: 1px solid #eb7350;
                    box-shadow: none;
                }
                .show{
                    overflow: hidden;
                    width: 600px;
                    padding: 7px;
                }
                .name{
                    float: left;
                    width: 40%;
                    padding: 10px;
                }
                .dele{
                    float: right;
                    display: inline;
                    padding: 10px;
                    text-align: right;
                }
                .dele:hover{
                    color: red;
                    cursor: pointer;
                }
                .message_text{
                    padding: 10px 0px;
                    word-wrap:break-word;
                    clear: both;
                }
                .showLeaveMesageWrap{
                    margin: 10px auto;
                    border: 1px solid black;
                    position: relative;
                    top: -100px;
                    overflow: hidden;
                }
                .time{
                    padding: 10px 0px;
                }
            </style>
        </head>
        <body>
            <div class="outlinewrap">
                <div class="wrap">
                    <div class="headWrap">
                        <div class="head">
                            <a href="javascript:void(0)">置办年货省省省!红包在手年货无忧!点击领取年货红包&nbsp;&nbsp;&nbsp;热门微博</a>
                        </div>
                    </div>
                    <div class="inputWordWrap">
                        <textarea name="inputWord" rows="" cols=""></textarea>
                    </div>
                    <footer>
                        <a href="#" id='releaseBtn'>发 布</a>
                    </footer>
                </div>
                <div id="show" class="show">
                </div>
            </div>
        </body>
        <script type="text/javascript">
            var head=document.getElementsByClassName('head')[0];
            var inputWordWrap=document.getElementsByClassName('inputWordWrap')[0];
            var inputWord=document.querySelector('.inputWordWrap textarea');
            var releaseBtn=document.getElementById('releaseBtn');
            var show=document.getElementById('show');
            var wordNum=140;
            var beyondNum=0;
            inputWordWrap.onclick=function(event){
                event = event || window.event;
                if(event.stopPropagation){
                    event.stopPropagation();
                }else{
                    event.cancelBubble = true;
                }
                if (inputWordWrap.className=='inputWordWrap') {
                    inputWordWrap.className+=' clickInputBordStyle';
                    head.innerHTML="还可以输入" + wordNum + "";
                }
            }
            document.onclick=function(){
                inputWordWrap.className='inputWordWrap';
                head.innerHTML='<a href="javascript:void(0)">置办年货省省省!红包在手年货无忧!点击领取年货红包&nbsp;&nbsp;&nbsp;热门微博</a>';
            }
            inputWord.onkeyup=function(){
                releaseBtn.style.background='#ff8140';
                wordNum=140-this.value.length;
                if (wordNum<0) {
                    beyondNum=-wordNum
                    head.innerHTML="超出" + beyondNum + "";
                }else{
                    head.innerHTML="还可以输入" + wordNum + "";
                }
            }
            function getTime(){
                var myDate=new Date();
                var nowHour=myDate.getHours();
                var nowMinute=myDate.getMinutes();
                var nowMonth=myDate.getMonth();
                var nowDay=myDate.getDate();
                var nowSecond=myDate.getSeconds();
                var nowDate=nowMonth+''+nowDay+''+nowHour + ":" + nowMinute + " 发布";
                return nowDate;
            }
            releaseBtn.onclick=function(){
                if (!inputWord.value || beyondNum!=0) {
                    if (!inputWord.value) {
                        alert('请输入内容在发布');
                    }else {
                        alert('字数已超出,请删减后再发布')
                    }
                }else {
                    var showLeaveMesageWrap=document.createElement('div');
                    var name=document.createElement('div');
                    var message_text=document.createElement('div');
                    var time=document.createElement('div');
                    var dele=document.createElement('div');
                    showLeaveMesageWrap.className='showLeaveMesageWrap';
                    name.className='name';
                    message_text.className='message_text';
                    dele.className='dele';
                    time.className='time';
                    if (show.children.length==0) {
                        show.appendChild(showLeaveMesageWrap);
                    }else {
                        show.insertBefore(showLeaveMesageWrap,show.children[0]);
                    }
                    showLeaveMesageWrap.appendChild(name);
                    showLeaveMesageWrap.appendChild(dele);
                    showLeaveMesageWrap.appendChild(message_text);
                    showLeaveMesageWrap.appendChild(time);
    
                    name.innerHTML='xxx';
                    message_text.innerText=inputWord.value;
                    time.innerHTML=getTime();
                    dele.innerHTML='x';
                    console.log(showLeaveMesageWrap.offsetTop);
                    animatePr(showLeaveMesageWrap);
                    inputWord.value='';
                }
                dele.onclick=function(){
                    animateDele(showLeaveMesageWrap);
    
                }
    
    
                // function animatePr(nod){
                //     var start=-100;
                //     var end=0;
                //     var change=end-start;
                //     var step=0;
                //     var maxStep=33;
                //     var timer;
                //     if (timer) {
                //         clearInterval(timer);
                //     }
                //     timer=setInterval(function(){
                //         step++;
                //         nod.style.top=start+change/maxStep*step+"px";
                //         var c=start+change/maxStep*step;
                //         console.log(c);
                //         console.log(step);
                //         if (step==maxStep) {
                //             clearInterval(timer);
                //             console.log(step);
                //             console.log(nod.offsetTop);
                //             console.log(c);
                //         }
                //     },16)
                // }
    
    
                //用Tween.js写的动画效果,Tween.js文件下载地址http://www.cnblogs.com/cloudgamer/archive/2009/01/06/1369979.html
                function animatePr(nod){
                    var start=-100;
                    var end=0;
                    var change=end-start;
                    var step=0;
                    var maxStep=33;
                    var timer;
                    if (timer) {
                        clearInterval(timer);
                    }
                    timer=setInterval(function(){
                        step++;
                        nod.style.top=Tween.Bounce.easeInOut(step,start,change,maxStep)+"px";
                        if (step==maxStep) {
                            clearInterval(timer)
    
                        }
                    },16)
                }
    
    
                function animateDele(showLeaveMesageWrap){
                    var start=showLeaveMesageWrap.offsetHeight;
                    var end=0;
                    var change=end-start;
                    var step=0;
                    var maxStep=77;
                    var timer1;
                    if (timer1) {
                        clearInterval(timer1);
                    }
                    timer1=setInterval(function(){
                        step++;
                        showLeaveMesageWrap.style.height=start+change/maxStep*step+'px';
                        console.log(showLeaveMesageWrap.offsetHeight);
                        if (step==maxStep) {
                            clearInterval(timer1);
                            show.removeChild(showLeaveMesageWrap);
                            console.log(3);
                        }
    
                    },16)
    
                }
    
            }
    
        </script>
        <script src="tween.js" type="text/javascript" charset="utf-8"></script>
    </html>
  • 相关阅读:
    springmvc 注解式开发 处理器方法的返回值
    springmvc 注解式开发 接收请求参数
    【洛谷P1379】八数码难题 状压bfs
    【模板】ST表
    【POJ1741】Tree
    【洛谷P1073】最优贸易
    【POJ3662】Telephone Lines dij + 二分答案
    【模板】spfa
    【洛谷P2384】最短乘积路径
    【bzoj2038】小Z的袜子
  • 原文地址:https://www.cnblogs.com/yanchao-paul/p/5396976.html
Copyright © 2020-2023  润新知