发布于 2017-07-20 06:54:50 | 40 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


现在微博都有一个不错的效果就是会实时的动态滚动并显示最新的信息了,下面我来给大家介绍仿新浪微博大厅首页滚动效果,希望此方法对大家会有帮助。

我们先来看下效果图

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>



相关阅读 :
js实现新浪微博首页效果
Js仿新浪微博首页内容滚动
js实现类似新浪微博首页内容渐显效果的方法
仿新浪微博首页"大家正在说"渐入轮显效果
js仿新浪微博消息发布功能
tuzhu_req.js 实现仿百度图片首页效果
js实现选中页面文字将其分享到新浪微博
JS+CSS实现仿新浪微博搜索框的方法
js实现的仿新浪微博完美的时间组件升级版
Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码
使用canvas实现仿新浪微博头像截取上传功能
javascript实现类似于新浪微博搜索框弹出效果的方法
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务