JQuery实现仿sina新浪微博新鲜事滚动
<!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新浪微博新鲜事滚动的更多相关文章
- jquery插件——仿新浪微博限制输入字数的textarea
内容链接地址:http://www.cnblogs.com/jone-chen/p/5213851.html: <!DOCTYPE html> <html> <head& ...
- jquery鼠标移动div内容上下左右滚动
jquery鼠标移动div内容上下左右滚动 点击这里查看效果:http://keleyi.com/keleyi/phtml/jqtexiao/9.htm <!DOCTYPE html PUBLI ...
- Jquery打造的类似新浪微博@提醒功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery实现导航栏跟随窗口滚动
最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...
- 一款基于jQuery的仿百度首页滑动选项卡
今天给大家分享一款基于jQuery的仿百度首页滑动选项卡.这款选项卡适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据
jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据 数据网格(datagrid)的虚拟滚动特性可以用来显示大数量的记录而不需要分页. 当滚动垂直滚动条时,数据网格(datagrid ...
- jQuery精仿手机上的翻牌效果菜单
代码简介: jQuery精仿手机上的翻牌效果菜单,很平滑的动画翻牌效果,每点击一下菜单,就会翻去一下,貌似很灵敏的动作.注意:如果预览时没看到效果,请刷新一下页面,让jquery载入就行了,在实际使用 ...
- Jquery实现仿腾讯微薄的广播发表
前言: 由于这几天在学习Jquery的一些知识,比以前的感觉就是Jquery太强大了,很多很简单的功能以前在JavaScript要写几十行的代码而在Jquery中只用几行代码就搞定了,所以我决定好好学 ...
- jQuery旋转木马仿3D效果的图片切换特效代码
用jQuery实现的一款仿3D效果的图片切换特效代码,类似旋转木马一样,幻灯图片以三维视觉上下滑动切换,效果很酷炫,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜 ...
随机推荐
- glibc2.14 install from centos
安装glibc2.14 Tar xf glibc-2.14.tar.gz Cd glibc-2.14 Mkdir build Cd build ../configure –prefix=/opt/gl ...
- PAT/简单模拟习题集(一)
B1001.害死人不偿命的(3n+1)猜想 (15) Description: 卡拉兹(Callatz)猜想: 对任何一个自然数n,如果它是偶数,那么把它砍掉一半:如果它是奇数,那么把(3n+1)砍掉 ...
- Android热修复技术选型(不在市场发布新版本的情况下,直接更新app)
2015年以来,Android开发领域里对热修复技术的讨论和分享越来越多,同时也出现了一些不同的解决方案,如QQ空间补丁方案.阿里AndFix以及微信Tinker,它们在原理各有不同,适用场景各异,到 ...
- Emberjs之Observer
Observer Person.reopen({ fullNameChanged: Ember.observer('fullName', function() { // deal with the c ...
- 浏览器兼容性小记-DOM篇(二)
1.DOM中的所有节点都继承自Node类型,IE9之前将DOM节点作为COM对象来实现:每个DOM节点都有一个nodeType属性来表明节点类型,总共有12个类型: Node.ELEMENT_NODE ...
- java那些小事---用偶数做判断,不要用基数做判断
今天做项目遇到这样一个奇葩问题:我们先看如下代码: int ftcs = dealFtcs(ftcs); if(ftcs % 2 == 1){ //奇数 /* * 处理..... */ } ...
- [异常解决] ubuntu上安装虚拟机遇到的问题(vmware坑了,virtual-box简单安装,在virtual-box中安装精简版win7)
利用周末时间将整个电脑格式化,换成了ubuntu系统- 所谓:扫清屋子再请客! 但是有些软件只在win上有,于是还是考虑装个虚拟机来个——逐步过度策略,一点点地从win上转移到linux上 我的系统是 ...
- 科蓝软件急招前端开发、PHP、.NET工程师
职位:前端开发 工作年限:不限 学历要求:大专 招聘人数:2 专业:不限 薪酬:面议 工作地点:浙江嘉兴.北京 岗位职责: 1.负责公司项目的UI设计: 2.负责将UI静态化 ...
- Android自定义View的构造函数
自定义View是Android中一个常见的需求,每个自定义的View都需要实现三个基本的构造函数,而这三个构造函数又有两种常见的写法. 第一种 每个构造函数分别调用基类的构造函数,再调用一个公共的初始 ...
- 简单JavaScript模版引擎优化
在上篇博客最简单的JavaScript模板引擎 说了一下一个最简单的JavaScript模版引擎的原理与实现,作出了一个简陋的版本,今天优化一下,使之能够胜任日常拼接html工作,先把上次写的模版函数 ...