Jquery消息滚动

又是一次作业练习,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的内容。详情参考 https://www.runoob.com/w3cnote/js-timer.html

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

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

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

     

(0)

相关推荐

  • jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能

    最近在学习jQuery时接触到了show().hide().toggle()函数,于是利用这几个函数练习了一个使元素显示隐藏的案例: 小提示:代码中切换按钮上下的小图标可以在此链接品牌展示功能图片中获 ...

  • 解析Jquery语法是什么?

    Jquery是一种快速,小巧,功能丰富的JavaScript库,可以让html文档遍历和操作,事件处理,动画和ajax更加容易使用的一种api,可以在多种浏览器中工作. 封装了JavaScript常用 ...

  • JQuery_01

    一.认识JQuery 二.对象 三.获取元素 四.隐式迭代 五.筛选选择器 六.事件绑定 七.筛选方法(父级,后代,兄弟) 八.排他思想 九.链式编程(一行代码解决问题) 一.认识JQuery 本质上 ...

  • python测试开发django-128.jQuery消息提示插件toastr使用

    前言 toastr.js是一个基于jQuery的非阻塞.简单.漂亮的消息提示插件,使用简单.方便.可以通过设置参数来设置提示窗口显示的位置.显示的动画等. toastr.js可以设置四种提示样式: 成 ...

  • 微信能发“滚动消息”了,安排!

    微信能发“滚动消息”了,安排!

  • (7条消息) C++中位运算的使用方法

    一:简介1 位逻辑运算符:& (位   "与")  and^  (位   "异或")|   (位    "或")   or~  (位 ...

  • (35条消息) 中国城域网路由情况介绍

    中国的城域网,大概有三张比较典型的,一个是中国移动的CMnet,一个是中国电信IP城域网,还有一个是中国网通IP城域网.作为接入最后的阵地,城域网的业务是最复杂的.含盖了IPTV,语音,Interne ...

  • 辉瑞/BioNTech向FDA滚动递交mRNA疫苗上申请

    5月8日,辉瑞/BioNTech联合宣布,已经开始向FDA滚动递交mRNA疫苗BNT162b2(tozinameran)生物制品许可申请(BLA),用于预防16岁及以上人群COVID-19感染.BLA ...

  • 微信下线模板消息,订阅通知如何使用?

    背景 微信于今日宣布 <服务号模板消息能力调整>,原先的模板消息能力将于 2021 年 4 月 30 日 24:00 下线,届时将无法使用此接口发送模板消息. 简单来讲,向小程序开发看齐, ...

  • 今天给大家报告一个惊喜的消息,同时多说几...

    今天给大家报告一个惊喜的消息,同时多说几句,关于倪海厦老师的. 好消息是,我运用倪海厦老师的"报刺针法",给一个女性患者治疗右手的皮下结节(俗称筋疙瘩)进行治疗,仅扎了一次,这个结 ...

  • 猛兽出笼!杭州3只金钱豹出逃,被狗咬死是假消息

    跟着虹摄看世界 摄影.旅游.各国博物馆趣闻- 作者:虹摄库尔斯克     前期头条: 节日太忙没更新,完成了两篇超1万5千字的文章 最近猛兽闹事的事情特别多,前不久东北虎在人类村庄出没,还扑倒一人,再 ...

  • (35条消息) 家用宽带网络与服务器使用的网络有什么不同?

    很多人都知道,服务器的网络跟家用网络有很多区别.其中有很多技术大牛,都是使用家里的宽带做很多别人使用公网服务器才能完成的服务. 但是对于普通人来讲,似乎都觉得没什么区别,本文就此简单做一下区分: 固定 ...