<!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>

JQuery实现仿sina新浪微博新鲜事滚动的更多相关文章

  1. jquery插件——仿新浪微博限制输入字数的textarea

    内容链接地址:http://www.cnblogs.com/jone-chen/p/5213851.html: <!DOCTYPE html> <html> <head& ...

  2. jquery鼠标移动div内容上下左右滚动

    jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...

  3. Jquery打造的类似新浪微博@提醒功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jquery实现导航栏跟随窗口滚动

    最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...

  5. 一款基于jQuery的仿百度首页滑动选项卡

    今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   ...

  6. 雷林鹏分享：jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据

    jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据 数据网格(datagrid)的虚拟滚动特性可以用来显示大数量的记录而不需要分页. 当滚动垂直滚动条时,数据网格(datagrid ...

  7. jQuery精仿手机上的翻牌效果菜单

    代码简介: jQuery精仿手机上的翻牌效果菜单,很平滑的动画翻牌效果,每点击一下菜单,就会翻去一下,貌似很灵敏的动作.注意:如果预览时没看到效果,请刷新一下页面,让jquery载入就行了,在实际使用 ...

  8. Jquery实现仿腾讯微薄的广播发表

    前言: 由于这几天在学习Jquery的一些知识,比以前的感觉就是Jquery太强大了,很多很简单的功能以前在JavaScript要写几十行的代码而在Jquery中只用几行代码就搞定了,所以我决定好好学 ...

  9. jQuery旋转木马仿3D效果的图片切换特效代码

    用jQuery实现的一款仿3D效果的图片切换特效代码,类似旋转木马一样,幻灯图片以三维视觉上下滑动切换,效果很酷炫,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜 ...

随机推荐

  1. mysql 数值函数

    可使用常见的算术操作符.注意就 -. +和 *而言, 若两个参数均为正数,则其计算结果的精确度为 BIGINT (64比特),若其中一个参数为无符号整数, 而其它参数也是整数, 则结果为无符号整数.请 ...

  2. java 并发性和多线程 -- 读感 (一 线程的基本概念部分)

    1.目录略览      线程的基本概念:介绍线程的优点,代价,并发编程的模型.如何创建运行java 线程.      线程间通讯的机制:竞态条件与临界区,线程安全和共享资源与不可变性.java内存模型 ...

  3. Git 的origin和master分析

    首先要明确一点,对git的操作是围绕3个大的步骤来展开的(其实几乎所有的SCM都是这样) 1.     从git取数据(git clone) 2.     改动代码 3.     将改动传回git(g ...

  4. 记录HttpWebRequest辅助类

    最近因为工作关系,需要通过HttpWebRequest去请求API,所有就写了个简单的辅助public sealed class HttpRequestHelper { private static ...

  5. SQL 数据库性能问题排查

    一个项目的运行,总伴随着性能问题,系统查询过慢,如何快速查询等 下面将简单讲解一下,如何去排查及解决这些问题. 开发过程中: 1:不要绝对的三范式,适当建立冗余能够提高查询速度,不用多表关联 2:能用 ...

  6. monodb C#接口封装

    mongodb的C#封装,驱动是samus/mongodb-csharp 1.连接类 using MongoDB; using MongoDB.Linq; namespace DBModel { pu ...

  7. 图解，为多个oracle数据库下添加ArcSde实例

    最开始肯定要先建一个oracle数据库,我假设名称为dbgis 1, 2, 3, 不重新指定就会出现这个错误,因为以前有sde.dbf文件了 4, 5, 6, 7, 8, 如果以前授权成功过就会出现这 ...

  8. 学习设计模式第三 - 基础使用UML表示关系

    面向对象的思想中存在如下几种关系,一般为了方便交流都使用UML的类图来展现类之间的关系.所以了解类图中符号的含义对看懂类图,尤其是用类图展示的设计模式很有帮助.下面依次介绍这几种关系 类继承关系 继承 ...

  9. Winform启动隐藏，WebBrowser交互JS

    一.启动隐藏 Winform比较奇怪,Load的时候设置Visiable=false,无效.webBrowser_DocumentCompleted之后调用hide隐藏了窗体,但是在notifyIco ...

  10. Android怎么找到最优适配资源

    当我们将一些提供了不同的资源文件可供Android系统选择的时候,Android会在运行时会根据一套适配的规则选择最符合当前配置的资源.为了说明Android怎么选择资源,假设我们有以下可选的资源文件 ...