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 条评论
登录 后参与评论

相关文章

来自专栏海天一树

小朋友学Python(5):引号、多行语句、注释

一、引号 Python 可以使用引号( ' )、双引号( " )、三引号( ''' 或 """ ) 来表示字符串。其中三引号可以由多行组成。 例1 str1 =...

3468
来自专栏IT开发技术与工作效率

VBA透视表筛选子程序

1213
来自专栏极乐技术社区

wxss学习系列《一》定位(position),布局(Layout)

定位(position) 2017的微信公开课pro如期进行了,小程序将于2017年1月9日对个人开放,公司项目的demo版做了个大概,过程中花的时间最多的还是...

33510
来自专栏Android先生

Android开发人员初识JavaScript

JavaScript是一种脚本语言;网页,以及基于H5的手机app等都靠JavaScript来驱动;更简单的来说,JavaScript就像是一种运行在浏览器中的...

1182
来自专栏前端儿

简单的鼠标可拖动DIV 兼容IE/FF

一个div,注册监听onmousedown事件,然后处理获取的对象及其相关值(对象高度,clientX/clientY位置等)

1511
来自专栏九彩拼盘的叨叨叨

学习前端 第6周 第2天

682
来自专栏进击的君君的前端之路

jQuery选择器、Dom操作、样式、事件处理

1643
来自专栏九彩拼盘的叨叨叨

Vue1.x 写法示例

常见内置过滤器 capitalize, uppercase, lowercase, json, limitBy, filterBy。所有见这里。

923
来自专栏技术博客

Knockout.Js官网学习(visible绑定)

让visible绑定到DOM元素上,使得该元素的hidden或visible取决于绑定的值。

1111
来自专栏柠檬先生

jquery 表单事件

.blur()    当元素失去焦点的时候触发事件。   .blur(handler(eventObject))     handler(even...

2069

扫码关注云+社区

领取腾讯云代金券