<!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 按时间段统计（年，季度，月，天，时）

    按年汇总,统计: select sum(mymoney) as totalmoney, count(*) as sheets from mytable group by date_format(col ...

  2. c语言到汇编的学习

    [内存结构] C程序通过编译-汇编-连接,最后到可执行文件.载入内存有这几个部分: text:正文段,存放的是可执行的机器码段 data:存放初始化之后的全局变量和静态变量 bbs:存放未初始化的静态 ...

  3. linux redmine 搭建

    redmine搭建过程参考:http://www.tuicool.com/articles/InMbym 注意事项: 配置文件必须以2个空格开始 启动(指定了端口,和绑定的IP): ruby bin/ ...

  4. 【菜鸟玩Linux开发】在Linux中使用VS Code编译调试C++项目

    最近项目需求,需要在Linux下开发C++相关项目,经过一番摸索,简单总结了一下如何通过VS Code进行编译调试的一些注意事项. 关于VS Code在Linux下的安装这里就不提了,不管是CentO ...

  5. Web服务器常用设置

    1.Tomcat浏览目录 找到安装目录下的文件/conf/web.xml,  找到以下配置节,将parame-value设置为true即可 <init-param>             ...

  6. tsd-提升IDE对JavaScript智能感知的能力

    在编写前端JavaScript代码时,最痛苦的莫过于代码的智能感知(Intelli Sense). 追其根源,是因为JavaScript是一门弱类型的动态语言.对于弱类型的动态语言来说,智能感知就是I ...

  7. resumablejs 分块上传 断点续传

    http://www.resumablejs.com/ 官网 upload.html <!DOCTYPE html> <html lang="en"> &l ...

  8. Flex小结

    参考两篇文章 文章1 文章2 容器用display: flex;或display: inline-flex;指定为弹性Flex布局.采用Flex布局的元素,称为Flex容器(flex containe ...

  9. 看svn用户组管理功能的产品设计

    我负责公司的svn配置.用了近一年了,今天饶有兴致,分享一下svn的用户组管理功能,这个产品设计值得借鉴,简单易用. svn用户组管理的功能描述:新建用户组,并给组分配成员用户:编辑用户组,包括修改组 ...

  10. 谷歌大牛 Rob Pike 的 5 个编程原则

    谷歌大牛 Rob Pike 的 5 个编程原则 简介: Rob Pike,目前谷歌公司最著名的软件工程师之一,曾是贝尔实验室Unix开发团队成员,Plan9操作系统开发的主要领导人,Inferno操作 ...