I’m qiqiboy !

开头语：这是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]