【Jquery大事件时间线】jquery实现大事件时间线(时间轴)的滚动切换效果『附完整源码』


文章目录

  • 写在前面
  • 涉及知识点
  • 页面效果
  • 1、搭建框架
    • 1.1 模块搭建
    • 1.2 内容填充
    • 1.3 时间线的切换
  • 2、完整代码
    • 2.1 html源码
    • 2.2 CSS源码
    • 2.3 js源码
  • 3、完整源码包下载
    • 3.1百度网盘
    • 3.2 123云盘
    • 3.3邮箱留言
  • 总结


写在前面

其实这种大事件记录的web页面也是我们常见的,尤其是对于有时间维度的业务数据,当然今天我主要不是公司的业务,因为个人看到一个不错的示例,于是乎便和大家进行了分享,上周也是懒惰了,没有更新文章,慢慢补上来吧。

涉及知识点

Jquery实现大事件时间轴效果,前端如何实现好看清晰的时间线效果,如何实现时间轴页面效果,基于jquery实现大事件时间轴效果,jQuery水平滚动企业发展大事件时间轴代码。
版权声明:此文原创于CSDN博主-《拄杖盲学轻声码》,主页有很多分享的代码,期待您的访问。

页面效果

其实这个就是为了让更多的人能够选择性是否继续阅读这篇文章,为大家精准定位自己想要的demo,文尾有完整代码包下载链接。
在这里插入图片描述

1、搭建框架

当然搭建框架的核心就是知道它的构成部分,好比庖丁解牛,知道分成几个模块,因此我就用我的模块定位法去实现这个效果。

1.1 模块搭建

首先模块划分,一个容器里面写了两个小容器,然后分别放年份时间轴、及当年具体月份时间线。如下所示框架:
在这里插入图片描述

1.2 内容填充

第一个模块想着写15年-23年今年的时间线,于是我就针对事件线这块的话用了一个背景图来做效果,多个圆用背景图进行连接,形成一个时间线的效果,如下:
在这里插入图片描述

第二个模块的核心就是画一条垂直的事件时间线,我是在最上面加了一个小气泡的效果,然后针对具体月份的时间线我是使用border属性来做的,设置before属性为border-right:
1px dashed #ff8d3d;从而实现线的效果,小圆圈的话我是用icon小图片,其实也是设置background属性。设置完如下所示:
在这里插入图片描述

1.3 时间线的切换

这个功能主要是通过js来写相关逻辑的控制的,通过点击左右翻动来切换不同气球的状态及下面内容的同步变化,主要实现是一个动画函数和一个切换函数,核心点在于对dom元素的展示与隐藏。核心js代码如下:

function tags(num){$('.timer-scale-cont').eq(num).addClass('hov').siblings().removeClass('hov');$('.shaft-detail-cont').eq(num).show().siblings().hide();
}
function moveL(num, len) {if (num < len) {moveLeft = -num * space;$('.timer-scale').animate({left:moveLeft}, 700);}
}

版权声明:此文原创于CSDN博主-《拄杖盲学轻声码》,主页有很多分享的代码,期待您的访问。

2、完整代码

切记这个demo是基于jquery的,所以必须要引入jquery组件

2.1 html源码

