jquery弹出窗口过渡效果(jQuery实现大屏滚动播放效果)
类别:编程学习 浏览量:1611
时间:2021-10-21 08:35:34 jquery弹出窗口过渡效果
jQuery实现大屏滚动播放效果本文实例为大家分享了jQuery实现大屏滚动播放效果的具体代码,供大家参考,具体内容如下
场景需求:
在大屏幕上,消息会进行一个实时滚动播报的效果,将现有的内容进行一个来回滚动的播放。
代码:
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>复选框checkbox自定义样式</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> * { margin: 0; padding: 0; } .contScend { width: 400px; height: 200px; background: #000000; margin: 20px auto; overflow: hidden; } .contScend ul { list-style: none; width: 100%; height: 100%; color:red; font-size: 13px; } .contScend ul li { width: 100%; height: 40px; box-sizing: border-box; line-height: 40px; text-align: center; } </style> </head> <body> <!-- 中间部分 --> <li class="contScend"> </li> </body> <script type="text/javascript"> $.ajax({ url: "test.json", type: 'GET', dataType: 'json', success: function(data) { var html = ""; html += '<ul>'; $.each(data, function(i, item) { // html += '<li>' + item.name + ':' + item.numb + '人' + '</li>'; }); html += '</ul>'; $(".contScend").html(html); scroll(); } }); function scroll() { //获得当前<ul> var $uList = $(".contScend ul"); var timer = null; //触摸清空定时器 $uList.hover(function() { clearInterval(timer); }, function() { //离开启动定时器 timer = setInterval(function() { scrollList($uList); }, 1000); }).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); }); } } </script> </html>
test.json
[{ "name": "体验区统计", "numb": 0 }, { "name": "test909", "numb": 0 }, { "name": "test910", "numb": 0 }, { "name": "111", "numb": 0 }, { "name": "test", "numb": 0 }, { "name": "test11111", "numb": 0 }, { "name": "记忆区统计", "numb": 0 }]
效果如下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- jQuery中noConflict()的用法
- css3设置过渡效果(CSS3 media queries + jQuery实现响应式导航)
- jquery判断是否为数组
- jQuery对象和DOM的相互转换
- jQuery判断对象是否存在
- jquery弹出窗口过渡效果(jQuery实现大屏滚动播放效果)
- JQuery中serialize()
- jquery on绑定多个事件
- JQuery中extend的用法
- jQuery中$.each的用法
- jquery next()
- jquery鼠标滑过显示提示框
- jquery中find()与filter()的区别
- jQuery end()
- jquery 实现对联广告
- jquery左右选择框
- 荣耀手表 GS 3 真机亮相 不支持无线充电(荣耀手表GS3)
- 通过体温就能为智能手表充电 原来是用NASA在空间站用的黑科技(通过体温就能为智能手表充电)
- 智能手表兼容Windows和Android 无需充电挑战苹果(智能手表兼容Windows和Android)
- 一天一冲也算表 麦步,一款待机 21 天的智能手表体验评测(一天一冲也算表)
- 魅族智能手表充电座曝光 Type-C 接口,线座分离设计(魅族智能手表充电座曝光)
- 华为 Watch GT2 Pro 智能手表曝光,新增支持无线充电(华为WatchGT2)
热门推荐
- 校园网中有哪几种服务器(学校网站服务器租用考虑的几个因素有哪些)
- mysql8.0安装教程win10(Windows10下mysql 8.0.22 安装配置方法图文教程)
- python编写程序读写数据库(详解js文件通过python访问数据库方法)
- django数据库查询条件(djang常用查询SQL语句的使用代码)
- sql对象资源管理在哪(SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用)
- jquery的直接设置下拉框的选中值(jquery实现户籍地选择下拉框)
- nginx怎么实现反向代理(nginx反向代理时如何保持长连接)
- 宝塔面板里面的文件编辑怎么点开(宝塔面板可以上传多大文件?怎么设置文件大小?)
- sqlserver2008数据库的备份(sql server 2008 压缩备份数据库20g)
- 怎样用sql删除表里的重复数据(sql 删除表中的重复记录)