公告滚动想必大家都有见到过吧,实现方法也有很多,下面为大家介绍使用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>jquery垂直公告滚动-www.jbxue.com</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垂直公告滚动实现代码的更多相关文章

  1. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 基于jQuery垂直多级导航菜单代码

    基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="ce&q ...

  3. jQuery垂直二级导航菜单代码

    http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航.   HTML <div id="my_menu" class=&qu ...

  4. jQuery图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery鼠标滚动垂直全屏切换代码

    体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...

  6. jQuery实现公告文字左右滚动

    jQuery实现公告文字左右滚动的代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

  7. jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

    jquery单行滚动.批量多行滚动.文字图片翻屏滚动效果代码,需要的朋友可以参考下. 以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.一.单行滚动效果 <!DOCTYPE ...

  8. div+css+jQuery图片横向滚动代码(带左右点击按钮)

    首先感谢Blue老师的javascript教程,给了我很多的启发,这是我在看完10 - 定时器的使用 - 2这节视频后,自己试着用jQuery重新改写了一下代码,感觉至少比百度搜出来的那一坨靠谱多了, ...

  9. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. python的内存管理机制 图解+Django Web开发学习笔记

    http://www.cnblogs.com/CBDoctor/p/3781078.html http://www.cnblogs.com/vamei/p/3232088.html http://bl ...

  2. html页面docutype前面出现字符会导致IE678 margin:0 auto;失效

    html页面<!DOCTYPE html>前面出现字符会导致IE678 margin:0 auto;失效

  3. UNIX标准化及实现之标准之间的冲突

    就整体而言,这些不同的标准之间配合得相当好.但是我们也很关注它们之间的差别,特别是ISO C标准和POSIX.1之间的差别. ISO C定义了函数clock,它返回进程使用的CPU时间,返回值类型是c ...

  4. Mysql命令行连接

    mysql在线参考手册地址: http://dev.mysql.com/doc/refman/5.1/zh/tutorial.html#connecting-disconnecting 在linux平 ...

  5. How to solve GM MDI cannot complete the installation

    Dear Joy, I have a problem using GM MDI diagnostic tool. When I installed it on my laptop, the tool ...

  6. Android(java)学习笔记120:Android中的Application类用法

    1.简介 如果想在整个应用中使用全局变量,在java中一般是使用静态变量,public类型:而在android中如果使用这样的全局变量就不符合Android的框架架构,但是可以使用一种更优雅的方式就是 ...

  7. 2013 ACM/ICPC 长沙现场赛 A题 - Alice's Print Service (ZOJ 3726)

    Alice's Print Service Time Limit: 2 Seconds      Memory Limit: 65536 KB Alice is providing print ser ...

  8. Apple Watch 使用体验

    交互 Apple Watch 支持以下几种交互方式: 按下 Digital Crown (数码表冠),在桌面和表盘之间切换. 长按 Digital Crown (数码表冠),启动 Siri. 双击 D ...

  9. (原创)fedora 17安装KVM虚拟机

    1.安装KVM yum groupinstall Virtualization 'Virtualization Client' 2.安装api支持 yum install libvirt servic ...

  10. placeholder

    html: <div style="position:relative;">   <input type="password" id=&quo ...