<!-- 更多内容可关注CSDN博主《拄杖盲学轻声码》 --><div class="body-box"><div class="timer-shaft-box"><div class="timer-shaft"><div class="timer-left"></div><div class="timer-right"></div><div class="timer-scale"><div class="timer-scale-cont hov"><p class="time-circle">2015</p><p class="line-scale"></p></div><div class="timer-scale-cont"><p class="time-circle">2016</p><p class="line-scale"></p></div><div class="timer-scale-cont"><p class="time-circle">2017</p><p class="line-scale"></p></div><div class="timer-scale-cont"><p class="time-circle">2018</p><p class="line-scale"></p></div><div class="timer-scale-cont"><p class="time-circle">2019</p><p class="line-scale"></p></div><div class="timer-scale-cont"><p class="time-circle">2020</p><p class="line-scale"></p></div><div class="timer-scale-cont"><p class="time-circle">2021</p><p class="line-scale"></p></div><div class="timer-scale-cont"><p class="time-circle">2022</p><p class="line-scale"></p></div><div class="timer-scale-cont"><p class="time-circle">2023</p><p class="line-scale"></p></div></div></div><div class="timer-shaft-content"><div class="shaft-detail-cont" style="display: block;"><p class="timer-year"><i class="icon-year"></i><span>2015年</span></p><div class="month-detail-box"><span class="month-title">1月</span><p class="incident-record">1月21日、22日,CSDN博主-【拄杖盲学轻声码】,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大</p></div><div class="month-detail-box"><span class="month-title">2月</span><p class="incident-record">2月1日,CSDN博主-【拄杖盲学轻声码】,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大<ahref="#"><查看详情></a></p></div><div class="month-detail-box"><span class="month-title">3月</span><p class="incident-record">3月8日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大</p><p class="incident-record">3月10日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大<ahref="#"><查看详情></a></p></div><div class="month-detail-box"><span class="month-title">4月</span><p class="incident-record">4月1日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大<ahref="#"><查看详情></a></p></div><div class="month-detail-box"><span class="month-title">5月</span><p class="incident-record">5月11日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大<ahref="#"><查看详情></a></p></div><div class="month-detail-box"><span class="month-title">6月</span><p class="incident-record">6月2日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大<ahref="#"><查看详情></a></p></div><div class="month-detail-box"><span class="month-title">7月</span><p class="incident-record">7月2日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大<ahref="#"><查看详情></a></p></div><div class="month-detail-box"><span class="month-title">8月</span><p class="incident-record">8月2日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大<ahref="#"><查看详情></a></p></div><div class="month-detail-box"><span class="month-title">9月</span><p class="incident-record">9月2日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大<ahref="#"><查看详情></a></p></div></div><div class="shaft-detail-cont"><p class="timer-year"><i class="icon-year"></i><span>2016年</span></p><div class="month-detail-box"><span class="month-title">1月</span><p class="incident-record">1月21日、22日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大。</p></div><div class="month-detail-box"><span class="month-title">2月</span><p class="incident-record">2月1日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大<ahref="#"><查看详情></a></p></div><div class="month-detail-box"><span class="month-title">3月</span><p class="incident-record">3月8日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大</p><p class="incident-record">3月10日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大<ahref="#"><查看详情></a></p></div></div><div class="shaft-detail-cont"><p class="timer-year"><i class="icon-year"></i><span>2017年</span></p><div class="month-detail-box"><span class="month-title">1月</span><p class="incident-record">1月21日、22日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大</p></div><div class="month-detail-box"><span class="month-title">2月</span><p class="incident-record">2月1日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大<ahref="#"><查看详情></a></p></div></div><div class="shaft-detail-cont"><p class="timer-year"><i class="icon-year"></i><span>2018年</span></p><div class="month-detail-box"><span class="month-title">1月</span><p class="incident-record">1月21日、22日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大</p></div></div><div class="shaft-detail-cont"><p class="timer-year"><i class="icon-year"></i><span>2019年</span></p><div class="month-detail-box"><span class="month-title">1月</span><p class="incident-record">1月21日、22日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大</p></div><div class="month-detail-box"><span class="month-title">2月</span><p class="incident-record">2月1日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大<ahref="#"><查看详情></a></p></div></div><div class="shaft-detail-cont"><p class="timer-year"><i class="icon-year"></i><span>2020年</span></p><div class="month-detail-box"><span class="month-title">1月</span><p class="incident-record">1月21日、22日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大</p></div></div><div class="shaft-detail-cont"><p class="timer-year"><i class="icon-year"></i><span>2021年</span></p><div class="month-detail-box"><span class="month-title">1月</span><p class="incident-record">1月21日、22日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大</p></div><div class="month-detail-box"><span class="month-title">2月</span><p class="incident-record">2月1日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大<ahref="#"><查看详情></a></p></div></div><div class="shaft-detail-cont"><p class="timer-year"><i class="icon-year"></i><span>2022年</span></p><div class="month-detail-box"><span class="month-title">1月</span><p class="incident-record">1月21日、22日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大</p></div></div><div class="shaft-detail-cont"><p class="timer-year"><i class="icon-year"></i><span>2023年</span></p><div class="month-detail-box"><span class="month-title">1月</span><p class="incident-record">1月21日、22日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大</p></div><div class="month-detail-box"><span class="month-title">2月</span><p class="incident-record">2月1日,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大,拄杖盲学轻声码,谁人不识黄大大<ahref="#"><查看详情></a></p></div></div></div></div></div><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/sjz.js"></script><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"><p>更多请关注:CSDN博主-《拄杖盲学轻声码》.</p><p>来源:<a href="http://www.baofumeng.cn/inithdd/#/rewordData" target="_blank">古今英雄榜</a></p></div>
</body>

2.2 CSS源码

