当前位置： 移动技术网 > IT编程>开发语言>Jquery > Jquery消息滚动

Jquery消息滚动

2020年04月17日  | 移动技术网IT编程  | 我要评论

又是一次作业练习，jquery消息滚动，效果图如下：

源码下载及效果预览：https://www.jq22.com/jquery-info22971

代码实现起来很简单，所以看起来效果也是很不如人意，就当记录一下子趴

推荐链接 

       无缝滚动：http://www.jq22.com/jquery-info22981

       推送滚动：http://www.jq22.com/jquery-info22468

现在来简单写一下自己的这个代码实现

js代码：

  $(function(){
                     //滚动事件，每两秒滚动一次
                       var mun =setinterval(function(){
                          $("li:last").hide("slow").prependto($("#file0")).slidedown();
                          },2000);
                     //鼠标悬停事件，悬停停止滚动，鼠标移出开始滚动
                     $("li").hover(function(){
                          clearinterval(mun);
                      },function(){
                         mun = setinterval(function(){
                               $("li:last").hide("slow").prependto($("#file0")).slidedown();
                             },2000);
                      }
                     );

过一遍jq的方法和事件

定时器：

 setinterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearinterval() 被调用或窗口被关闭。

 settimeout() ：在指定的毫秒数后调用函数或计算表达式。

定时器是使用js的内容。详情参考 

hide属性：隐藏显示的元素和它对应的是show属性代码中的slidedown可以替换成show()，都是动画效果而已

prependto属性：把所有匹配的元素前置到另一个、指定的元素元素集合中。案例中是每隔一秒把最后一个li添加到ul中，

代码太简洁了不知道写啥了qaq

 

     

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网