jQuery 实现列表自动滚动循环滚动显示新闻通知
需求
页面中一个小区域循环滚动展示通知(公告、新闻、活动、图片等),并且鼠标hover时停止滚动并提示,鼠标离开后,继续滚动。
效果图
https://www.iguopin.com/index.php?m=&c=index&a=index
代码实现
html
<div id="news">
<ul class="notices_box">
<li class="notice">
<a href="www.iguopin.com" target="_blank" title="1">1</a>
</li>
<li class="notice">
<a href="www.iguopin.com" target="_blank" title="2">2</a>
</li>
<li class="notice">
<a href="www.iguopin.com" target="_blank" title="3">3</a>
</li>
</ul>
</div>
css
#news {
height: 340px;
overflow: hidden;
}
.notices_box {
margin-left: 20px;
.notice {
margin-bottom: 8px;
list-style: disc;
font-size: 16px;
color: #e6a5ab;
a {
color: #000;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
line-height: 1.2;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
&:hover {
color: #c90808;
}
}
}
}
JS
$(function () {
// 公告滚动
var $this = $("#news");
var scrollTimer;
$this.hover(function () {
clearInterval(scrollTimer);
}, function () {
scrollTimer = setInterval(function () {
scrollNews($this);
}, 2000);
}).trigger("mouseleave");
});
// 公告滚动
function scrollNews(obj) {
var $self = obj.find("ul");
var lineHeight = $self.find("li:first").height();
$self.animate({
"marginTop": -lineHeight + 'px'
}, 600, function () {
$self.css({
marginTop: 0
}).find("li:first").appendTo($self);
})
}
总结
主要是对hover、setInterval、clearInterval、animate这些方法以及marginTop属性(marginLeft、top、left等等)的理解和运用,需要注意的是,如果不加.trigger("mouseleave"),在网页初始化的时候列表不会滚动,还有appendTo能直接移动元素,就这些了。
jQuery 实现列表自动滚动循环滚动显示新闻通知的更多相关文章
- jQuery实现列表自动滚动
需要在页面中一个小的区域循环滚动展示新闻(公告.活动.图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动. 效果图: 上干货 html: <div id="news&q ...
- jquery特效:无缝向上循环滚动列表
效果呈现 整个列表间隔设定的时间向上移动一个item的高度 html结构: <div class="slide-title"> <span>title1&l ...
- Jquery制作--循环滚动列表
自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可 ...
- ListView的自动循环滚动显示
最近项目里需要做评价内容的循环滚动显示,一开始想到的就是定时器.后来查了资料才知道ListView里面有个函数smoothScrollToPosition(position),瞬间觉得简单了很多.首先 ...
- JQuery实现页面企业广告图片切换和新闻列表滚动效果
最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- IOS实现自动循环滚动广告--ScrollView的优化和封装
一.问题分析 在许多App中,我们都会见到循环滚动的视图,比如广告,其实想实现这个功能并不难,用ScrollView就可以轻松完成,但是在制作的过程中还存在几个小问题,如果能够正确的处理好这些小问题, ...
- UIScrollView实现自动循环滚动广告
实现效果如下: 功能说明: 程序运行,图片自动循环播放,采用定时器实现; 当用户用手势触摸滑动时,定时器的自动播放取消,停止触摸时,自动无限播放; 代码如下 : 采用封装视图,外部进行调用即可: 1. ...
- html+css+javascript实现列表循环滚动示例代码
使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据
jQuery EasyUI 数据网格 - 使用虚拟滚动视图显示海量数据 数据网格(datagrid)的虚拟滚动特性可以用来显示大数量的记录而不需要分页. 当滚动垂直滚动条时,数据网格(datagrid ...
随机推荐
- Linux终端使用aplay播放wav
Linux终端使用aplay播放wav aplay是一个ALSA的声卡命令行soundfile录音机的驱动程序. 在linux下可以使用下面命令来查看用法: man aplay 所以可以使用来播放.w ...
- BehaviorTree.CPP行为树BT的介绍(一)
节点类型 ControlNode是可以具有1到N个子节点的节点.一旦接收到tick,tick可以传播到一个或多个子节点. DecoratorNodes与ControlNode相似,但只能有一个子节点. ...
- QQ 表情大全
rt,以下是比较常用的 QQ 表情简写: /kk:快哭了 /cy:呲牙 /ll:流泪 /dk:大哭 /yiw:疑问 /jk:惊恐 /se:色 /kel:可怜 /xyx:斜眼笑 /wx:微笑 /xk:笑 ...
- NOIP 2020 游记
第一次写比赛游记,请多多指教! I. 考前 由于最近参加了太多太多比赛了,所以没有敲模板题: 考前一周:主要是在做 AtCoder 的题和 xjoi 的模拟赛,相当于恶补了一些套路吧! 考前一天:上午 ...
- Mysql 预处理 PREPARE以及预处理的好处
Mysql 预处理 PREPARE以及预处理的好处 Mysql手册 预处理记载: 预制语句的SQL语法在以下情况下使用: · 在编代码前,您想要测试预制语句在您的应用程序中运行得如何.或者也许一个 ...
- javaSE中级篇2 — 工具类篇 — 更新完毕
1.工具类(也叫常用类)-- 指的是别人已经写好了的,我们只需要拿来用就行了 官网网址:Overview (Java Platform SE 8 ) (oracle.com) ---- 但是这个是英文 ...
- Erda 1.1 版本发布|3 大亮点特性最新解读
来源|尔达 Erda 公众号 Erda v1.1 Changelog: https://github.com/erda-project/erda/blob/master/CHANGELOG/CHA ...
- JAXB—Java类与XML文件之间转换
JAXB-Java类与XML文件之间转换 简介 JAXB(Java Architecture for XML Binding) 是一个业界的标准,是一项可以根据XML Schema产生 ...
- JavaIO——内存操作流、打印流
我们之前所做的都是对文件进行IO处理,实则我们也可以对内存进行IO处理.我们将发生在内存中的IO处理称为内存流. 内存操作流也可分为两类:字节内存流和字符内存流. (1)ByteArrayInputS ...
- AI ubantu 环境安装
ubantu安装记录 apt install python3-pip anaconda安装 https://repo.anaconda.com/archive/Anaconda3-2020.11-Li ...