需求

页面中一个小区域循环滚动展示通知(公告、新闻、活动、图片等),并且鼠标hover时停止滚动并提示,鼠标离开后,继续滚动。

效果图

https://www.iguopin.com/index.php?m=&c=index&a=index

代码实现

html

  1. <div id="news">
  2. <ul class="notices_box">
  3. <li class="notice">
  4. <a href="www.iguopin.com" target="_blank" title="1">1</a>
  5. </li>
  6. <li class="notice">
  7. <a href="www.iguopin.com" target="_blank" title="2">2</a>
  8. </li>
  9. <li class="notice">
  10. <a href="www.iguopin.com" target="_blank" title="3">3</a>
  11. </li>
  12. </ul>
  13. </div>

css

  1. #news {
  2. height: 340px;
  3. overflow: hidden;
  4. }
  5. .notices_box {
  6. margin-left: 20px;
  7. .notice {
  8. margin-bottom: 8px;
  9. list-style: disc;
  10. font-size: 16px;
  11. color: #e6a5ab;
  12. a {
  13. color: #000;
  14. text-overflow: -o-ellipsis-lastline;
  15. overflow: hidden;
  16. text-overflow: ellipsis;
  17. display: -webkit-box;
  18. line-height: 1.2;
  19. -webkit-line-clamp: 2;
  20. line-clamp: 2;
  21. -webkit-box-orient: vertical;
  22. &:hover {
  23. color: #c90808;
  24. }
  25. }
  26. }
  27. }

JS

  1. $(function () {
  2. // 公告滚动
  3. var $this = $("#news");
  4. var scrollTimer;
  5. $this.hover(function () {
  6. clearInterval(scrollTimer);
  7. }, function () {
  8. scrollTimer = setInterval(function () {
  9. scrollNews($this);
  10. }, 2000);
  11. }).trigger("mouseleave");
  12. });
  13. // 公告滚动
  14. function scrollNews(obj) {
  15. var $self = obj.find("ul");
  16. var lineHeight = $self.find("li:first").height();
  17. $self.animate({
  18. "marginTop": -lineHeight + 'px'
  19. }, 600, function () {
  20. $self.css({
  21. marginTop: 0
  22. }).find("li:first").appendTo($self);
  23. })
  24. }

总结

主要是对hover、setInterval、clearInterval、animate这些方法以及marginTop属性(marginLeft、top、left等等)的理解和运用,需要注意的是,如果不加.trigger("mouseleave"),在网页初始化的时候列表不会滚动,还有appendTo能直接移动元素,就这些了。

jQuery 实现列表自动滚动循环滚动显示新闻通知的更多相关文章

  1. jQuery实现列表自动滚动

    需要在页面中一个小的区域循环滚动展示新闻(公告.活动.图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动. 效果图:    上干货 html: <div id="news&q ...

  2. jquery特效:无缝向上循环滚动列表

    效果呈现 整个列表间隔设定的时间向上移动一个item的高度 html结构: <div class="slide-title"> <span>title1&l ...

  3. Jquery制作--循环滚动列表

    自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可 ...

  4. ListView的自动循环滚动显示

    最近项目里需要做评价内容的循环滚动显示,一开始想到的就是定时器.后来查了资料才知道ListView里面有个函数smoothScrollToPosition(position),瞬间觉得简单了很多.首先 ...

  5. JQuery实现页面企业广告图片切换和新闻列表滚动效果

    最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  6. IOS实现自动循环滚动广告--ScrollView的优化和封装

    一.问题分析 在许多App中,我们都会见到循环滚动的视图,比如广告,其实想实现这个功能并不难,用ScrollView就可以轻松完成,但是在制作的过程中还存在几个小问题,如果能够正确的处理好这些小问题, ...

  7. UIScrollView实现自动循环滚动广告

    实现效果如下: 功能说明: 程序运行,图片自动循环播放,采用定时器实现; 当用户用手势触摸滑动时,定时器的自动播放取消,停止触摸时,自动无限播放; 代码如下 : 采用封装视图,外部进行调用即可: 1. ...

  8. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  9. 雷林鹏分享:jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据

    jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据 数据网格(datagrid)的虚拟滚动特性可以用来显示大数量的记录而不需要分页. 当滚动垂直滚动条时,数据网格(datagrid ...

随机推荐

  1. Linux终端使用aplay播放wav

    Linux终端使用aplay播放wav aplay是一个ALSA的声卡命令行soundfile录音机的驱动程序. 在linux下可以使用下面命令来查看用法: man aplay 所以可以使用来播放.w ...

  2. BehaviorTree.CPP行为树BT的介绍(一)

    节点类型 ControlNode是可以具有1到N个子节点的节点.一旦接收到tick,tick可以传播到一个或多个子节点. DecoratorNodes与ControlNode相似,但只能有一个子节点. ...

  3. QQ 表情大全

    rt,以下是比较常用的 QQ 表情简写: /kk:快哭了 /cy:呲牙 /ll:流泪 /dk:大哭 /yiw:疑问 /jk:惊恐 /se:色 /kel:可怜 /xyx:斜眼笑 /wx:微笑 /xk:笑 ...

  4. NOIP 2020 游记

    第一次写比赛游记,请多多指教! I. 考前 由于最近参加了太多太多比赛了,所以没有敲模板题: 考前一周:主要是在做 AtCoder 的题和 xjoi 的模拟赛,相当于恶补了一些套路吧! 考前一天:上午 ...

  5. Mysql 预处理 PREPARE以及预处理的好处

    Mysql 预处理 PREPARE以及预处理的好处 Mysql手册 预处理记载: 预制语句的SQL语法在以下情况下使用:   · 在编代码前,您想要测试预制语句在您的应用程序中运行得如何.或者也许一个 ...

  6. javaSE中级篇2 — 工具类篇 — 更新完毕

    1.工具类(也叫常用类)-- 指的是别人已经写好了的,我们只需要拿来用就行了 官网网址:Overview (Java Platform SE 8 ) (oracle.com) ---- 但是这个是英文 ...

  7. Erda 1.1 版本发布|3 大亮点特性最新解读

    来源|尔达 Erda 公众号 ​ Erda v1.1 Changelog: https://github.com/erda-project/erda/blob/master/CHANGELOG/CHA ...

  8. JAXB—Java类与XML文件之间转换

    JAXB-Java类与XML文件之间转换 简介         JAXB(Java Architecture for XML Binding) 是一个业界的标准,是一项可以根据XML Schema产生 ...

  9. JavaIO——内存操作流、打印流

    我们之前所做的都是对文件进行IO处理,实则我们也可以对内存进行IO处理.我们将发生在内存中的IO处理称为内存流. 内存操作流也可分为两类:字节内存流和字符内存流. (1)ByteArrayInputS ...

  10. AI ubantu 环境安装

    ubantu安装记录 apt install python3-pip anaconda安装 https://repo.anaconda.com/archive/Anaconda3-2020.11-Li ...