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

通过使用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. 使用spring tool suite(STS)工具创建spring boot项目和出现错误后的处理

    一.先下载配置maven环境 1.下载地址:http://maven.apache.org/download.cgi windows下下载zip文件 2.解压后放到某个文件目录下 3.配置环境变量 ( ...

  2. Nginx 性能参数优化

    user www www; # ginx要开启的进程数 一般等于cpu的总核数,没必要开那么多,1个nginx内存消耗10兆左右 worker_processes 4; # 为每个进程分配cpu,上例 ...

  3. Tomcat中server.xml文件内各节点详解

    由于 Tomcat 基于 Java,实际上在各种 Linux 发行版里的配置方法都大同小异,只是我看见在 Arch Linux 环境里搭建 Tomcat 的文章比较少,所以在 Arch Linux 实 ...

  4. 使用cocostudio 需要在Android.mk文件的配置

    直接贴上Android.mk文件吧. 对了,是cocos2d3.0的,不知道2.x是否一样. LOCAL_PATH := $(call my-dir) include $(CLEAR_VARS) LO ...

  5. Linux入门-1 常用命令

    写在前面 当年初学Linux的时候,在网上找到nash_su大神的一套视频,讲的特别好,基础部分看了好几遍,很多知识点让我受益至今. 十分庆幸当年的选择,也十分感谢nash_su大神,祝你事事顺心,每 ...

  6. TcpListener、TcpClient

    1.TcpClient using System; using System.Text; using System.Net.Sockets; namespace tcpclient { class t ...

  7. List 的 removeAll 方法的效率

    List 的 removeAll 方法的效率低的原因: 要遍历source,对dest进行contain操作,而contain又要遍历dest进行equal比较. 解决办法:dest转为set,用se ...

  8. ADB命令详解及大全（ 声明：此文是参考大佬博客所做的笔记！）

    adb是什么? adb的全称为Android Debug Bridge,就是起到调试桥的作用.通过adb我们可以在Eclipse中方面通过DDMS来调试Android程序,说白了就是debug工具.a ...

  9. python UI自动化实战记录七：页面2用例编写

    使用python自带的unittest测试框架,用例继承自unittest.TestCase类. 1 引入接口类和页面类 2 setUp函数中打开页面,定义接口对象 3 tearDown函数中关闭页面 ...

  10. MongoDB限制记录数

    MongoDB limit()方法 要限制 MongoDB 中返回的记录数,需要使用limit()方法. 该方法接受一个数字类型参数,它是要显示的文档数. 语法 limit()方法的基本语法如下: & ...