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

通过使用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. configure配置安装详解

    使用 ./configure --help 就可以查看到所有的配置选项. 1.--host=HOST指定软件运行的系统平台.如果没有指定,将会运行`config.guess'来检测.--host 指定 ...

  2. Mysql学习---视图/触发器/存储过程/函数/执行计划/sql优化 180101

    视图 视图: 视图是一个虚拟表(非真实存在),动态获取数据,仅仅能做查询操作 本质:[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用.由 ...

  3. Deep Learning Drizzle

    Deep Learning Drizzle Drench yourself in Deep Learning, Reinforcement Learning, Machine Learning, Co ...

  4. 在vs2015中使用附加进程的方式调试IIS中的页面

    发布网站至IIS-附加到进程调试 Internet Information Services(IIS,互联网信息服务),是由微软公司提供的基于运行Microsoft Windows的互联网基本服务. ...

  5. yii2.0表单自带验证码

    Yii2.0的自带的验证依赖于GD2或者ImageMagick扩展. 使用步骤如下: 第一步,控制器: 在任意controller里面重写方法

  6. 跳舞玩偶Doll正式上线

    有问题或者建议大家可以联系我的QQ 914287516 或者qq邮箱 官方qq群 325631077:

  7. 贝叶斯网络（Bayesian network)）简介（PRML第8.1节总结）概率图模型（Graphical models)

    转:http://www.cnblogs.com/Dzhouqi/p/3204353.html 部分图为手写,由于本人字很丑,望见谅,只是想把PRML书的一些部分总结出来,给有需要的人看,希望能帮到一 ...

  8. boost::intrusive_ptr原理介绍

    boost::intrusive_ptr一种“侵入式”的引用计数指针,它实际并不提供引用计数功能,而是要求被存储的对象自己实现引用计数功能,并提供intrusive_ptr_add_ref和intru ...

  9. PhoneGap Geolocation 获取地理位置 api

    一. PhoneGap Geolocation 对象介绍 1.使应用程序可以访问地理位置信息.geolocation 对象提供了对设备 GPS 传感器的访问.Geolocation 提供设备的位置信息 ...

  10. UVa 1442 - Cave

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...