公告上下滚动基于Jquery
2024-09-03 14:53:00
前提 需要引入jquery 如果你用的单位不是px 修改的同时红色部分需保持一致
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>上下滚动公告栏</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
margin: ;
}
li {
padding: 5px;
}
.notice {
position: relative;
height: 26px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="notice">
<ul class="ul-list">
<li>就算没有人喜欢你 也并不表你不好</li>
<li>你要等</li>
<li>在未来的某一天</li>
<li>有一个人会对你说喜欢你</li>
<li>在此前你要先学会好好爱自己</li>
<li>陆筱璟</li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function() {
var num = $(".ul-list").find("li").length;
if (num > ) {
setInterval(function() {
$(".ul-list").animate(
{
marginTop: "-26px"
},
,
function() {
$(this)
.css({ marginTop: "" })
.find("li:first")
.appendTo(this);
}
);
}, );
}
});
</script>
</html>
最新文章
- Win7搭建nginx+php+mysql开发环境以及websocket聊天实例测试
- myeclipse使用maven插件进行maven install时报错check $m2_home environment variable and mvn script match
- C++之路进阶——codevs1281(Xn数列)
- html() 和 text() 方法的区别
- [Json.net]Linq to Json
- 再探Tomcat
- IIS 启用或关闭目录浏览
- ThinkPHP - 空模块+空操作
- Hadoop2.7.3集群搭建
- 4 sum
- 多台CentOS服务器下实现SSH免密码登录
- 一次python 内存泄漏解决过程
- Tomcat增加虚拟内存(转)
- WPF 简易进度条效果
- Java线程池关闭1-shutdown和isTerminated<;转>;
- vi文字处理器
- .NET 简易方法拦截器
- scrapy 直接在编辑器运行
- 使用mint-ui的 InfiniteScroll 做数据分页请求
- 普通平衡树Tyvj1728、luogu P3369 (splay)