使用jQuery实现向上循环滚动效果(超简单)
今天突发奇想 想到的一个新思路
通过使用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实现向上循环滚动效果(超简单)的更多相关文章
- Expression Blend4经验分享:文字公告无缝循环滚动效果
这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...
- 【转】使用jquery animate创建平滑滚动效果
这篇文章主要介绍了使用jquery animate创建平滑滚动效果,效果可以滚动到顶部.到底部或页面中指定地方,生要的是非常平滑,很舒服,需要的朋友可以参考下 滚动到顶部: $('.scroll_to ...
- 图片循环滚动效果shader
背景无限循环滚动效果,有X和Y轴的速度控制,方便控制.见下图,操作步骤同之前的背景循环设置. shader如下: Shader "Custom/Scroll" { Properti ...
- unity 背景无限循环滚动效果
背景无限循环滚动效果如下示: 步骤如下: 导入背景图片后,设置图片的格式,如下图: 2.图片格式也可以设置是Texture格式,但是Wrap Mode 一定要是Repeat[重复发生]:然后记得App ...
- DIV+javascript实现首尾相连循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 特殊例子--JavaScript代码实现图片循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 利用jquery实现向左滚动效果及offset的使用
昨天和今天做了一个轮播图,它的tab标签不是1,2,3这样的数据表示,而是使用圆圈表示,效果如下:
- APP中常见上下循环滚动通知的简单实现,点击可进入详情
APP中常见上下循环滚动通知的简单实现,点击可进入详情 关注finddreams博客,一起分享一起进步!http://blog.csdn.net/finddreams/article/details/ ...
- Css3动画效果,彩色文字效果,超简单的loveHeart
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...
随机推荐
- 使用SDL2出现 “error LNK2019: 无法解析的外部符号 _SDL_main,该符号在函数 _main 中被引用” 时的可能错误记录
这几天在使用SDL2,之前一直都没有错,直到上午把项目搬了个地方.结果一直出现 “error LNK2019: 无法解析的外部符号 _SDL_main,该符号在函数 _main 中被引用” . 看了网 ...
- 关于windows server 里Let's Encrypt续订的问题
引言 Let's Encrypt是什么就不详细说了,它是免费的https证书,优点就是免费,缺点就是每三个月就要自己续上.今天主要介绍的是续上有效期的环节. 1.安装certify 下载地址: htt ...
- Dapper进行增删改查 z
http://www.cnblogs.com/huangkaiyan10/p/4640548.html 项目背景 前一段时间,开始做一个项目,在考虑数据访问层是考虑技术选型,考虑过原始的ADO.NET ...
- sudo:*:command not found
原因:执行sudo后,sudo会根据visudo里面配置的secure_path来找寻命令,所以sudo尽量使用绝对路径 sudo bash-c "echo $PATH"也可以看到 ...
- Sandworm Attack小结
这个漏洞刚出来时就分析过,当时大致弄明白了原理,但对很多细节和原理还是一知半解.后来开始找工作……今天终于有时间来把欠的这部分功课补上. 这个漏洞网上的各种中英文分析已经很多了,因此这里我只根据自己的 ...
- linux开机启动脚本
linux开机启动脚本 linux 开机启动脚本 用户自定义开机程序(/etc/rc.d/rc.local) 操作最简单,方便.每次都自己启动PHP啊,Nginx啊 烦死了,其他方式还要弄shell啊 ...
- 设计模式:外观(Facade)模式
设计模式:外观(Facade)模式 一.前言 外观模式是一种非常简单的模式,简单到我们经常都会使用,比如对于类A和B,如果两者需要交互,经过一定的处理过程才能实现某一个具体的功能,那么我们可以将这 ...
- g++: error: unrecognized command line option ‘-std=C++11’
一个小程序,在编译的时候出错,原来使用的编译命令是 g++ -std=C++11 array.cpp -o array.exe g++: error: unrecognized command lin ...
- imooc课程:Java高并发秒杀API 记录
Java高并发秒杀API之业务分析与DAO层 Java高并发秒杀API之Service层 Java高并发秒杀API之web层 Java高并发秒杀API之高并发优化 除了并发部分外的这个web开发的总结 ...
- tomcat 8 startup.bat启动乱码问题
修改Tomcat bin目录下startup.bat文件 将call "%EXECUTABLE%" start %CMD_LINE_ARGS% 改为 call "%EX ...