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>
- 云安全(第1部分):从何开始
- ios 开发,通讯录信息调用常用方法,这个比较全,不用再整理了
- 深入理解和应用Float属性
- 堆和栈的区别
- 深入理解和应用display属性(二)
- Philip S.Yu 讲的广度学习到底是什么?
- Kubernetes服务网格(第10部分):服务网格API
- 刚刚,同程与艺龙宣布合并!去你的大数据!
- 从蓝光到4K,腾讯视频高码率下载背后的技术
- 从开发者的角度比较IAAS与PAAS
- 图灵机器人郭家:以语义技术为核心驱动力,让机器更好地理解世界
- 静态条码设支付上限,500元封顶,海外支付尚未通知
- 如何自动地将代码从Git平台部署至组件容器
- 聂卫平说过人工智能不会取代人类 只会让我们生活的更加美好
- 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 数组属性和方法
- ES10(2019)有哪些更新和新特性?
- Flutter Icon IconFont(图标控件)
- Flutter TextField(输入控件)
- 常见的面试问题总结
- Flutter Button(按钮控件)
- 终极干货,数组去重且显示每一个数据重复的次数
- VUE引入 script, link
- Flutter Text(文本控件)
- 纯JS实现在一个字符串b中查找另一个字符串a出现的所有位置,并且不使用字符串的方法(递归)
- 【剑指Offer】替换空格
- 面试汇总(一):针对百度面试总结
- Shell awk命令
- 【redis6.0.6】redis源码慢慢学,慢慢看 -- 第五天:adlist
- redis学习(十一)
- 互联网软件常见开发方法