/*公共样式*/
html,
body {width: 100%;height: 100%;font-family: "microsoft yahei";overflow-x: hidden;overflow-y: auto;-webkit-overflow-scrolling: touch;background: #f3f3f3;
}*,
body,
html,
dl,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
form,
header,
section,
article,
footer,
td,
th {margin: 0;padding: 0;
}h1,
h2,
h3,
h4,
h5,
h6 {font-size: 100%
}a {text-decoration: none;outline: none;
}a:hover {text-decoration: none;text-underline: none;
}img {border: 0
}ul,
li {list-style: none;
}i {font-style: normal;
}table {border-collapse: collapse;border-spacing: 0
}button {cursor: pointer;
}input,
select,
button,
a,
textarea {border: 0;outline: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}input:-moz-placeholder {color: #c9c9c9;
}input:-ms-input-placeholder {color: #c9c9c9;
}input::-webkit-input-placeholder {color: #c9c9c9;
}/*公共样式结束*/.body-box {width: 1200px;margin: 100px auto;background: #fff;
}.timer-shaft-box {width: 100%;padding: 30px 40px;box-sizing: border-box;
}.timer-shaft {position: relative;width: 100%;height: 80px;overflow: hidden;
}.timer-left {position: absolute;top: 50%;left: 20px;z-index: 99;width: 23px;height: 37px;margin-top: -18.5px;background: url(../images/icon_left.png) no-repeat;background-size: cover;cursor: pointer;
}.timer-right {position: absolute;top: 50%;right: 20px;z-index: 99;width: 23px;height: 37px;margin-top: -18.5px;background: url(../images/icon_right.png) no-repeat;background-size: cover;cursor: pointer;
}.timer-scale {position: absolute;top: 0;left: 0;height: 80px;padding-left: 80px;font-size: 0;white-space: nowrap;// width: 100%;// background-color: #aaa;
}.timer-scale-cont {display: inline-block;height: 100%;line-height: 80px;
}.time-circle {display: inline-block;vertical-align: middle;width: 60px;height: 60px;line-height: 60px;text-align: center;font-size: 18px;color: #fff;border-radius: 50%;background: #e2302e;transition: all .3s;cursor: pointer;
}.timer-scale-cont.hov .time-circle {width: 80px;height: 80px;line-height: 80px;font-size: 24px;background: #ff8d3d;
}.line-scale {display: inline-block;vertical-align: middle;width: 150px;height: 22px;margin: 0 2px;background: url(../images/icon_scale.png) no-repeat;background-size: cover;
}.timer-shaft-content {width: 100%;// height: 300px;// background-color: #1d69a3;margin-top: 45px;overflow: hidden;font-size: 0;box-sizing: border-box;white-space: nowrap;
}.shaft-detail-cont {display: none;width: 100%;height: 400px;overflow: auto;
}.timer-year {padding-left: 20px;font-weight: bold;color: #333;font-size: 0;
}.icon-year {display: inline-block;vertical-align: middle;width: 33px;height: 40px;background: url(../images/icon_sign.png) no-repeat;background-size: cover;
}.timer-year span {display: inline-block;vertical-align: middle;margin-left: 18px;font-size: 24px;
}.month-detail-box {position: relative;width: 100%;min-height: 93px;padding-top: 30px;font-size: 0;box-sizing: border-box;white-space: normal;
}.month-detail-box:before {content: '';position: absolute;top: 0;left: 36.5px;height: 100%;border-right: 1px dashed #ff8d3d;
}.month-detail-box .month-title {position: absolute;font-size: 16px;font-weight: bold;color: #333;
}.month-detail-box .month-title:before {content: '';position: absolute;top: 50%;left: 30px;width: 13px;height: 13px;margin-top: -6.5px;background: url(../images/icon_circle.png) no-repeat;background-size: cover;
}.incident-record {display: inline-block;padding-left: 71px;line-height: 2;font-size: 14px;color: #333;
}.incident-record a {font-size: 14px;color: #1d69a3;
}

2.3 js源码

$(function(){// 更多请关注CSDN-拄杖盲学轻声码// 时间轴var timerNum = 0;var space = 210; // 移动间距var length = $('.timer-scale-cont').length, numL;// 分辨率if(window.screen.width > 1500) {numL = length - 4} else if(window.screen.width < 1500) {numL = length - 3}// 点击左侧$('.timer-left').on('click', function () {if(timerNum > 0) {timerNum -= 1;moveL(timerNum, numL)}tags(timerNum);})// 点击右侧$('.timer-right').on('click', function () {if(timerNum < length - 1) {timerNum += 1;tags(timerNum);}moveL(timerNum, numL)})// 点击年$('.time-circle').each(function (index) {$(this).on('click', function () {timerNum = index;moveL(timerNum, numL)tags(timerNum);})})function tags(num){$('.timer-scale-cont').eq(num).addClass('hov').siblings().removeClass('hov');$('.shaft-detail-cont').eq(num).show().siblings().hide();}function moveL(num, len) {if (num < len) {moveLeft = -num * space;$('.timer-scale').animate({left:moveLeft}, 700);}}
})

