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

通过使用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. 12_Redis缓存穿透

    [何为缓存穿透] 缓存穿透是查询一个一定不存在的数据,这样的请求都要到存储层MySql去查询,失去了缓存的意义,在流量大时,可能MySql就挂掉了,要是有人利用不存在的key频繁攻击我们的应用,这就是 ...

  2. Spring boot Jackson基本演绎法&devtools热部署

    1.针对POJO中的User类添加一些注解,使其某些数据不显示或者格式化某些数据类型,如下图: 2.启动Application,然后进入浏览器访问http://localhost:8080/user/ ...

  3. 排序算法积累(2)----sort排序

    转载:http://blog.csdn.net/sunshangjin/article/details/40296357 想起来自己天天排序排序,冒泡啊,二分查找啊,结果在STL中就自带了排序函数so ...

  4. silverlight generic.xaml 包含中文 编译错误的问题

    发现我在一个dll工程里面新建一个xaml文件起名成generic.xaml 如果这个xaml里面存在中文则会编译错误,发现这样建立的xaml使用的是gb2312编码 果断文件-另存为-编码另存为 u ...

  5. swoole 创建tcp服务器

    server.php <?php /** * 创建tcp服务器 * Date: 2019/1/15 */ $serv = new swoole_server('127.0.0.1', 9501) ...

  6. 关于map容器的元素被无参初始化

    使用C++中的map容器定义一个mp,当你执行if语句判断mp[3]是否为1时,那么如果mp[3]以前不存在,此时mp[3]就会被无参初始化,second赋值为0. 以下的程序可以证明这一点.执行了第 ...

  7. win+ R下的常见命令

    -------------------------电脑运行常见命令----------------------------- Windows+R输入cmd 运行net start mssqlserve ...

  8. Linux：配置HTTPS，获取ssl证书

    这里小仓鼠将Https配置流程记录下来 1.访问网站:https://www.aliyun.com/ss/?k=ssl 2.选择‘立即购买’ 3. 页面变换为: 4.点击‘立即购买’ 5.进行支付 6 ...

  9. zt 设计模式六大原则（3）：依赖倒置原则

    下面说法对不对? 父类将算法(逻辑)封装起来,子类实现细节:这个就叫DIP(依赖倒置:Dependency Inversion Principles),模板模式就是这个原则的实现.如果在父类中加一个t ...

  10. AngularJs学习笔记--Understanding Angular Templates

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与mode ...