jquery垂直公告滚动实现代码
2013-12-09 17:49
621 查看
公告滚动想必大家都有见到过吧,实现方法也有很多,下面为大家介绍使用jquery实现垂直公告滚动,感兴趣的朋友不要错过
代码如下:
<!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 src="jquery-1.7.2.js"></script>
<style>
*{
padding:0px;
margin:0px;
}
ul{
list-style:none;
}
li{
line-height:30px;
}
</style>
</head>
<body>
<ul>
<li>1111</li>
<li>22222</li>
<li>3333</li>
<li>44444</li>
<li>5555</li>
<li>66666</li>
</ul>
<script>
setInterval(function(){
var newList=$('ul :first').clone(true);
$('ul').append(newList);
$('ul :first').remove();
},2000);
</script>
</body>
</html>
代码如下:
<!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 src="jquery-1.7.2.js"></script>
<style>
*{
padding:0px;
margin:0px;
}
ul{
list-style:none;
}
li{
line-height:30px;
}
</style>
</head>
<body>
<ul>
<li>1111</li>
<li>22222</li>
<li>3333</li>
<li>44444</li>
<li>5555</li>
<li>66666</li>
</ul>
<script>
setInterval(function(){
var newList=$('ul :first').clone(true);
$('ul').append(newList);
$('ul :first').remove();
},2000);
</script>
</body>
</html>
相关文章推荐
- jquery 操作和获取和操作background-position在IE下失效的问题
- JQuery UI DatePicker中z-index默认为1的解决办法
- 基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
- 三天学会jquery
- jQuery取得select选择的文本与值的示例
- jquery滚动实现原理之一,自制滚动函数实例
- jquery对ajax的支持
- 深入理解jQuery插件开发
- jQuery事件处理,动画,类数组操作
- 最简单的jQuery创建表格
- jquery checkbox反复调用attr('checked', true/false)只有第一次生效
- jquery获取被选中的checkbox
- jquery垂直公告滚动实现代码
- jQuery的deferred对象详解
- JQuery图片滑动插件
- 判断一个对象是jQuery对象还是DOM对象
- 滚动fixed定位插件 ,依赖jquery
- JQUERY AJAX简单模板
- Jquery商品飞入购物车动画效果实例展示
- jquery ztree异步搜索(搜叶子)