3、完整源码包下载

3.1百度网盘

链接:https://pan.baidu.com/s/1Wat_HtjrPr04qVC1r1iXBg
提取码:hdd6

3.2 123云盘

链接:https://www.123pan.com/s/ZxkUVv-umI4.html
提取码:hdd6

3.3邮箱留言

评论区留下您的邮箱账号,博主看到第一时间发给您,祝您生活愉快!


总结

以上就是今天要讲的内容,本文主要介绍了基于jquerys实现大事件时间轴的页面效果应用也期待大家一起进步哈,2023年一起加油!!!

版权声明:此文原创于CSDN博主-《拄杖盲学轻声码》,主页有很多分享的代码,期待您的访问。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/17837.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Go语言性能优化建议与pprof性能调优详解——结合博客项目实战

文章目录 性能优化建议Benchmark的使用slice优化预分配内存大内存未释放 map优化字符串处理优化结构体优化atomic包小结 pprof性能调优采集性能数据服务型应用go tool pprof命令项目调优分析修改main.go安装go-wrk命令行交互界面图形化火焰图 性能优化建议 简介&#xff1a; …

使用redis-cli操作redis

redis-cli是原生redis自带的命令行工具&#xff0c;可以帮助我们通过简单的命令连接redis服务&#xff0c;并进行数据管理&#xff0c;即redis键&#xff08;key&#xff09;和redis数据结构的管理。 关于如何进入redis-cli命令行客户端&#xff0c;请查看文章&#xff1a;Redi…

CMake:为Eigen库使能向量化

CMake:为Eigen库使能向量化 导言构建Eigen项目结构CMakeLists.txt相关源码 导言 本篇开始将涉及检测外部库相关的内容&#xff0c;期间会穿插着一些其他的内容。为了能够使得系统在系统中运行Eigen库&#xff0c;我们首先需要在系统中配置好Eigen库。然后介绍与Eigen库相关的C…

【Android】APP启动优化学习笔记

启动优化目的 用户体验&#xff1a; 应用的启动速度直接影响用户体验。用户希望应用能够快速启动并迅速响应他们的操作。如果应用启动较慢&#xff0c;用户可能会感到不满&#xff0c;并且有可能选择卸载或切换到竞争对手的应用。通过启动优化&#xff0c;可以提高应用的启动…

132个心理性格趣味测试ACCESS\EXCEL数据库

今天又遇到了一个心理测试的数据库&#xff0c;这个数据库在表结构的设置上很直观&#xff0c;属于那种好的数据库结构&#xff0c;共分三个表&#xff0c;一个是测试项目描述表、一个是测试题选项得分表、一个是根据得分区间解析表&#xff0c;表与表之间通过“question_id”字…

【Python】pyqt6入门到入土系列,非常详细...

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 一、什么是PyQt6? 简单介绍一下PyQt6 1、基础简介 PyQt6 Digia 公司的 Qt 程序的 Python 中间件。Qt库是最强大的GUI库之一。 PyQt6的官网&#xff1a;www.riverbankcomputing.co.uk/news。 PyQt6是由Riverbank Co…

MTK system_server 卡死导致手机重启案例分析

和你一起终身学习&#xff0c;这里是程序员Android 经典好文推荐&#xff0c;通过阅读本文&#xff0c;您将收获以下知识点: 一、MTK AEE Log分析工具二、AEE Log分析流程三、system_server 卡死案例分析及解决 本文主要针对 Exception Type: system_server_watchdog , system_…

力扣SQL之路:窗口函数应用

文章目录 1.引言2.力扣SQL题目3. 解题策略4.代码实现5.总结 1.引言 窗口函数是 SQL 中一种强大的分析函数&#xff0c;它可以在结果集中创建一个窗口&#xff0c;并对窗口内的数据进行计算和分析。在力扣&#xff08;LeetCode&#xff09;的 SQL 题目中&#xff0c;窗口函数经…

Linux进程概念(一)

文章目录 Linux进程概念查看进程杀死进程进程标识符 手动创建进程的方式fork函数创建进程 进程状态运行态阻塞态和挂起 Linux进程概念 前文我们了解了&#xff0c;进程的基本概念&#xff0c;在课本上被描述为&#xff0c;正在执行的程序&#xff0c;在linux内核上&#xff0c…

