js实现新浪微博首页效果


Posted in Javascript onOctober 16, 2015

我们先来看下效果图

js实现新浪微博首页效果

CSS

* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #eee; }
#t_sina { width: 390px; padding: 10px; background: #fff; margin: 50px auto 0; font-size: 12px; border: 1px solid #ccc; }
#t_sina h2 { padding: 10px 0 10px 10px; border-bottom: 1px solid #ebebeb; color: #333; font-size: 14px; }
#content { width: 390px; height: 345px; overflow: hidden; }
#content ul { width: 390px; }
#content li { width: 390px; padding: 10px 0; overflow: hidden; border-bottom: 1px dotted #9f9f9f; }
#content .pic { float: left; width: 50px; height: 50px; }
#content .pic a { display: block; width: 50px; height: 50px; background: #eee; }
#content .pic a:hover { background: #00FFFF; }
#content p { float: right; width: 315px; margin-right: 10px; display: inline; line-height: 16px; color: #666; }
#content p a { color: #6eafd5; font-family: arial; text-decoration: none; }
#content p a:hover { text-decoration: underline; }
#content p span { color: #999; }
#t_sina dt { font-size: 14px; height: 40px; line-height: 40px; }
#t_sina dd { padding-bottom: 5px; color: #666; }
#t_sina .text { width: 320px; height: 20px; line-height: 20px; font-size: 12px; font-family: arial; color: #666; position: relative; left: 20px; }
#t_sina textarea { width: 320px; height: 80px; line-height: 20px; overflow: auto; font-size: 12px; font-family: arial; color: #666; position: relative; left: 20px; }
#t_sina .btn { position: relative; left: 55px; width: 120px; height: 30px; }

JS

<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="t_sina.js"></script>

HTML

<div id="t_sina">

 <h2>大家正在说</h2>
 
 <div id="content">
  <ul>
   <li>
    <div class="pic"><a href="###"></a></div>
    <p><a href="#">夜话燕子</a>:今晚,我是一个超级大的电灯泡,探照灯级别的。现在我终于消失了,一个人在江边走走也不错诶。<br /><span>3分钟前</span></p>
   </li>
   <li>
    <div class="pic"><a href="###"></a></div>
    <p><a href="#">xinshangzeyu_2xr</a>:我来自甚地?去甚地?是甚?原形是甚?是你甚?出生为甚?--十岁。。。<br /><span>3分钟前</span></p>
   </li>
   <li>
    <div class="pic"><a href="###"></a></div>
    <p><a href="#">左手单刀</a>:哎,我这算幸运么?值个破班吧居然能遇见这么罕见的状况!所以电话都断了!全都告警!还查不出故障!好吧,就这么一直没电话吧,真安静啊。。。<br /><span>3分钟前</span></p>
   </li>
   <li>
    <div class="pic"><a href="###"></a></div>
    <p><a href="#">斜风细雨时思念蔓延</a>:原单位领导因为在我临行时不经然冒出了三个类母亲字句,为此付出了些许代价。我始终认为该同学智商很高,希望他可以把原单位带好~他应该也会带好,只是希望随着时间的推移他会重用所应重用的人,莫被弄臣迷了双眼~3分钟前<br /><span>3分钟前</span></p>
   </li>
   <li>
    <div class="pic"><a href="###"></a></div>
    <p><a href="#">粘得不得了</a>:奖学金还不够塞牙缝。。我的和众人的<br /><span>3分钟前</span></p>
   </li>
  </ul>
 </div>
 
 <dl>
  <dt>-发布微博-</dt>
  <dd>姓名:<input id='btn_name' class="text" type="text" /></dd>
  <dd>内容:<textarea id='btn_msg'></textarea></dd>
  <dd><input class="btn" id="btn_submit" type="button" value="提交" /></dd>
 </dl>

</div>

<ul id="tmp_container" style="height:0px; overflow:hidden;"></ul>
Javascript 相关文章推荐
javascript[js]获取url参数的代码
Oct 17 Javascript
一个判断email合法性的函数[非正则]
Dec 09 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
JavaScript执行顺序详细介绍
Dec 04 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
JS中prototype的用法实例分析
Mar 19 Javascript
javascript实现控制div颜色
Jul 07 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
浅谈Javascript数组(推荐)
May 17 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
React中ES5与ES6写法的区别总结
Apr 21 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 #Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 #Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 #Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 #Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 #Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 #Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 #Javascript
You might like
PHP获取文件夹大小函数用法实例
2015/07/01 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
js获取指定时间的前几秒
2017/04/05 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
Layui 动态禁止select下拉的例子
2019/09/03 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
Django REST Framework 分页(Pagination)详解
2020/11/30 Python
用python实现一个简单的验证码
2020/12/09 Python
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
介绍一下代理模式(Proxy)
2014/10/17 面试题
应届生法律求职信
2013/10/22 职场文书
体育教师自荐信范文
2013/12/16 职场文书
工程造价专业大学生职业规划范文
2014/03/09 职场文书
青年文明号创建承诺
2014/03/31 职场文书
公司授权委托书格式样本
2014/10/01 职场文书
就业协议书范本
2014/10/08 职场文书
夫妻分居协议书范文
2014/11/26 职场文书
水电工岗位职责
2015/02/14 职场文书
班主任自我评价范文
2015/03/11 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
MySQL如何快速创建800w条测试数据表
2022/03/17 MySQL