JQuery实现仿sina新浪微博新鲜事滚动
时间:2022-04-23
本文章向大家介绍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>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 3D开发是一个生态,ThingJS支持js,css,json,html外部资源引用
- 手把手教你实现xxl-job分布式任务调度平台搭建
- 在 vscode 中 debugger 调试
- MongoDB 的安装
- 一次opencanary自定义实践
- 从0到1编写一个Xposed Module :Anti Screenshot
- Linux pwn入门学习到放弃
- 一款针对网站的网络侦察和信息收集工具
- Numpy核心语法和代码整理汇总!
- 发现内网存活主机的各种姿势
- SharedPreferences VS MMKV
- RabbitMQ 最常用的 3 大模式!
- 啥?HashMap 1.8 还有死循环?你逗我呢!
- 他写的东西,你们喜欢么?
- 告诉你一个 AtomicInteger 的惊天大秘密!