jquery实现文字由下到上循环滚动的实例代码_jquery

有如下代码:

复制代码 代码如下:

<div id="oDiv">
<ul id="oUl">
<li>第1个li元素</li>
<li>第2个li元素</li>
<li>第3个li元素</li>
<li>第4个li元素</li>
<li>第5个li元素</li>
<li>第6个li元素</li>
<li>第7个li元素</li>
<li>第8个li元素</li>
</ul>
</div>

但是页面只显示前5个li(相关css不做赘述),想要循环显示li里面的内容就是在制定的时间将ul向上移动li的高度,于此同时将第一个li加到ul中li的末尾。
  代码如下:

复制代码 代码如下:

function autoScroll(obj, ul_bz){
$(obj).find(ul_bz).animate({
marginTop : "-25px"
},500,function(){
$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
});
}
setInterval('autoScroll("#oDiv", "#oUl")',3000)

时间: 2025-01-24 20:37:30

jquery实现文字由下到上循环滚动的实例代码_jquery的相关文章

jquery实现文字由下到上循环滚动

 有如下代码: 代码如下   <div id="oDiv"> <ul id="oUl"> <li>第1个li元素</li> <li>第2个li元素</li> <li>第3个li元素</li> <li>第4个li元素</li> <li>第5个li元素</li> <li>第6个li元素</li> <

jQuery实现下拉加载功能实例代码_jquery

废话不多说了,直接给大家贴代码了,具体代码如下所示: <script> var str = ''; if(page=="") page=1; var stop=true;//触发开关,防止多次调用事件 $(window).scroll( function(event){ //当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载. if ($(this).scrollTop() + $(window).height() + 10 >= $(docum

基于jQuery实现弹出可关闭遮罩提示框实例代码_jquery

jquery CSS3遮罩弹出层动画效果,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果 先给大家展示下效果图,如果大家感觉还不错,请参考实现代码. 效果演示 关键代码如下所示: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo

jQuery多文件异步上传带进度条实例代码_jquery

先给大家展示下效果图: ///作者:柯锦 ///完成时间:2016.08.16 ///多文件异步上传带进度条 (function ($) { function bytesToSize(bytes) { if (bytes === 0) return '0 B'; var k = 1024, // or 1000 sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes)

BootStrap的table表头固定tbody滚动的实例代码_jquery

关于bootstrap table其他知识不多说,直接给大家贴代码了. 关键代码如下所示: <!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css

jQuery实现公告文字左右滚动的实例代码_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="

jquery实现省市select下拉框的替换(示例代码)_jquery

省市对应的实现:<还有一些没封装起来> 更具选择的省份来确定市的内容 jsp代码: 复制代码 代码如下: <body>  省份<select name="prin">   <option>--请选择--</option>   <option>福建</option>   <option>北京</option>   <option>山东</option>   

jQuery 检查某个元素在页面上是否存在实例代码_jquery

    最近做项目,有这么个功能用jQuery检查某个元素在网页上是否存在,这里记录下,也许能帮助正在读文章的朋友. 用jQuery检查某个元素在网页上是否存在时,应该根据获取元素的长度来判断,代码如下: if($("#tt").length > 0) { //元素存在时执行的代码 } 具体原因如下:          在JavaScript中,我们在使用传统的getElementById()和getElementsByTagName()时,如果在网页中找不到相关元素,那么浏览器

jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码_jquery

ws.aspx 代码 复制代码 代码如下: <!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 id="Head1&q