一个jQuery轮换滚动效果
开头语：这是2009年的最后一篇，让我们明年再见。
翻看以前博客大巴的一个模板的代码，发现一个利用jQuery做的滚动效果，很简单，鉴于09年末实在没啥可记录的，也没啥可总结的，就拿这个再凑篇日志吧！
HTML语言有滚动的代码，包含在<marquee></marquee>标记里的内容就会左右滚动，当然，这个标记还支持其它参数，可以改变滚动方向，滚动速度等。但是，总的说，这个做出来的滚动效果是很简单的。我想要一种滚动一个栏目然后暂停一段时间继续滚动的效果，于是就用jQuery来做了。
我主要用来循环滚动文字，想法是建一个20px高度的层DIV，然后将需要滚动的内容包含在li标签中放入这个容器中，HTML结构如下：
1: <div class="myscroll">
2: <ul>
3: <li>something here<li>
4: <li>something here<li>
5: <li>something here<li>
6: ......
7: </ul>
8: </div>
设置每个li的高度和行高也都为20px，层DIV的溢出属性为overflow:hidden，这样一来就会只显示一个li内容，超出的就隐藏掉了。然后就是用jQuery让整个ul向上移动就行了，每次20px。为了有动画效果，可以使用jQuery的自定义动画函数。
注意一点，整个ul向上浮动了，要实现循环滚动，就需要将移到上面的li再追加到ul的末尾。
我们先定一个滚动函数，方便调用：
1: function myscroll(i) {//参数i极为包含ul的那个DIV
2: $(i).find("ul:first").animate({//使整个ul外框距向上移动20px
3: marginTop: "-20px"
4: },
5: 1000, //这里是移动20px的时间，为了有动画过渡效果
6: function() {//回调一个函数，将margin-top再设为0
7: $(this).css({
8: marginTop: "0"
9: }).find("li:first").appendTo(this)//最关键的一步，将ul的li列表的第一个移动追加到列表末尾
10: })
11: };
调用这个函数，只需
1: setInterval('myscroll(".myscroll")', 5000);//间隔五秒循环调用这个函数
好了，完成了，就这么简单。
还可以更完美一点？当然，这个其实就可以当做一个简单的图片轮换门的原型，你还可以对它扩展一下，比如鼠标移上，暂停滚动，移下继续滚动等。
这个有什么用？我说几点可以用到的地方，比如你可以调用评论列表，循环展示最新评论；调用最近或随机日志列表，循环展示最新日志；传统的有的人喜欢将列表做成tag切换式，为何不换种思路做成循环滚动的呢？这样可以节约页面空间，展示出更多的内容。
还可以放置站内公告，有好几条的话也可以做成滚动效果。
好吧，我说一下我用的地方，其实我这个主题真的是没什么地方可以再塞下东西了，再塞就越来越乱了。我一开始用到了相关日志处，我后台设置显示10篇相关日志，但是加上摘要就会太长了，于是我只显示五篇相关日志再页面上。然后用这个每次滚动五个li，即10秒钟轮换五个相关日志。我已经去除了这一效果，因为滚动范围太大，有点头晕，怕又被人骂。
其实，我最后还是给这个东西找了个安身之处，就是用到了博客标题的副标题（描述）处。
我的博客标题处博客名用了一张图片代替，副标题就是那个“Yes,I’m qiqiboy ! And my vision is world peace.”。然后我又加上了其他两句标语，让他们滚动起来。。。
貌似有点无聊。。。。
提醒一点，如果你也要像我一样用来滚动副标题，为了seo着想，不至于搜索引擎爬虫抓取到主标题下面太多副标题，最好用JavaScript动态添加这些副标题。比如，除了后台设置的那个副标题，其它的副标题都是我用jQuery添加上去的，其实也就一句话的事：
1: $(".myscroll ul").append("<li>something here</li><li>something here</li><li>something here</li>");
好了，该说的说完了。我们明年再见。
最后，甩下一首歌结束本文。
我还得补充一点，看效果demo请查看此页面顶部圣诞老人右边的主标题下方。
[audio:http://zgjld.com/Music/2009121819475793e4f.mp3?jdfwkey=6kao93]
random posts
most commented posts
Post Addresses :http://www.qiqiboy.com/2009/12/28/one-jquery-scroll-code.html
If you like this post, welcome Subscribe my blog.
32 Responses to “一个jQuery轮换滚动效果”
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
[...] 之前没啥可写时我瞎凑了篇《一个jQuery滚动效果》，这几天因为在酝酿完善这个主题，因为想要将这个加到主题中，但是又不想依赖jQuery，于是试着自己写了一个。写的很烂，完全是凭着之前看的一点东西，权当练笔了，强者勿笑。 [...]
