Jquery消息滚动,分享


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

Jquery消息滚动,

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

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

推荐链接 

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

       推送滚动:https://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的内容。详情参考 https://www.runoob.com/w3cnote/js-timer.html

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

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

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

 

     

www.dengb.comtruehttps://www.dengb.com/jQuery/1401155.htmlTechArticleJquery消息滚动, 又是一次作业练习,jquery消息滚动,效果图如下: 源码下载及效果预览:https://www.jq22.com/jquery-info22971 代码实现起来很简单…

—-想了解更多的jQuery特效教程关注<计算机技术网(www.ctvol.com)!!>

本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

ctvol管理联系方式QQ:251552304

本文章地址:https://www.ctvol.com/jquerytutorial/106603.html

(0)
上一篇 2020年4月30日
下一篇 2020年4月30日

精彩推荐