<!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. ZabbixCPU温度监视-windows2008R2

    1, speed-fan安装 SpeedFan - Access temperature sensor in your computer / http://www.almico.com/speedfa ...

  2. 字符串反混淆实战 Dotfuscator 4.9 字符串加密技术应对策略

    因为手头需要使用一个第三方类库,网络上又找不到它的可用的版本,于是只好自己动手.这个类库使用了Dotfuscator 加密,用.NET Reflector加载程序集, 看到的字符串是乱码,如下面的代码 ...

  3. Xamarin开发IOS笔记：切换输入法时输入框被遮住

    在进行IOS开发的过程中,出现类似微信朋友圈的交互界面,当用户遇到感兴趣的内容可以进行评论.为了方便评论输入,当出现评论输入框的时候自动将评论输入框移动至键盘的上方,这样方便边输入边查看. 当用户隐藏 ...

  4. SQL Server认证培训与考试

    Microsoft 技术专员 (MTA) - 数据库 https://www.microsoft.com/zh-cn/learning/mta-certification.aspx MCSA: SQL ...

  5. 在Linux上以服务的方式运行ASP.NET Core站点

    更新:用supervisor是更好的解决方法,详见 Linux下为 dotnet 创建守护进程 要在生成环境下在Linux服务器上跑ASP.NET Core站点,首先要解决的问题是以服务的方式运行AS ...

  6. 你写的return null正确吗？

    上次一篇“你写的try…catch真的有必要吗”引起了很多朋友的讨论.本次我在code review又发现了一个问题,那就是有人有意无意的写出了return null这样的代码,例如: public ...

  7. Java IO3：字节流

    流类 Java的流式输入/输出是建立在四个抽象类的基础上的:InputStream.OutputStream.Reader.Writer.它们用来创建具体的流式子类.尽管程序通过具体子类执行输入/输出 ...

  8. WPF 编辑状态切换

    有时候DataGrid编辑的时候一个属性需要根据别的属性呈现不同的编辑状态.这就需要一个做一个状态切换.比如地址是1的时候,读写类型是读写.只读.只写.地址是2的时候,就只读.状态栏切换为TextBo ...

  9. Jquery相册插件（开源下载）

    一,导言 上次 “不定义JQuery插件,不要说会JQuery” 的博客写的肤浅,漏洞百出,而且最重要的是从理论上说如何定义一个jQuery插件,没有实质性的写一个jQuery插件出来,这未免是纸上谈 ...

  10. [每日电路图] 1、基于AT89C52单片机最小系统接口电路【转】

              come from:http://www.21ic.com/dianlu/basis/interface/2015-04-21/621607.htm AT89C52是美国Atmel ...