swiper实现横向可拖动时间线大事记效果代码

代码语言:html

所属分类:其他

代码描述:swiper实现横向可拖动时间线大事记效果代码

代码标签: swiper 横向 拖动 时间线 大事记

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html lang="zh-CN">

<head>

   
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   
<meta charset="utf-8">
   
<meta name="viewport" content="width=device-width, initial-scale=1">

   
<meta name="renderer" content="webkit">
   
<style>
        html
        body,
        ul,
        li,
        ol,
        dl,
        dd,
        dt,
        p,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        form,
        fieldset,
        legend,
        img {
          margin: 0;
          padding: 0;
        }
        li {
          list-style: none;
        }
        .time-line-box {
          margin-top: 40px;
        }
        .time-line-box ul:after {
          content: '';
          background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANMAAAA0CAYAAAAQRg3jAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RkM4RDlFNEZFQzg4MTFFQjk4NUM4NUY4RUI3Q0MxQjQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RkM4RDlFNEVFQzg4MTFFQjk4NUM4NUY4RUI3Q0MxQjQiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjAgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Q0RCMUI4NTRFQzg1MTFFQkExRjI4MTcyMEIzNzQ4RDIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Q0RCMUI4NTVFQzg1MTFFQkExRjI4MTcyMEIzNzQ4RDIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7oxJECAAAClUlEQVR42uyd24paQRBFjzrewf//OX1QEZ/F++1MttDBN01cgZNkLRAZR/dUV9cu+6VrWnVdVyLy+8xms4eJ2qZChEEziWgmEc0koplERDOJaCYRzSSimUREM4loJhHNJCKaSUQziWgmEc0kIppJRDOJaCYRzSQimklEM4loJhHRTCKaSUQziWimX2M6ndZ5EFrr9bpeLBaY1nw+R7QS03K5RLRWq1WdB6GVmKh8JVfJGZUvSovMF1lfha+muny321Xn8xnTul6viNZ+v69arRaidTgcsHwlLmpufOK.........完整代码请登录后点击上方下载按钮下载查看

网友评论0