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 相关文章推荐
jQuery 使用手册(四)
Sep 23 Javascript
Javascript Function对象扩展之延时执行函数
Jul 06 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
js简单抽奖代码
Jan 16 Javascript
手机端js和html5刮刮卡效果
Sep 29 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
layui 对table中的数据进行转义的实例
Sep 12 Javascript
Vue路由权限控制解析
Nov 09 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来检测proxy
2006/10/09 PHP
php-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
vue分页组件table-pagebar使用实例解析
2020/11/15 Javascript
JS中如何实现Laravel的route函数详解
2017/02/12 Javascript
浅谈js中的变量名和函数名重名
2017/02/13 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
Node.js  事件循环详解及实例
2017/08/06 Javascript
vue-cli如何引入bootstrap工具的方法
2017/10/19 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
妙用缓存调用链实现JS方法的重载
2018/04/30 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
python 字符串和整数的转换方法
2018/06/25 Python
python爬取淘宝商品销量信息
2018/11/16 Python
python 列表推导式使用详解
2019/08/29 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
专门经营化妆刷的美国彩妆品牌:Sigma Beauty
2017/09/11 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
二年级语文下册复习计划
2015/01/19 职场文书
创先争优活动个人总结
2015/03/04 职场文书
食品卫生管理制度
2015/08/06 职场文书
Winsows11性能如何? win11性能测评多核竟比Win10差了10%
2021/11/21 数码科技
python字符串拼接.join()和拆分.split()详解
2021/11/23 Python
Python OpenCV形态学运算示例详解
2022/04/07 Python