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 相关文章推荐
IE和Firefox下event事件杂谈
Dec 18 Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 Javascript
JS控制图片等比例缩放的示例代码
Dec 24 Javascript
使用js显示当前时间示例
Mar 02 Javascript
JavaScript函数详解
Nov 17 Javascript
JavaScript实现的一个倒计时的类
Mar 12 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
vue.js获得当前元素的文字信息方法
Mar 09 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
js实现简单页面全屏
Sep 17 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
Nov 25 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实现用户在线时间统计详解
2011/10/08 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
PHP实现的数组和XML文件相互转换功能示例
2018/03/15 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
Javascript必知必会(四)js类型转换
2016/06/08 Javascript
JavaScript中this的用法实例分析
2016/12/19 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
javascript少儿编程关于返回值的函数内容
2018/05/27 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
vue路由切换时取消之前的所有请求操作
2020/09/01 Javascript
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
基于pandas数据样本行列选取的方法
2018/04/20 Python
详解Python中的分组函数groupby和itertools)
2018/07/11 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
python实现淘宝购物系统
2019/10/25 Python
如何理解Python中包的引入
2020/05/29 Python
HTML5录音实践总结(Preact)
2020/05/07 HTML / CSS
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
教育专业个人求职信
2013/12/02 职场文书
仓库管理计划书
2014/05/04 职场文书
乡镇综治宣传月活动总结
2014/07/02 职场文书
2014年预备党员学习新党章思想汇报
2014/09/15 职场文书
授权委托书
2014/09/17 职场文书
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