javascript代码实例教程-JS 仿腾讯发表微博的效果

发布时间:2019-02-15 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JS 仿腾讯发表微博的效果脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 下面我写的这个JS代码需要注意2点:

 

 1.每次发表下后 大家在说列表会添加一条,目前没有发ajax请求 后台没有记录 所以刷新页面 会清掉。

 

 2. 时间是用的是客户端时间 假如客户端时间错误的话 那么时间也会受影响。

 

其实思路很简单 看上面的效果就明白 所以思路在这边不多说了!或者我下面会提供压缩demo 可以自己下载下来看看效果就ok了!每次发表一次后 都提供了回调 作为扩展吧!当然鼠标移到某一项时候 会出现删除按钮 同时可以任意删除某一项。直接贴代码吧 也没有什么好说的!

 

HTML代码如下:

 

 

<p id=";msgBox">

        <form>

            <h2>来 , 说说你在做什么 , 想什么</h2>

            <p>

                <input id="userName" class="f-text" value="" />

                <p id="face">

                    <img src="img/face1.gif" class="current" />

                    <img src="img/face2.gif" />

                    <img src="img/face3.gif" />

                    <img src="img/face4.gif" />

                    <img src="img/face5.gif" />

                    <img src="img/face6.gif" />

                    <img src="img/face7.gif" />

                    <img src="img/face8.gif" />

                </p>

            </p>

            <p>

                <textarea id="conBox" class="f-text"></textarea>

            </p>

            <p class="tr">

                <p>

                    <span class="countTxt">还能输入</span><strong class="maxNum">140</strong><span>个字</span>

                    <input id="sendBTn" tyPE="button" value="" tITle="快捷键 Ctrl+Enter" />

                </p>

            </p>

        </form>

        <p class="list">

            <h3><span>大家在说</span></h3>

            <ul id="list-msg"></ul>

        </p>    

    </p>

 

CSS代码如下:

 

 

body,p,h2,h3,ul,li,p{margin:0;padding:0;}

    a{text-decoration:none;}

    a:hover{text-decoration:underline;}

    ul{list-style-type:none;}

    body{color:#333;background:#3c3a3b;font:12px/1.5 /5b8b/4f53;}

    #msgBox{width:500px;background:#fff;border-radius:5px;margin:10px auto;padding-top:10px;}

    #msgBox form h2{font-weight:400;font:400 18px/1.5 /5fae/8f6f/96c5/9ed1;}

    #msgBox form{background:url(img/boxBG.jpg) repeat-x 0 bottom;padding:0 20px 15px;}

    #userName,#conBox{color:#777;border:1px solid #d0d0d0;border-radius:6px;background:#fff url(img/inputBG.png) repeat-x;padding:3px 5px;font:14px/1.5 arial;}

    #userName.active,#conBox.active{border:1px solid #7abB2C;}

    #userName{height:20px;}

    #conBox{width:448px;reSize:none;height:65px;overflow:auto;}

    #msgBox form p{position:relative;color:#999;margin-top:10px;}

    #msgBox img{border-radius:3px;}

    #face{position:absolute;top:0;left:172px;}

    #face img{float:left;display:inline;width:30px;height:30px;cursor:pointer;margin-right:6px;opacity:0.5;filter:alpha(opacity=50);}

    #face img.hover,#face img.current{width:28px;height:28px;border:1px solid #f60;opacity:1;filter:alpha(opacity=100);}

    #sendBtn{border:0;width:112px;height:30px;cursor:pointer;margin-left:10px;background:url(img/btn.png) no-repeat;}

    #sendBtn.hover{background-position:0 -30px;}

    #msgBox form .maxNum{font:26px/30px Georgia, Tahoma, Arial;padding:0 5px;}

    #msgBox .list{padding:10px;}

    #msgBox .list h3{position:relative;height:33px;font-size:14px;font-weight:400;background:#e3eaec;border:1px solid #dee4e7;}

    #msgBox .list h3 span{position:absolute;left:6px;top:6px;background:#fff;line-height:28px;display:inline-block;padding:0 15px;}

    #msgBox .list ul{overflow:hidden;zoom:1;}

    #msgBox .list ul li{float:left;clear:both;width:100%;border-bottom:1px dashed #d8d8d8;padding:10px 0;background:#fff;overflow:hidden;}

    #msgBox .list ul li.hover{background:#f5f5f5;}

    #msgBox .list .userPic{float:left;width:50px;height:50px;display:inline;margin-left:10px;border:1px solid #ccc;border-radius:3px;}

    #msgBox .list .content{float:left;width:400px;font-size:14px;margin-left:10px;font-family:arial;word-wrap:break-word;}

    #msgBox .list .userName{display:inline;padding-right:5px;}

    #msgBox .list .userName a{color:#2b4a78;}

    #msgBox .list .msgInfo{display:inline;word-wrap:break-word;}

    #msgBox .list .times{color:#889db6;font:12px/18px arial;margin-top:5px;overflow:hidden;zoom:1;}

    #msgBox .list .times span{float:left;}

    #msgBox .list .times a{float:right;color:#889db6;}

    .tr{overflow:hidden;zoom:1;}

    .tr p{float:right;line-height:30px;}

    .tr *{float:left;}

    .hidden {display:none;}

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-JS 仿腾讯发表微博的效果全部内容,希望文章能够帮你解决javascript代码实例教程-JS 仿腾讯发表微博的效果所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。