如何在 Ubuntu 22.04 下编译 StoneDB for MySQL 8.0 | StoneDB 使用教程 #1

作者&#xff1a;双飞&#xff08;花名&#xff1a;小鱼&#xff09; 杭州电子科技大学在读硕士 StoneDB 内核研发实习生 ❝ 大家好&#xff0c;我是 StoneDB 的实习生小鱼&#xff0c;目前正在做 StoneDB 8.0 内核升级相关的一些事情。刚开始接触数据库开发没多久&#xff0c…

解码“平台工程”,VMware 有备而来

随着全球数字化进程加快&#xff0c;企业使用前沿技术加快商业创新&#xff0c;以提高竞争力。其中如何加快开发效率&#xff0c;为客户创造更多价值成为新的关注焦点。 继DevOps后&#xff0c;“平台工程”&#xff08;Platform Engineering&#xff09; 一词引发热议。平台工…

MyBatis的使用方法

文章目录 一、MyBatis的创建准备工作 二、MyBatis的使用1.项目分层2.业务代码1&#xff09;使用XML的方法2&#xff09;直接使用注解 总结 一、MyBatis的创建 准备工作 1.添加依赖 旧项目 方法一&#xff1a;在pom.xml中添加MyBatis和MySQL Diver依赖 <!-- 添加 MyBati…

信息技术会考操作题excel,信息技术会考操作题目

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;信息技术会考操作题python计算题&#xff0c;信息技术会考操作题没有保存&#xff0c;今天让我们一起来看看吧&#xff01; 1. 数据分析题&#xff08;17分&#xff09;&#xff1a; 流行病学通常关注单日治愈患者例数增…

网络知识介绍

一、TCP 传输控制协议&#xff0c;Transmission Control Protocol。 面向广域网的通信协议&#xff0c;跨域多个网络通信时&#xff0c;为两个通信端点之间提供一条具有如下特点的通信方式&#xff1a; 基于流、面向连接、可靠通信方式、网络状况不佳时尽量降低系统由于重传带…

初识Linux

今天简单了解了关于操作系统的发展史&#xff0c;学习了在Linux中如何远程连接云服务器的指令&#xff0c;以及在Linux中创建多个用户的指令。 1. ssh root 服务器远程地址 作用是用来连接XShell与云服务器&#xff0c;输入该指令后会自动生成输入密码的窗口&#xff0c;如…

【产品经理】高阶产品如何处理需求?(3方法论+2案例+1清单)

不管你是萌新小白&#xff0c;还是工作了几年的“老油条”&#xff0c;需求一直是产品经理工作的重点。只不过&#xff0c;不同年限的产品经理需要面对的需求大有不同&#xff0c;对能力的要求更高。 不知你是否遇过以下问题&#xff1f; 你接手一个项目后&#xff0c;不知从何…

DID以及社交网络中的ZKP

1. 引言 本文关键术语为&#xff1a; Decentralized Identity (DID&#xff0c;去中心化身份) or self-sovereign identity (SSI&#xff0c;自治身份) &#xff1a;是一个基于开放标准的框架&#xff0c;使用自主、独立的标识符和可验证证书&#xff0c;实现可信的数据交换。…

虹科案例|如何分析设备故障时间和次数,打破生产瓶颈?

虹科设备绩效管理系统 保障生产设备的稳定性和可靠性 生产设备的稳定性和可靠性是保证企业正常生产的重要条件之一&#xff0c;设备故障的频发严重影响企业的正常生产&#xff0c;那么如何分析设备故障时间和次数&#xff0c;查找设备故障原因&#xff0c;协助企业打破生产瓶…

树莓派通过天线+gps获取经纬度并调用高德地图api在地图上标点

完整项目为《基于机器视觉的行人和路面缺陷检测及其边缘设备部署》 完整功能视频演示地址&#xff1a;本科最后的课设&#xff1a;“车载系统的辅助系统——基于机器视觉的行人和路面缺陷检测”完结撒花*罒▽罒*_哔哩哔哩_bilibili 该博客介绍的功能为&#xff1a; 1&#xff1…

初步了解c#编程语言--(1)

初识c#编程语言 一、见识c#语言编写的各类应用程序 关于用c#语言编写的各类应用程序有以下几种&#xff1a; 1.Console 在编写Console程序时&#xff0c;要注意创建项目时&#xff0c;是选择控制台应用程序&#xff08;Console Application&#xff09;&#xff0c;在这里…