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

通过使用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. MFC中利用Opencv与C++抓取摄像头进行人脸识别（Mat）

    原文:http://blog.csdn.net/mr_curry/article/details/51098311 第一次写博客哈哈,有些小激动,还请各位大神多多包涵~ 最近的项目需要用到人脸识别,作 ...

  2. 关于建立Android工程R文件丢失的问题

    今天开始学习Android了,好久没打开eclipse,建立Android工程老是报错,于是手残的把appcompat-v7给删了,然后建立工程以后重新出来的appcompat-v7有个小叉号,百度了 ...

  3. CFileDialog 多文件选择

    CString pathName = _T(""); CString fileName = _T(""); CString strMulfilepath = _ ...

  4. 如何使用idea把web项目打成war包

    如果是maven项目,打成war包很容易,如果是web项目,需要这样子 1. 2. 3. output directory是war包的目录 4.重新选择 第一步的操作,选择build即可.

  5. QT开发(二) windows下简单部署

    如果使用vs编译器 需要c runtime 例如(msvc110 )这种 还需要若干qt的dll 基本在qt的bin目录 如果使用了QWindow这种对象还需要引用qt目录 plugins下 的内容 ...

  6. springlog记录

    在servlet.xml加入 <aop:aspectj-autoproxy proxy-target-class="true"></aop:aspectj-aut ...

  7. python三次输入错误验证登录

    # login.py# 提示用户输入用户名和密码# 验证用户名和密码# 如果v错误,则输出用户名或密码错误# 如果成功,则输出欢迎,xxxnum = 0while True: name = input ...

  8. Java中short、int、long、float、double的取值范围

    一.基本数据类型的特点,位数,最大值和最小值.1.基本类型:short 二进制位数:16 包装类:java.lang.Short 最小值:Short.MIN_VALUE=-32768 (-2的15此方 ...

  9. 【转】PBOC3.0和PBOC2.0标准规范异同分析

    2013年2月,中国人民银行发布了<中国金融集成电路(IC)卡规范(V3.0)>(以下简称PBOC3.0),PBOC3.0是在中国人民银行2005年颁布的<中国金融集成电路(IC)卡 ...

  10. io问题导致的insert缓慢

    生产环境一日常insert在业务量加倍之后非常缓慢,对有问题sql做awr报告和10046trace得出以下结论:In the 10046 trace, the execution of sql el ...