<!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. SCRUM报告（1）

    我们组的PM是白杰,团队SCRUM 报告如下: 一.第一次spring会议内容: 1.确定所做项目的方向: 2.将调查问卷的结果进行统计,做了需求分析,大致了解了用户的想法: 3.确定了团队计划bac ...

  2. Android 自定义View 三板斧之二——组合现有控件

    通常情况下,Android实现自定义控件无非三种方式. Ⅰ.继承现有控件,对其控件的功能进行拓展. Ⅱ.将现有控件进行组合,实现功能更加强大控件. Ⅲ.重写View实现全新的控件 上文说过了如何继承现 ...

  3. EQueue - 一个C#写的开源分布式消息队列的总体介绍

    前言 本文想介绍一下前段时间在写enode时,顺便实现的一个分布式消息队列equeue.这个消息队列的思想不是我想出来的,而是通过学习阿里的rocketmq后,自己用c#实现了一个轻量级的简单版本.一 ...

  4. 用“MEAN”技术栈开发web应用（一）AngularJs前端架构

    前言 不知何时突然冒出“MEAN技术栈”这个新词,听起来很牛逼的样子,其实就是我们已经熟悉了的近两年在前端比较流行的技术,mongodb.express.angularjs.nodejs,由于这几项技 ...

  5. 【案例分享】SQL job服务连接不到存储引擎

    在SQL Server agent的日志中发现有大量错误的信息,都是关于作业执行失败的日志 从日志的内容来看,是作业执行过程中无法连接到存储引擎, 可奇怪的是,存储引擎就是本机,而且已经正常启动了,截 ...

  6. 简单JavaScript模版引擎优化

    在上篇博客最简单的JavaScript模板引擎 说了一下一个最简单的JavaScript模版引擎的原理与实现,作出了一个简陋的版本,今天优化一下,使之能够胜任日常拼接html工作,先把上次写的模版函数 ...

  7. MYSQL 大文件无法导入的问题。

    1. 设置maxpacket. 要在[mysqld]标签下.这个疏忽了,就会发现没效果. 基本网上的都没说清,要看stackoverflow. Change in the my.ini file. I ...

  8. jQuery的选择器中的通配符[id^='code']

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  9. WebApi系列~按需序列化字段~Hot

    回到目录 起初只是一个想法,一次讨论,一个设想,但相信一定可以实现,具体的事情是这样的,有个对外的API项目,它为一些终端设备提供数据,如手机,平板,PC,当然你也可以说它为很多平台提供数据win32 ...

  10. MVVM架构~knockoutjs系列之验证成功提示显示

    返回目录 对于knockout.validation来说,我们已经知道了如何去验证大部分表单元素,而有时,我们的需求希望在每个元素验证成功后,去显示正确的提示,这个我们很容易的使用self.元素.is ...