swiper实现发展历程时间节点时间线拖动效果代码
代码语言:html
所属分类:图表
代码描述:swiper实现发展历程时间节点时间线拖动效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0 } html,body { font: 14px/1.5 normal; font-family: microsoft yahei,Arial,Tahoma,sans-serif; color: #666; overflow-x: hidden } a { color: #333; transition: all .3s ease-in-out; cursor: pointer; text-decoration: none } a:hover { color: #0a3875 } ul,dl { list-style: none } i { font-style: normal } img { display: inline-block; vertical-align: middle; border: 0 } .warper { max-width: 1800px; margin: 0 auto } .fl { float: left } .fr { float: right } .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0 } .clearfix:before,.clearfix:after { content: " "; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0 } .clearfix:after { clear: both } .clearfix { *zoom: 1 } .pr { position: relative } .warper { max-width: 1800px; margin: 0 auto } .about-main2 { height: 890px; width: 100%; overflow: hidden } .about-main2 .licheng-bg { background-color: rgba(255,255,255,.8); width: 100%; height: 100%; position: relative } .about-main2 .licheng-bg .warper { height: 100% } .about-main2 .licheng-bg img { height: 518px; position: absolute; bottom: 0; left: 0 } .about-main2 .ny-title { padding-top: 80px } .ny-title .title-en { font-size: 36px; color: #b4b4b4; font-family: arial; line-height: 36px; font-weight: 400 } .ny-title .title-ch { font-size: 26px; color: #333; margin: 15px 0; font-weight: 400 } .ny-title i { display: block; width: 42px; height: 1px; background-color: #b5b5b5 } .about-main2 .licheng-content { position: absolute; width: 100%; height: 100% } .about-main2 .licheng-content .swiper-wrapper,.about-main2 .licheng-content .swiper-slide,.about-main2 .licheng-content ul { width: 100%; height: 100% } .about-main2 .licheng-content ul li { width: 20%; float: left; height: 100% } .about-main2 .licheng-content ul li a { display: block; width: 100%; position: relative; height: 320px } .about-main2 .licheng-content ul li .date { color: #0a3875; font-size: 30px } .about-main2 .licheng-content ul li.item1 .line,.about-main2 .licheng-content ul li.item3 .line,.about-main2 .licheng-content ul li.item5 .line { margin-bottom: 30px } .about-main2 .licheng-content ul li.item2 .line,.about-main2 .licheng-content ul li.item4 .line { margin-top: 30px } .about-main2 .licheng-content ul li.item1 .line:after,.about-main2 .licheng-content ul li.item3 .line:after,.about-main2 .licheng-content ul li.item5 .line:after { width: 25px; height: 25px; background-color: rgba(10,56,117,.8); display: block; content: ""; border-radius: 50%; text-align: center; vertical-align: middle; position: absolute } .about-main2 .licheng-content ul li.item2 .line:before,.about-main2 .licheng-content ul li.item4 .line:before { width: 25px; height: 25px; background-color: rgba(10,56,117,.8); display: block; content: ""; border-radius: 50%; text-align: center; vertical-align: middle; position: absolute } .about-main2 .licheng-content ul li .lc-left { position: absolute } .about-main2 .licheng-content ul li .line { height: 250px; width: 1px; display: block; background-color: #0a3875; position: relative; left: 30px } .about-main2 .licheng-content ul li .lc-right { position: absolute; left: 30px; width: 400px; height: 100%; display: table } .about-main2 .licheng-content ul li.item5 .lc-right { width: 200px } .about-main2 .licheng-content ul li.item2 .lc-right,.about-main2 .licheng-content ul li.item4 .lc-right { width: 400px } .about-main2 .licheng-content ul li .lc-right .right-text { padding: 20px; display: table-cell; vertical-align: middle } .about-main2 .licheng-content ul li.item1 a { top: 72px } .about-main2 .licheng-content ul li.item1 .lc-left .line:after { bottom: -25px; left: -11px } .about-main2 .licheng-content ul li.item1 .lc-right { bottom: 68px } .about-main2 .licheng-content ul li.item2 a { top: 224px } .about-main2 .licheng-content ul li.item2 .lc-left .line:before { top: -25px; left: -11px } .about-main2 .licheng-content ul li.item2 .lc-right { top: 80px } .about-main2 .licheng-content ul li.item3 a { top: 136px } .about-main2 .licheng-content ul li.item3 .lc-left .line:after { bottom: -25px; left: -11px } .about-main2 .licheng-content ul li.item3 .lc-right { bottom: 100px } .about-main2 .licheng-content ul li.item4 a { top: 278px } .about-main2 .licheng-content ul li.item4 .lc-left .line:before { top: -25px; left: -11px } .about-main2 .licheng-content ul li.item4 .lc-right { top: 70px } .about-main2 .licheng-content ul li.item5 a { top: 99px } .about-main2 .licheng-content ul li.item5 .lc-left .line:after { bottom: -25px; left: -11px } .about-main2 .licheng-content ul li.item5 .lc-right { bottom: 100px } .about-main2 .licheng-content .right-text h3 { font-size: 24px; margin-bottom: 10px } .about-main2 .licheng-content .right-text p { font-size: 16px } .lc-swiper-btn { width: 100%; position: absolute; top: 370px } .lc-swiper-btn a { display: block; position: absolute } .lc-swiper-btn .btn-prev { position: absolute; left: 15px; top: 50px } .lc-swiper-btn .btn-next { position: absolute; right: 0; top: 50px } .lc-swiper-btn .iconfont { font-size: 30px } </style> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/swiper.5.3.8.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> </head> <body> <div class="about-main2" style="background-image: url(//repo.bfw.wiki/bfwrepo/image/603858d4a427a.png);"> <div class="licheng-bg"> <img src="//repo.bfw.wiki/bfwrepo/image/603858855571b.png" class="quxian" /> <div class="warper pr"> <div class="ny-title"> <h3 class="title-en">DEVELOPMENT</h3> <h4 class="title-ch">发展历程</h4> <i></i> </div> <div class="licheng-content swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <ul class="clearfix"> <li class="item1"> <a class="clearfix"> <div class="lc-left"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0