jquery实现左右横向大事记时间轴效果代码-html代码-BFW代码库

jquery实现左右横向大事记时间轴效果代码

代码语言：html

所属分类：其他

代码描述：jquery实现左右横向大事记时间轴效果代码

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        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(//repo.bfw.wiki/bfwrepo/images/event/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(//repo.bfw.wiki/bfwrepo/images/event/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;}
        .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(//repo.bfw.wiki/bfwrepo/images/event.........完整代码请登录后点击上方下载按钮下载查看