专栏首页james大数据架构JQuery实现仿sina新浪微博新鲜事滚动

JQuery实现仿sina新浪微博新鲜事滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/jscript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/jscript">
$(document).ready(function(e) {
 var in_out_time = 800 //渐显时间
 var scroll_Interval_time = 2000 //滚动间隔时间
 var scroll_time = 1000 //滚动动画时间
   
 addli() 
 
 function addli(){
  $("#scroll_List").css("top",0);
  $("#scroll_List li:last").clone().prependTo("#scroll_List");
  $("#scroll_List li:first").css("opacity",0);
  $("#scroll_List li:first").animate({opacity:1},in_out_time);
  setTimeout(delLi_last,scroll_Interval_time) 
 }
 
 function delLi_last(){
  $("#scroll_List li:last").detach(); 
  $("#scroll_List").animate({top:100},scroll_time,addli)
 }
 
});
</script>
<style>
*{
 margin:0px;
 padding:0px;
 list-style:none;
}

.centerBox{
 left:50%;
 width:212px;
 margin-left:-151px;
 top:50%;
 height:312px;
 margin-top:-156px;
 position:absolute;
}

.main{
 width:210px;
 height:310px;
 float:left;
 border:1px solid #ccc;
}

.main strong{
 width:200px;
 height:300px;
 float:left;
 overflow:hidden;
 margin:5px;
 display:inline;
 position:relative;
}

.main strong ul{
 width:200px;
 position:absolute;
}

.main strong ul li{
 width:200px;
 height:100px;
 line-height:100px;
 text-align:center;
 color:#FFF;
 font-family:"simhei";
 font-size:20px;
}

.main strong ul .li_1{
 background:#900;
}

.main strong ul .li_2{
 background:#9C0;
}

.main strong ul .li_3{
 background:#036;
}

.main strong ul .li_4{
 background:#C60;
}

.main strong ul .li_5{
 background:#636;
}

.main strong ul .li_6{
 background:#999;
}

</style>
</head>

<body>
 <div class="centerBox">
  <div class="main">
   <strong>
    <ul id="scroll_List">
     <li class="li_1">1</li>
     <li class="li_2">2</li>
     <li class="li_3">3</li>
     <li class="li_4">4</li>
    </ul>
   </strong>
  </div>
 </div>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 创建支持多种屏幕尺寸的Android应用

    Android涉及各种各样的支持不同屏幕尺寸和密度的设备。对于应用程序,Android系统通过设备和句柄提供了统一的开发环境,大部分工作是校正每一个应用程序的用...

    欢醉
  • android获得ImageView图片的等级

    android获得ImageView图片的等级问题 要实现的功能如下图,点击分享能显示选中与不选中状态,然后发送是根据状态来实现具体分享功能。 ? 在gridv...

    欢醉
  • CSS好看的按钮

    好看的按钮 <style> .btn { BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDE...

    欢醉
  • 如何在同一IP地址上运行多个SSL证书?

    什么是SNI?服务器名称指示是SSL的一个重要组成部分。SNI允许多个网站存在于同一个IP地址上。 如果没有SNI,每个主机名都需要自己的IP地址才能安装SSL...

    亚洲诚信SSL
  • Hive配置元数据库为PostgreSQL

    kongxx
  • 想去国外旅行?用这款小程序,足不出户办下签证

    然而,并不是所有人都清楚办理签证的必备资料和流程。正所谓世界那么大,我想去看看;签证手续多,应该怎么办?

    知晓君
  • 神经病院Objective-C Runtime住院第二天—消息发送与转发

    现在越来越多的app都使用了JSPatch实现app热修复,而JSPatch 能做到通过 JS 调用和改写 OC 方法最根本的原因是 Objective-C 是...

    一缕殇流化隐半边冰霜
  • 附013.Kubernetes永久存储Rook部署

    Ceph是一种高度可扩展的分布式存储解决方案,提供对象、文件和块存储。在每个存储节点上,将找到Ceph存储对象的文件系统和Ceph OSD(对象存储守护程序)进...

    木二
  • 微信小程序开发思路

    小程序还没有完全开放,不能真实体验,但通过文档和开发工具,可以了解到他的开发思路 下面就介绍下小程序的开发方式,希望能帮助有兴趣的朋友对整体思路有个快速了解 整...

    dys
  • 窥探Swift编程之错误处理与异常抛出

    在Swift 2.0版本中,Swift语言对其错误处理进行了新的设计,当然了,重新设计后的结果使得该错误处理系统用起来更爽。今天博客的主题就是系统的搞一下Swi...

    lizelu

扫码关注云+社区

领取腾讯云代金券