<!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. MVC模式下如何实现RegisterStartupScript等功能

    本文源于http://www.achtmaal.com/blog/asp-net-mvc-and-registerclientscriptinclude,非常感谢原文作者的智慧和分享 Register ...

  2. iBatis简单介绍

    1.       Ibatis是开源软件组织Apache推出的一种轻量级的对象关系映射(ORM)框架,和Hibernate.Toplink等在java编程的对象持久化方面深受开发人员欢迎. 对象关系映 ...

  3. 归并求逆序数（逆序对数） && 线段树求逆序数

    Brainman Time Limit: 1000 MS Memory Limit: 30000 KB 64-bit integer IO format: %I64d , %I64u   Java c ...

  4. 锁定TABLE的首行和首列

    1. 2. 3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  5. 可嵌入式的动态http服务minihttp组件

    minihttp是基于c#实现的轻量级的动态WEB服务组件,通过minihttp可以轻松地构一个动态的WEB服务并嵌入到.NET程序中运行部署.由于minihttp完全基于托管代码实现,所以可以轻松运 ...

  6. loadrunner agent 中删除失效的mmdrv进程

     源码: using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; us ...

  7. 人人都是 DBA（VIII）SQL Server 页存储结构

    当在 SQL Server 数据库中创建一张表时,会在多张系统基础表中插入所创建表的信息,用于管理该表.通过目录视图 sys.tables, sys.columns, sys.indexes 可以查看 ...

  8. Android学习笔记50：使用WebView控件浏览网页

    在Android中,可以使用Webview控件来浏览网页.通过使用该控件,我们可以自制一个简单的浏览器,运行效果如图1所示. 图1 运行效果 1.WebView 在使用WebView控件时,首先需要在 ...

  9. Senparc.Weixin.MP SDK 微信公众平台开发教程（十一）：高级接口说明

    这里所说的高级接口是指面向通过认证的服务号开通的高级功能. 高级功能大致可以分类为: 用户接口 分组接口 客服接口(有别于之前介绍的多客服) 群发接口 多媒体接口 二维码接口 模板消息接口(不是所有账 ...

  10. IOS Animation-KeyPath值

    IOS Animation-KeyPath值 keyPath值 说明 值类型 position 移动位置 CGPoint opacity 透明度 0-1 bounds 变大与位置 CGRect bou ...