HTML-列表无缝滚动效果2(显示一个暂停3秒,滚走显示下一个)
时间:2020-01-08
本文章向大家介绍HTML-列表无缝滚动效果2(显示一个暂停3秒,滚走显示下一个),主要包括HTML-列表无缝滚动效果2(显示一个暂停3秒,滚走显示下一个)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
HTML:
<div class="scroll-box"> <ul> <li>1好消息!好消息!本店所有商品全部白送1</li> <li>2好消息!好消息!本店所有商品全部白送2</li> <li>3好消息!好消息!本店所有商品全部白送3</li> <li>4好消息!好消息!本店所有商品全部白送4</li> <li>5好消息!好消息!本店所有商品全部白送5</li> <li>6好消息!好消息!本店所有商品全部白送6</li> <li>7好消息!好消息!本店所有商品全部白送7</li> <li>8好消息!好消息!本店所有商品全部白送8</li> </ul> </div>
CSS:
* { margin:0; padding:0; } .scroll-box { width:400px; height:40px; border:2px solid #000; margin:20px auto; overflow:hidden; } .scroll-box ul { list-style:none; width:100%; height:100%; } .scroll-box ul li { width:100%; height:40px; box-sizing:border-box; line-height:40px; text-align:center; }
JAVASCRIPT:
<script type="text/javascript" src="jquery-2.1.3.min.js" ></script> <script> $(function() { //获得当前<ul> var $uList = $(".scroll-box ul"); var timer = null; //触摸清空定时器 $uList.hover(function() { clearInterval(timer); }, function() { //离开启动定时器 timer = setInterval(function() { scrollList($uList); }, 3000); }).trigger("mouseleave"); //自动触发触摸事件 //滚动动画 function scrollList(obj) { //获得当前<li>的高度 var scrollHeight = $("ul li:first").height(); //滚动出一个<li>的高度 $uList.stop().animate({ marginTop: -scrollHeight }, 600, function() { //动画结束后,将当前<ul>marginTop置为初始值0状态,再将第一个<li>拼接到末尾。 $uList.css({ marginTop: 0 }).find("li:first").appendTo($uList); }); } });
原文地址:https://www.cnblogs.com/liuqingxia/p/12167147.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- delete 后加 limit 是个好习惯么?!
- @Component,@Service 等注解是如何被解析的
- 怎么摆脱又臭又长的 Git 命令?
- Redis 怎么防止数据丢失?面试必问!
- 使用vs2015编写c语言的方法
- 哪些场景会产生OOM?怎么解决?
- 预处理命令
- IntelliJ IDEA 调试 Java 8 Stream,实在太香了!
- 仅需四步,写一个 Spring Boot Starter
- 一个简单案例,带你看懂GC日志!
- C#中ref和out的区别使用
- 图解 MySQL 索引,写得实在太好了!
- 10、图像的几何变换——平移、镜像、缩放、旋转、仿射变换 OpenCV2:图像的几何变换,平移、镜像、缩放、旋转(1)OpenCV2:图像的几何变换,平移、镜像、缩放、旋转(2)数字图像
- String、StringBuiler、StringBuffer,谁性能最高?
- 图像的几何变换——平移、镜像、缩放、旋转、仿射变换 OpenCV2:图像的几何变换,平移、镜像、缩放、旋转(1)OpenCV2:图像的几何变换,平移、镜像、缩放、旋转(2)数字图像处理笔