今天突发奇想 想到的一个新思路

通过使用animate改变外边距达到滚动效果 再用复制节点插入到最后一行达到循环目的

HTML代码如下

<body>

<ul style="border: 1px solid blue;height: 60px;width:300px;overflow: hidden;">

<li>aaaaaaaaaaaaaaaaaaaaa</li>

<li>bbbbbbbbbbbbbbbbbbbbb</li>

<li>ccccccccccccccccccccc</li>

<li>ddddddddddddddddddddd</li>

<li>eeeeeeeeeeeeeeeeeeeee</li>

<li>fffffffffffffffffffff</li>

<li>ggggggggggggggggggggg</li>

<li>hhhhhhhhhhhhhhhhhhhhh</li>

</ul>

</body>

js代码如下

<script type="text/javascript">

$(function(){

//每隔两秒进行一次滚动

var timing =setInterval("info()",2000);

$("ul").hover(

function(){clearInterval(timing);},

function(){timing = setInterval("info()",2000);}

)

})

function info(){

//复制第一个li

var li =$("ul>li:eq(0)").clone();

//使用animate对li的外边距进行调整从而达到向上滚动的效果

$("ul>li:eq(0)").animate({marginTop:"-20px"},2000,function(){

//对已经消失的li进行删除

$("ul>li:eq(0)").remove();

//把复制后的li插入到最后

$("ul").append(li);

})

}

</script>

希望对各位有所帮助

使用jQuery实现向上循环滚动效果（超简单）的更多相关文章

  1. Expression Blend4经验分享：文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

  2. 【转】使用jquery animate创建平滑滚动效果

    这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...

  3. 图片循环滚动效果shader

    背景无限循环滚动效果,有X和Y轴的速度控制,方便控制.见下图,操作步骤同之前的背景循环设置. shader如下: Shader "Custom/Scroll" { Properti ...

  4. unity 背景无限循环滚动效果

    背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...

  5. DIV+javascript实现首尾相连循环滚动效果

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

  6. 特殊例子--JavaScript代码实现图片循环滚动效果

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

  7. 利用jquery实现向左滚动效果及offset的使用

    昨天和今天做了一个轮播图,它的tab标签不是1,2,3这样的数据表示,而是使用圆圈表示,效果如下:

  8. APP中常见上下循环滚动通知的简单实现，点击可进入详情

    APP中常见上下循环滚动通知的简单实现,点击可进入详情 关注finddreams博客,一起分享一起进步!http://blog.csdn.net/finddreams/article/details/ ...

  9. Css3动画效果,彩色文字效果,超简单的loveHeart

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...

随机推荐

  1. Android SQLite案例

    重点掌握execSQL()和rawQuery()方法,rawQuery()方法用于执行select语句. SQLiteOpenHelper,实现了onCreate和onUpgrade方法. 第一次创建 ...

  2. Logistic Regression 之错误翻译

    根据周志华老师的讲法,这里 logistic 是对数几率的意思,所以正确的翻译方法应该叫 对数几率回归, 所以不要以为这个东西叫 逻辑回归,逻辑回归是错误的翻译.

  3. 关于Flume以及Kafka理解

  4. 用Eclipse创建第一个Spring项目（最最入门级）

    http://blog.csdn.net/shymi1991/article/details/48085955 网上关于Spring的介绍资料已经数不胜数,但大多篇幅冗长,初学者不易理解记忆.这里先作 ...

  5. mongodb 3.4分片复制集配置

    1:启动三个实例 mongod -f /home/mongodb/db27017/mongodb27017.conf mongod -f /home/mongodb/db27018/mongodb27 ...

  6. web.xml配置错误页面，及输出错误信息

    1.需要在web.xml中配置相关信息 <!-- 默认的错误处理页面 --> <error-page> <error-code>403</error-code ...

  7. Java不带.classpath的svn项目下载，转成到eclipse中

    .classpath是Eclipse的工程文件,别人没有将工程的信息传到SVN库中,就检查不出.classpath文件,识别不了项目结构. 这种做法也是比较提倡的方法.SVN上只要有项目的源码信息就可 ...

  8. 《SQL必知必会》总结

    目录   第1章 了解SQL 第2章 检索数据 第3章 排序检索数据 第4章 过滤数据 第5章 高级数据过滤 第6章 用通配符进行过滤 第7章 创建计算字段 第8章 使用数据处理函数 第9章 汇总数据 ...

  9. [原]如何在Android用FFmpeg+SDL2.0之同步视频

    关于视频同步的原理可以参考http://dranger.com/ffmpeg/tutorial05.html 和 [原]基础学习视频解码之同步视频 这两篇文章,本文是在这两篇的基础上移植到了Andro ...

  10. codeforces 814D An overnight dance in discotheque

    题目链接 正解:贪心. 首先我们可以计算出每个圆被多少个圆覆盖. 很显然,最外面的圆是肯定要加上的. 然后第二层的圆也是要加上的.那么第三层就不可能被加上了.同理,第四层的圆又一定会被加上. 然后我们 ...