add layout and style
This commit is contained in:
parent
5553608fa3
commit
24ec68a356
|
|
@ -0,0 +1,216 @@
|
|||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td {
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
ul,ol {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img{
|
||||
border: none;
|
||||
}
|
||||
|
||||
em,
|
||||
i{
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
min-width: 1240px;
|
||||
}
|
||||
|
||||
body{
|
||||
background-image: linear-gradient(120deg,#6fc9b7,#093637);
|
||||
font-family: Helvetica;
|
||||
font-size: 16px;
|
||||
}
|
||||
/* .div-a{ position: fixed;width:400px;height:536px;padding:10px;z-index: 1;background-color: rgba(0,0,0,0.3);}
|
||||
.div-b{ width:400px;height:536px;padding:5px;color:rgb(255, 255, 255);position: relative;} */
|
||||
.div-a{ position: fixed;width:400px;height:100%;z-index: 1;background-color: rgba(0,0,0,0.3);}
|
||||
/* .div-b{ width:400px;height:536px;padding:5px;color:rgb(255, 255, 255);position: relative;} */
|
||||
.div-a{
|
||||
position: fixed;
|
||||
width: 400px;
|
||||
height: 100%;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
transition: width .3s;
|
||||
z-index: 20;
|
||||
}
|
||||
.div-a.active{
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.div-a.active .div-c{
|
||||
display: none;
|
||||
}
|
||||
.div-b,
|
||||
.div-c{
|
||||
color:rgb(255, 255, 255);
|
||||
}
|
||||
.div-b{ height: 60%; }
|
||||
.div-c{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: 40%;
|
||||
}
|
||||
.div-c::before{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
content: '';
|
||||
border-top: 1px solid #fff;
|
||||
}
|
||||
.div-video{
|
||||
height: 60%;
|
||||
/* background: pink; */
|
||||
}
|
||||
.div-img{
|
||||
position: relative;
|
||||
height: 40%;
|
||||
}
|
||||
.screen-btn{
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
color: #fff;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search-area{
|
||||
position: fixed;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
z-index: 10;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.show_detail{
|
||||
position: relative;
|
||||
}
|
||||
.more_icon{
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
/* color: #fff; */
|
||||
transform: rotate(90deg);
|
||||
font-size: 20px !important;
|
||||
cursor: pointer;
|
||||
|
||||
}
|
||||
|
||||
.detail_info{
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
padding: 10px 0;
|
||||
right: 40px;
|
||||
top: -10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.detail_info::before{
|
||||
position: absolute;
|
||||
left: 100%;
|
||||
top: 18px;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 8px solid transparent;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
.info_txt{
|
||||
width: 50px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
padding: 5px 15px;
|
||||
border-bottom: 1px solid #eee;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: color .3s;
|
||||
}
|
||||
.info_txt:hover{
|
||||
color: #1890ff;
|
||||
}
|
||||
.info_txt:last-child{
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
|
||||
.search-prov{
|
||||
font-size: 0;
|
||||
/* margin-top: 5px; */
|
||||
}
|
||||
|
||||
.search-prov,
|
||||
.lat_lon_sec{
|
||||
display: none;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.search_input,
|
||||
.search_icon{
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.search_input_common,
|
||||
.search_input {
|
||||
outline: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.search_input{
|
||||
/* width: 100px; */
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.search_input.active{
|
||||
width: 150px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.search_icon{
|
||||
cursor: pointer;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border: 1px solid #eee;
|
||||
box-sizing: border-box;
|
||||
/* box-shadow: 5px 5px 10px #eee; */
|
||||
}
|
||||
|
||||
.search_input_common{
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.lat_lon_search{
|
||||
cursor: pointer;
|
||||
background: #fff;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
width: 24px;
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,582 @@
|
|||
/*********************************/
|
||||
|
||||
.slider_one_big_picture {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
user-select: none;
|
||||
/*overflow: hidden;*/
|
||||
}
|
||||
|
||||
.slider_one_big_picture > * {
|
||||
transition: ease all 1s;
|
||||
}
|
||||
|
||||
.slider_one_big_picture .hidden {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.slider_one_big_picture .active {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.slider_one_big_picture .prev1,
|
||||
.slider_one_big_picture .next1 {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0%;
|
||||
width: 0px;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.slider_one_big_picture .next1 {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.slider_one_big_picture .prev2,
|
||||
.slider_one_big_picture .next2 {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0%;
|
||||
width: 0px;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.slider_one_big_picture .next2 {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
/*********************************/
|
||||
|
||||
.slider_one_big_2 {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 38vw;
|
||||
max-width: 640px;
|
||||
max-height: 480px;
|
||||
margin: 0 auto;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.slider_one_big_2 > * {
|
||||
transition: ease all 1s;
|
||||
}
|
||||
|
||||
.slider_one_big_2 .hidden {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
margin-left: -100%;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.slider_one_big_2 .active {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
margin-left: -50%;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.slider_one_big_2 .prev1,
|
||||
.slider_one_big_2 .next1 {
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
margin-left: -150%;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.slider_one_big_2 .next1 {
|
||||
left: 50%;
|
||||
margin-left: 50%;
|
||||
}
|
||||
|
||||
.slider_one_big_2 .prev2,
|
||||
.slider_one_big_2 .next2 {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
margin-left: -250%;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.slider_one_big_2 .next2 {
|
||||
left: 50%;
|
||||
margin-left: 150%;
|
||||
}
|
||||
|
||||
.slider_one_big_2 .prev3,
|
||||
.slider_one_big_2 .next3 {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
margin-left: -50%;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/*********************************/
|
||||
|
||||
/*********************************/
|
||||
|
||||
.slider_circle_10 {
|
||||
position: relative;
|
||||
width: 70vw;
|
||||
/* 640px; */
|
||||
height: 53.2vw;
|
||||
margin: 0 auto;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.slider_circle_10 > * {
|
||||
transition: ease all 1s;
|
||||
}
|
||||
|
||||
.slider_circle_10 > div,
|
||||
.slider_circle_10 .hidden {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slider_circle_10 .active {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
margin-left: -25%;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.slider_circle_10 .prev1,
|
||||
.slider_circle_10 .next1 {
|
||||
opacity: 0.9;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 50%;
|
||||
margin-left: -45%;
|
||||
width: 25%;
|
||||
height: 25%;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.slider_circle_10 .next1 {
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.slider_circle_10 .prev2,
|
||||
.slider_circle_10 .next2 {
|
||||
opacity: 0.7;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-left: -50%;
|
||||
width: 15%;
|
||||
height: 15%;
|
||||
z-index: 8;
|
||||
}
|
||||
|
||||
.slider_circle_10 .next2 {
|
||||
margin-left: 35%;
|
||||
}
|
||||
|
||||
.slider_circle_10 .prev3,
|
||||
.slider_circle_10 .next3 {
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
top: 35%;
|
||||
left: 50%;
|
||||
margin-left: -50%;
|
||||
width: 7%;
|
||||
height: 7%;
|
||||
z-index: 7;
|
||||
}
|
||||
|
||||
.slider_circle_10 .next3 {
|
||||
margin-left: 43%;
|
||||
}
|
||||
|
||||
.slider_circle_10 .prev4,
|
||||
.slider_circle_10 .next4 {
|
||||
opacity: 0.3;
|
||||
position: absolute;
|
||||
top: 25%;
|
||||
left: 50%;
|
||||
margin-left: -40%;
|
||||
width: 3%;
|
||||
height: 3%;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.slider_circle_10 .next4 {
|
||||
margin-left: 37%;
|
||||
}
|
||||
|
||||
.slider_circle_10 .prev5,
|
||||
.slider_circle_10 .next5 {
|
||||
opacity: 0.1;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
margin-left: -15%;
|
||||
width: 2%;
|
||||
height: 2%;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.slider_circle_10 .next5 {
|
||||
margin-left: 13%;
|
||||
}
|
||||
|
||||
/*********************************/
|
||||
|
||||
.slider_four_in_line {
|
||||
width: 100vw;
|
||||
height: 19.5vw;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.slider_four_in_line > * {
|
||||
transition: ease all 1s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slider_four_in_line .hidden {
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
top: 0px;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.slider_four_in_line .active,
|
||||
.slider_four_in_line .next1,
|
||||
.slider_four_in_line .next2,
|
||||
.slider_four_in_line .next3,
|
||||
.slider_four_in_line .next4,
|
||||
.slider_four_in_line .prev1 {
|
||||
position: absolute;
|
||||
width: 24%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 25%;
|
||||
z-index: 10;
|
||||
margin: 0 0.5%;
|
||||
}
|
||||
|
||||
.slider_four_in_line .next1 {
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.slider_four_in_line .next2 {
|
||||
left: 75%;
|
||||
}
|
||||
|
||||
.slider_four_in_line .next3 {
|
||||
width: 0%;
|
||||
left: 100%;
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slider_four_in_line .next4 {
|
||||
left: 100%;
|
||||
width: 0%;
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slider_four_in_line .prev1 {
|
||||
position: absolute;
|
||||
width: 24%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0%;
|
||||
z-index: 10;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.slider_four_in_line .prev2,
|
||||
.slider_four_in_line .prev3,
|
||||
.slider_four_in_line .prev4 {
|
||||
position: absolute;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
top: 0px;
|
||||
left: 0%;
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/*********************************/
|
||||
|
||||
.slider_clock {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.slider_clock > * {
|
||||
transition: ease all 1s;
|
||||
}
|
||||
|
||||
.slider_clock .active {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-left: -200px;
|
||||
margin-top: -125px;
|
||||
width: 400px;
|
||||
height: 250px;
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
z-index: 10;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slider_clock .next1,
|
||||
.slider_clock .next2,
|
||||
.slider_clock .next3,
|
||||
.slider_clock .next4,
|
||||
.slider_clock .next5,
|
||||
.slider_clock .next6,
|
||||
.slider_clock .next7,
|
||||
.slider_clock .prev1,
|
||||
.slider_clock .prev2,
|
||||
.slider_clock .prev3,
|
||||
.slider_clock .prev4,
|
||||
.slider_clock .prev5,
|
||||
.slider_clock .prev6,
|
||||
.slider_clock .prev7,
|
||||
.slider_clock .hidden {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 96px;
|
||||
height: 60px;
|
||||
margin-top: 200px;
|
||||
margin-left: -48px;
|
||||
transform-origin: 48px -200px;
|
||||
transform: rotate(0deg);
|
||||
opacity: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.slider_clock .next2 {
|
||||
transform: rotate(-30deg);
|
||||
}
|
||||
|
||||
.slider_clock .next3 {
|
||||
transform: rotate(-60deg);
|
||||
}
|
||||
|
||||
.slider_clock .next4 {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.slider_clock .next5 {
|
||||
transform: rotate(-120deg);
|
||||
}
|
||||
|
||||
.slider_clock .next6 {
|
||||
transform: rotate(-150deg);
|
||||
}
|
||||
|
||||
.slider_clock .next7 {
|
||||
opacity: 0;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.slider_clock .prev1 {
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
|
||||
.slider_clock .prev2 {
|
||||
transform: rotate(60deg);
|
||||
}
|
||||
|
||||
.slider_clock .prev3 {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.slider_clock .prev4 {
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
|
||||
.slider_clock .prev5 {
|
||||
transform: rotate(150deg);
|
||||
}
|
||||
|
||||
.slider_clock .prev6 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.slider_clock .prev7 {
|
||||
opacity: 0;
|
||||
transform: rotate(210deg);
|
||||
}
|
||||
|
||||
.slider_clock .hidden {
|
||||
opacity: 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
|
||||
/*********************************/
|
||||
|
||||
.nav_indicators {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 50000;
|
||||
}
|
||||
|
||||
.nav_indicators ul {
|
||||
position: static;
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav_indicators ul li {
|
||||
position: static;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
color: #fff;
|
||||
border: 2px solid #000;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.nav_indicators ul li.active {
|
||||
position: static;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 10px;
|
||||
padding: 0;
|
||||
background: #555;
|
||||
color: #555;
|
||||
border: 2px solid #aaa;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.next_button,
|
||||
.prev_button {
|
||||
position: absolute;
|
||||
left: 100% !important;
|
||||
top: 50% !important;
|
||||
margin: -15px 0 0 -25px !important;
|
||||
width: 50px !important;
|
||||
height: 50px !important;
|
||||
border: 1px solid #000 !important;
|
||||
background: #fff !important;
|
||||
opacity: 0.5 !important;
|
||||
z-index: 5000 !important;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border-radius: 50%;
|
||||
|
||||
}
|
||||
|
||||
.prev_button {
|
||||
position: absolute;
|
||||
left: 0% !important;
|
||||
}
|
||||
|
||||
.next_button:hover,
|
||||
.prev_button:hover {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
.next_button:after,
|
||||
.prev_button:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.next_button:after {
|
||||
border-left: 15px solid #000;
|
||||
border-right: 15px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
border-top: 10px solid transparent;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
.prev_button:after {
|
||||
border-right: 15px solid #000;
|
||||
border-left: 15px solid transparent;
|
||||
border-bottom: 10px solid transparent;
|
||||
border-top: 10px solid transparent;
|
||||
margin-left: -25px;
|
||||
}
|
||||
|
||||
|
||||
div.slider > div:not(.nav_indicators):not(.next_button):not(.prev_button) {
|
||||
/* box-shadow: 0px 1px 3px #000; */
|
||||
/* border: 1px solid #000; */
|
||||
/* background: #fff; */
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
/* font-size: 150px; */
|
||||
}
|
||||
185
demo.html
185
demo.html
|
|
@ -2,24 +2,96 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>map</title>
|
||||
<link href="./css/demo.css" rel="stylesheet">
|
||||
<link href="./css/slider.css" rel="stylesheet">
|
||||
<link href="./font/iconfont.css" rel="stylesheet">
|
||||
<!-- 引入 echarts.js -->
|
||||
<!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
|
||||
<!-- <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
|
||||
<script src="echarts.min.js"></script>
|
||||
<!-- 引入 china.js -->
|
||||
<script src="china.js"></script>
|
||||
<style>
|
||||
.div-a{ position: fixed;width:400px;height:536px;padding:10px;z-index: 1;background-color: rgba(0,0,0,0.3);}
|
||||
.div-b{ width:400px;height:536px;padding:5px;color:rgb(255, 255, 255);position: relative;}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="div-a">
|
||||
<!-- 放大或缩小左侧图层-->
|
||||
<div class="screen-btn screen-open" id="btn">
|
||||
<span class="screen_icon iconfont icon-kuoda"></span>
|
||||
</div>
|
||||
<div class="div-b" id="mainGraph">知识图谱</div>
|
||||
<!-- 视频与图片 -->
|
||||
<div class="div-c">
|
||||
<div class="div-video">
|
||||
<video width="100%" height="100%" controls>
|
||||
<source src="movie.mp4" type="video/mp4">
|
||||
<source src="movie.ogg" type="video/ogg">
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</div>
|
||||
<div class="slider slider_one_big_picture">
|
||||
<div>
|
||||
<img src="./image/1.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="./image/2.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="./image/3.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="./image/4.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="./image/5.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="./image/6.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="./image/7.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="./image/8.jpg" />
|
||||
</div>
|
||||
<div>
|
||||
<img src="./image/9.jpg" />
|
||||
</div>
|
||||
<div class="next_button"></div>
|
||||
<div class="prev_button"></div>
|
||||
<div class="nav_indicators"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 搜索,径纬度 区域 -->
|
||||
<div class="search-area">
|
||||
<div class="show_detail">
|
||||
<span class="iconfont icon-gengduo more_icon"></span>
|
||||
<ul class="detail_info">
|
||||
<li class="info_txt" data-key="prov">省份</li>
|
||||
<li class="info_txt" data-key="lon">经纬度</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="search-prov">
|
||||
<input class="search_input" placeholder="请输入省份" />
|
||||
<span class="search_icon iconfont icon-search"></span>
|
||||
</div>
|
||||
<div class="lat_lon_sec">
|
||||
<input
|
||||
onkeyup="this.value=this.value.replace(/[^\d.]/g, '')"
|
||||
class="search_input_common lon" placeholder="经度" />
|
||||
<input
|
||||
onkeyup="this.value=this.value.replace(/[^\d.]/g, '')"
|
||||
class="search_input_common lat" placeholder="纬度" />
|
||||
<span class="iconfont icon-search lat_lon_search"></span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
|
||||
<div id="main" style="width: 100%;height:810px;"></div>
|
||||
<div id="main" style="width: 100%; height: 100vh;"></div>
|
||||
|
||||
<script type="text/javascript" src="./js/jQuery-1.8.3.min.js"></script>
|
||||
<script type="text/javascript" src="./js/jquery.easy_slides.js"></script>
|
||||
<script type="text/javascript">
|
||||
// 基于准备好的dom，初始化echarts实例，地图
|
||||
var myChart = echarts.init(document.getElementById('main'));
|
||||
|
|
@ -1666,5 +1738,108 @@
|
|||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
window.onload = function () {
|
||||
var oBtn = document.querySelector('#btn');
|
||||
oBtn.addEventListener('click', function () {
|
||||
var oText = this.innerHTML;
|
||||
var oParent = this.parentNode;
|
||||
if (oParent.classList.contains('active')) {
|
||||
oParent.classList.remove('active');
|
||||
$('.screen_icon').addClass('icon-kuoda').removeClass('icon-suoxiao');
|
||||
$('.search-area').show();
|
||||
} else {
|
||||
oParent.classList.add('active');
|
||||
$('.screen_icon').addClass('icon-suoxiao').removeClass('icon-kuoda');
|
||||
$('.search-area').hide();
|
||||
}
|
||||
}, false);
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$('.slider_one_big_picture').EasySlides({
|
||||
'autoplay': true,
|
||||
'stepbystep': false,
|
||||
'show': 5,
|
||||
'loop': true
|
||||
});
|
||||
|
||||
// 左侧全屏
|
||||
$('.search-prov').on('mouseover', function () {
|
||||
$('.search_input').addClass('active');
|
||||
}).on('mouseout', function () {
|
||||
$('.search_input').removeClass('active');
|
||||
});
|
||||
|
||||
$('.more_icon').on('mouseover', function () {
|
||||
$('.detail_info').show();
|
||||
}).on('mouseout', function () {
|
||||
var timer = setTimeout(function () {
|
||||
$('.detail_info').on('mouseover', function () {
|
||||
$('.detail_info').show();
|
||||
}).on('mouseout', function () {
|
||||
$('.detail_info').hide();
|
||||
});
|
||||
}, 500);
|
||||
$('.detail_info').hide();
|
||||
})
|
||||
|
||||
|
||||
// 根据省份查找
|
||||
function searchProvince (value) {
|
||||
console.log('查找的省份:', value);
|
||||
}
|
||||
$('.search_icon').on('click', function () {
|
||||
var $val = $(this).val();
|
||||
searchProvince($val)
|
||||
});
|
||||
$('.search_input').on('keydown', function (e) {
|
||||
if (e.keyCode === 13) {
|
||||
// 调用查找接口
|
||||
var $val = $(this).val();
|
||||
searchProvince($val)
|
||||
}
|
||||
})
|
||||
|
||||
$('.detail_info').on('click', 'li', function () {
|
||||
console.log($(this).attr('data-key'));
|
||||
$('.detail_info').hide();
|
||||
var key = $(this).attr('data-key');
|
||||
if (key === 'prov') {
|
||||
$('.search-prov').show();
|
||||
$('.lat_lon_sec').hide();
|
||||
} else {
|
||||
$('.search-prov').hide();
|
||||
$('.lat_lon_sec').show();
|
||||
}
|
||||
});
|
||||
|
||||
function latOrLonSearch () {
|
||||
var lat = $('.lat').val(); // 纬度
|
||||
var lon = $('.lon').val(); // 经度
|
||||
if (!lat || !lon) {
|
||||
if (!lat) $('.lat').focus();
|
||||
if (!lon) $('.lon').focus();
|
||||
return;
|
||||
}
|
||||
console.log('经度', lon);
|
||||
console.log('纬度', lat);
|
||||
};
|
||||
|
||||
$('.search_input_common').on('keydown', function (e) {
|
||||
if (e.keyCode === 13) {
|
||||
latOrLonSearch();
|
||||
}
|
||||
})
|
||||
|
||||
$('.lat_lon_search').on('click', function () {
|
||||
latOrLonSearch();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,539 @@
|
|||
/* Logo 字体 */
|
||||
@font-face {
|
||||
font-family: "iconfont logo";
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: "iconfont logo";
|
||||
font-size: 160px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.nav-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#tabs li {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -1px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
#tabs .active {
|
||||
border-bottom-color: #f00;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.tab-container .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
.main {
|
||||
padding: 30px 100px;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main .logo {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1;
|
||||
height: 110px;
|
||||
margin-top: -50px;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
font-size: 160px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.helps {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.helps pre {
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border: solid 1px #e7e1cd;
|
||||
background-color: #fffdef;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon_lists {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.icon_lists li {
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
list-style: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon_lists li .code-name {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon_lists .icon {
|
||||
display: block;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 42px;
|
||||
margin: 10px auto;
|
||||
color: #333;
|
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
transition: font-size 0.25s linear, width 0.25s linear;
|
||||
}
|
||||
|
||||
.icon_lists .icon:hover {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.icon_lists .svg-icon {
|
||||
/* 通过设置 font-size 来改变图标大小 */
|
||||
width: 1em;
|
||||
/* 图标和文字相邻时，垂直对齐 */
|
||||
vertical-align: -0.15em;
|
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||
fill: currentColor;
|
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||
normalize.css 中也包含这行 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon_lists li .name,
|
||||
.icon_lists li .code-name {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* markdown 样式 */
|
||||
.markdown {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: #404040;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: #404040;
|
||||
margin: 1.6em 0 0.6em 0;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #e9e9e9;
|
||||
margin: 16px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown>p,
|
||||
.markdown>blockquote,
|
||||
.markdown>.highlight,
|
||||
.markdown>ol,
|
||||
.markdown>ul {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.markdown ul>li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.markdown>ul li,
|
||||
.markdown blockquote ul>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown>ul li p,
|
||||
.markdown>ol li p {
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.markdown ol>li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.markdown>ol li,
|
||||
.markdown blockquote ol>li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 3px;
|
||||
padding: 0 5px;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 95%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown>table th,
|
||||
.markdown>table td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown>table th {
|
||||
background: #F7F7F7;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown>br,
|
||||
.markdown>p>br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-meta {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis,
|
||||
.hljs-quote {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-type {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-attribute {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-attr,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 代码高亮 */
|
||||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection,
|
||||
pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection,
|
||||
code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection,
|
||||
pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection,
|
||||
code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre)>code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre)>code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
|
@ -0,0 +1,260 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>IconFont Demo</title>
|
||||
<link rel="shortcut icon" href="https://gtms04.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/>
|
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
||||
<link rel="stylesheet" href="demo.css">
|
||||
<link rel="stylesheet" href="iconfont.css">
|
||||
<script src="iconfont.js"></script>
|
||||
<!-- jQuery -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
||||
<!-- 代码高亮 -->
|
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="main">
|
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1>
|
||||
<div class="nav-tabs">
|
||||
<ul id="tabs" class="dib-box">
|
||||
<li class="dib active"><span>Unicode</span></li>
|
||||
<li class="dib"><span>Font class</span></li>
|
||||
<li class="dib"><span>Symbol</span></li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="tab-container">
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">搜索</div>
|
||||
<div class="code-name">&#xe739;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">更多</div>
|
||||
<div class="code-name">&#xe7ba;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">缩小</div>
|
||||
<div class="code-name">&#xe62b;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">扩大</div>
|
||||
<div class="code-name">&#xe62c;</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="unicode-">Unicode 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||||
<ul>
|
||||
<li>兼容性最好，支持 IE6+，及所有现代浏览器。</li>
|
||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
|
||||
</ul>
|
||||
<blockquote>
|
||||
<p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p>
|
||||
</blockquote>
|
||||
<p>Unicode 使用步骤如下：</p>
|
||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.eot');
|
||||
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('iconfont.woff2') format('woff2'),
|
||||
url('iconfont.woff') format('woff'),
|
||||
url('iconfont.ttf') format('truetype'),
|
||||
url('iconfont.svg#iconfont') format('svg');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
<pre><code class="language-css"
|
||||
>.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||
<pre>
|
||||
<code class="language-html"
|
||||
><span class="iconfont">&#x33;</span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-search"></span>
|
||||
<div class="name">
|
||||
搜索
|
||||
</div>
|
||||
<div class="code-name">.icon-search
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-gengduo"></span>
|
||||
<div class="name">
|
||||
更多
|
||||
</div>
|
||||
<div class="code-name">.icon-gengduo
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-suoxiao"></span>
|
||||
<div class="name">
|
||||
缩小
|
||||
</div>
|
||||
<div class="code-name">.icon-suoxiao
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icon-kuoda"></span>
|
||||
<div class="name">
|
||||
扩大
|
||||
</div>
|
||||
<div class="code-name">.icon-kuoda
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="font-class-">font-class 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||
<ul>
|
||||
<li>兼容性良好，支持 IE8+，及所有现代浏览器。</li>
|
||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
||||
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||
</code></pre>
|
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
||||
</code></pre>
|
||||
<blockquote>
|
||||
<p>"
|
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-search"></use>
|
||||
</svg>
|
||||
<div class="name">搜索</div>
|
||||
<div class="code-name">#icon-search</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-gengduo"></use>
|
||||
</svg>
|
||||
<div class="name">更多</div>
|
||||
<div class="code-name">#icon-gengduo</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-suoxiao"></use>
|
||||
</svg>
|
||||
<div class="name">缩小</div>
|
||||
<div class="code-name">#icon-suoxiao</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-kuoda"></use>
|
||||
</svg>
|
||||
<div class="name">扩大</div>
|
||||
<div class="code-name">#icon-kuoda</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<div class="article markdown">
|
||||
<h2 id="symbol-">Symbol 引用</h2>
|
||||
<hr>
|
||||
|
||||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
|
||||
<ul>
|
||||
<li>支持多色图标了，不再受单色限制。</li>
|
||||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
|
||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li>
|
||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
|
||||
</ul>
|
||||
<p>使用步骤如下：</p>
|
||||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
|
||||
<pre><code class="language-html"><script src="./iconfont.js"></script>
|
||||
</code></pre>
|
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||
<pre><code class="language-html"><style>
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
</code></pre>
|
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||
<use xlink:href="#icon-xxx"></use>
|
||||
</svg>
|
||||
</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('.tab-container .content:first').show()
|
||||
|
||||
$('#tabs li').click(function (e) {
|
||||
var tabContent = $('.tab-container .content')
|
||||
var index = $(this).index()
|
||||
|
||||
if ($(this).hasClass('active')) {
|
||||
return
|
||||
} else {
|
||||
$('#tabs li').removeClass('active')
|
||||
$(this).addClass('active')
|
||||
|
||||
tabContent.hide().eq(index).fadeIn()
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
@font-face {font-family: "iconfont";
|
||||
src: url('iconfont.eot?t=1575968442554'); /* IE9 */
|
||||
src: url('iconfont.eot?t=1575968442554#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQIAAsAAAAACJQAAAO5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKgqEOINsATYCJAMUCwwABCAFhG0HTBt0B8iehbHzIjQqeeZs2X+PAP7Yey9+roMiMS1SR+WRNpCBbToeroEmPqsQ2N+3aQ9+aqQudE1q6jT5UGJkgKxoUtHjmvqtJqddv5qeUn/n+d8PePy9qhlj4TyLxWW9/7P2smAAwwEK0OxeXLJWpCDeRTybDP4n8HUCqvqtQSznldSAvUw9LyCc8BwD9pGAXDAelAXFjFszhAuwUY5D5CiAc+f3wx9EBXsQFRKob1rfy1VDxufq95HZmpZkBnN3MbB3kTABZMJRZmIH8hoTkKrcqzALlLV9kc81E9+3QtpqbCn7yqqqSDL5x4uEIqiOWqDO+7ItQ4Zf2kgEWRlAoCPwdb8p4pjuoooKHgC8IHVgR5REsdvRQWUEBH5lc93uZS8WiPn5utnZmrm52pGF8n1etedGnlgMSeHCQr0hc8fm2+OWiZEx82iHS10QTVtmLpWoYe/T5wlkeTLyyA/qry2leUWN8tRfP6Q2DJ8/fMSnnjr92PJE6TTideockGcPhx/7EzVnpWzycqkfuTcgD3cn9UcHpK8eHXvUkrSj5N0HX2rYZduz0d3vv28rbikwprirCJ50CxX0r92S9ebug9q0RynVRwbQjVvXv3vwxu0Bsp9Eg2eIGBKzEPm4OsOlIKTImEqHigZYayj2Z1wyIKMxz7WIfixsX5KOO3zaPJIDYuJjqCP//oVG10Z52PccOZodnx0QG+Xv+emT+nV0RXI126K6dc9fH01jRYrouOijPSe9y1AyFaBucn4EoYzzyJSFSNdawuP/v6NlnwobAP7LBDIDkE6JOes/AgStHOwDeJ+r5oxf7S4pv+2VCoBnL/fBXB01Nz9FVBk9bl+GAgKLgqvBQpYwg/m/gzRaMAtxydDTxR9zh2ZvunG2DWK2UmVtAUQlfZCUDRAzdQIKakxCUdkcVI3Lv7tGCxESsgMwpo9A0OgKRPWeIGk0RszU11DQ7jMUNQYEVRvB45E1hgJPZYuYkbGa7txI8yrBwOphmXLHqzBn0jFiGHeUdViU+DIdGRYRb+djAxa7uEJax0XJMkuzoqCn88jbsE4n0EZR0GCVHNYly8ak8HA265vCVIIeKEtEGEOGqdE6bUTjqQgMWGu9jEr8fBWMY6LDEAuWyvp1MJGE354WKUxEBWK+w1Bp6VT2S9bhRJHJWOoslkigR8uDGKbTGgKaMfuYBqYiC9PVoGaUJBxXsVUdYcO79Od4A6rUzxUCSSBCQdgQtlA8xYyo6rLjsIFTmwQ7yTi4gWcEG61JUDMAAAAA') format('woff2'),
|
||||
url('iconfont.woff?t=1575968442554') format('woff'),
|
||||
url('iconfont.ttf?t=1575968442554') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
|
||||
url('iconfont.svg?t=1575968442554#iconfont') format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-search:before {
|
||||
content: "\e739";
|
||||
}
|
||||
|
||||
.icon-gengduo:before {
|
||||
content: "\e7ba";
|
||||
}
|
||||
|
||||
.icon-suoxiao:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
||||
.icon-kuoda:before {
|
||||
content: "\e62c";
|
||||
}
|
||||
|
||||
Binary file not shown.
|
|
@ -0,0 +1 @@
|
|||
!function(s){var e,l='<svg><symbol id="icon-search" viewBox="0 0 1024 1024"><path d="M1002.139794 894.317714l-185.051429-187.830857a73.874286 73.874286 0 0 0-36.644571-20.406857 438.345143 438.345143 0 0 0 77.897143-250.368C858.340937 195.072 666.194651 0 429.211794 0 192.155794 0 0.009508 195.072 0.009508 435.712s192.146286 435.785143 429.202286 435.785143a422.985143 422.985143 0 0 0 262.875428-91.355429c3.291429 12.361143 9.728 23.990857 19.236572 33.718857l185.051428 187.904a74.020571 74.020571 0 0 0 105.764572 0 76.873143 76.873143 0 0 0 0-107.446857z m-574.610286-136.630857c-175.908571 0-318.537143-144.822857-318.537143-323.510857 0-178.614857 142.628571-323.437714 318.537143-323.437714 175.981714 0 318.610286 144.822857 318.610286 323.437714 0 178.688-142.628571 323.510857-318.610286 323.510857z" ></path></symbol><symbol id="icon-gengduo" viewBox="0 0 1024 1024"><path d="M795.2824707 596.53979492c-48.9440918 0-87.50610352-37.07885742-87.50610351-84.53979492s40.04516602-84.53979492 87.50610351-84.53979492c48.9440918 0 87.50610352 37.07885742 87.50610352 84.53979492s-40.04516602 84.53979492-87.50610352 84.53979492z m-283.2824707 0c-48.9440918 0-87.50610352-37.07885742-87.50610352-84.53979492s40.04516602-84.53979492 87.50610352-84.53979492c48.9440918 0 87.50610352 37.07885742 87.50610352 84.53979492s-38.56201172 84.53979492-87.50610352 84.53979492z m-283.2824707 0C181.2565918 596.53979492 141.21142578 557.9777832 141.21142578 512s40.04516602-84.53979492 87.50610352-84.53979492c48.9440918 0 87.50610352 37.07885742 87.50610351 84.53979492s-38.56201172 84.53979492-87.50610351 84.53979492z" ></path></symbol><symbol id="icon-suoxiao" viewBox="0 0 1024 1024"><path d="M601.6 486.4h-1.536a63.168 63.168 0 0 1-22.336-4.608 63.936 63.936 0 0 1-40.064-57.856V108.8a64 64 0 0 1 128 0v159.104L914.688 18.752a64 64 0 0 1 90.496 90.496L756.096 358.4H915.2a64 64 0 0 1 0 128H601.6zM64 1024a64 64 0 0 1-45.248-109.248l249.152-249.216H108.8a64 64 0 0 1 0-128H423.936a63.36 63.36 0 0 1 22.4 4.672 64 64 0 0 1 40.064 57.792V915.2a64 64 0 0 1-128 0v-159.168l-249.152 249.216A63.808 63.808 0 0 1 64 1024z" fill="#999999" ></path></symbol><symbol id="icon-kuoda" viewBox="0 0 1024 1024"><path d="M601.570673 486.398688a63.99688 63.99688 0 0 1-45.245794-109.178677L805.464734 128.016159H646.36849a63.99688 63.99688 0 0 1 0-127.99376h313.392722a12.991367 12.991367 0 0 1 1.535925 0h0.19199a63.164921 63.164921 0 0 1 22.398908 4.671772A64.060877 64.060877 0 0 1 1023.950082 62.547351V377.603992a63.99688 63.99688 0 0 1-127.99376 0V218.571745l-249.139854 249.139854A63.80489 63.80489 0 0 1 601.570673 486.398688zM63.99688 1023.972481a11.647432 11.647432 0 0 0-1.535925 0 63.356911 63.356911 0 0 1-22.398908-4.607775 63.868886 63.868886 0 0 1-40.062047-57.789183V646.390888a63.99688 63.99688 0 0 1 127.99376 0v159.096245l249.139855-249.139855a63.99688 63.99688 0 0 1 90.491588 90.491589L218.485349 895.978721H377.581593a63.99688 63.99688 0 1 1 0 127.99376H63.99688z" fill="#999999" ></path></symbol></svg>',t=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(t&&!s.__iconfont__svg__cssinject__){s.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}!function(e){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(e,0);else{var t=function(){document.removeEventListener("DOMContentLoaded",t,!1),e()};document.addEventListener("DOMContentLoaded",t,!1)}else document.attachEvent&&(o=e,a=s.document,i=!1,(l=function(){try{a.documentElement.doScroll("left")}catch(e){return void setTimeout(l,50)}n()})(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,n())});function n(){i||(i=!0,o())}var o,a,i,l}(function(){var e,t,n,o,a,i;(e=document.createElement("div")).innerHTML=l,l=null,(t=e.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",n=t,(o=document.body).firstChild?(a=n,(i=o.firstChild).parentNode.insertBefore(a,i)):o.appendChild(n))})}(window);
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
{
|
||||
"id": "",
|
||||
"name": "",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "10686079",
|
||||
"name": "搜索",
|
||||
"font_class": "search",
|
||||
"unicode": "e739",
|
||||
"unicode_decimal": 59193
|
||||
},
|
||||
{
|
||||
"icon_id": "14769760",
|
||||
"name": "更多",
|
||||
"font_class": "gengduo",
|
||||
"unicode": "e7ba",
|
||||
"unicode_decimal": 59322
|
||||
},
|
||||
{
|
||||
"icon_id": "46750641",
|
||||
"name": "缩小",
|
||||
"font_class": "suoxiao",
|
||||
"unicode": "e62b",
|
||||
"unicode_decimal": 58923
|
||||
},
|
||||
{
|
||||
"icon_id": "46750642",
|
||||
"name": "扩大",
|
||||
"font_class": "kuoda",
|
||||
"unicode": "e62c",
|
||||
"unicode_decimal": 58924
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<!--
|
||||
2013-9-30: Created.
|
||||
-->
|
||||
<svg>
|
||||
<metadata>
|
||||
Created by iconfont
|
||||
</metadata>
|
||||
<defs>
|
||||
|
||||
<font id="iconfont" horiz-adv-x="1024" >
|
||||
<font-face
|
||||
font-family="iconfont"
|
||||
font-weight="500"
|
||||
font-stretch="normal"
|
||||
units-per-em="1024"
|
||||
ascent="896"
|
||||
descent="-128"
|
||||
/>
|
||||
<missing-glyph />
|
||||
|
||||
<glyph glyph-name="search" unicode="" d="M1002.139794 1.6822859999999764l-185.051429 187.830857a73.874286 73.874286 0 0 1-36.644571 20.406857 438.345143 438.345143 0 0 1 77.897143 250.368C858.340937 700.928 666.194651 896 429.211794 896 192.155794 896 0.009508 700.928 0.009508 460.288s192.146286-435.785143 429.202286-435.785143a422.985143 422.985143 0 0 1 262.875428 91.355429c3.291429-12.361143 9.728-23.990857 19.236572-33.718857l185.051428-187.904a74.020571 74.020571 0 0 1 105.764572 0 76.873143 76.873143 0 0 1 0 107.446857z m-574.610286 136.630857c-175.908571 0-318.537143 144.822857-318.537143 323.510857 0 178.614857 142.628571 323.437714 318.537143 323.437714 175.981714 0 318.610286-144.822857 318.610286-323.437714 0-178.688-142.628571-323.510857-318.610286-323.510857z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="gengduo" unicode="" d="M795.2824707 299.46020508000004c-48.9440918 0-87.50610352 37.07885742-87.50610351 84.53979492s40.04516602 84.53979492 87.50610351 84.53979492c48.9440918 0 87.50610352-37.07885742 87.50610352-84.53979492s-40.04516602-84.53979492-87.50610352-84.53979492z m-283.2824707 0c-48.9440918 0-87.50610352 37.07885742-87.50610352 84.53979492s40.04516602 84.53979492 87.50610352 84.53979492c48.9440918 0 87.50610352-37.07885742 87.50610352-84.53979492s-38.56201172-84.53979492-87.50610352-84.53979492z m-283.2824707 0C181.2565918 299.46020508000004 141.21142578 338.0222168 141.21142578 384s40.04516602 84.53979492 87.50610352 84.53979492c48.9440918 0 87.50610352-37.07885742 87.50610351-84.53979492s-38.56201172-84.53979492-87.50610351-84.53979492z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="suoxiao" unicode="" d="M601.6 409.6h-1.536a63.168 63.168 0 0 0-22.336 4.608 63.936 63.936 0 0 0-40.064 57.856V787.2a64 64 0 0 0 128 0v-159.104L914.688 877.248a64 64 0 0 0 90.496-90.496L756.096 537.6H915.2a64 64 0 0 0 0-128H601.6zM64-128a64 64 0 0 0-45.248 109.248l249.152 249.216H108.8a64 64 0 0 0 0 128H423.936a63.36 63.36 0 0 0 22.4-4.672 64 64 0 0 0 40.064-57.792V-19.2a64 64 0 0 0-128 0v159.168l-249.152-249.216A63.808 63.808 0 0 0 64-128z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
<glyph glyph-name="kuoda" unicode="" d="M601.570673 409.601312a63.99688 63.99688 0 0 0-45.245794 109.178677L805.464734 767.983841H646.36849a63.99688 63.99688 0 0 0 0 127.99376h313.392722a12.991367 12.991367 0 0 0 1.535925 0h0.19199a63.164921 63.164921 0 0 0 22.398908-4.671772A64.060877 64.060877 0 0 0 1023.950082 833.452649V518.396008a63.99688 63.99688 0 0 0-127.99376 0V677.428255l-249.139854-249.139854A63.80489 63.80489 0 0 0 601.570673 409.601312zM63.99688-127.972481a11.647432 11.647432 0 0 1-1.535925 0 63.356911 63.356911 0 0 0-22.398908 4.607775 63.868886 63.868886 0 0 0-40.062047 57.789183V249.609112a63.99688 63.99688 0 0 0 127.99376 0v-159.096245l249.139855 249.139855a63.99688 63.99688 0 0 0 90.491588-90.491589L218.485349 0.021279H377.581593a63.99688 63.99688 0 1 0 0-127.99376H63.99688z" horiz-adv-x="1024" />
|
||||
|
||||
|
||||
|
||||
|
||||
</font>
|
||||
</defs></svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M601.570673 486.398688a63.99688 63.99688 0 0 1-45.245794-109.178677L805.464734 128.016159H646.36849a63.99688 63.99688 0 0 1 0-127.99376h313.392722a12.991367 12.991367 0 0 1 1.535925 0h0.19199a63.164921 63.164921 0 0 1 22.398908 4.671772A64.060877 64.060877 0 0 1 1023.950082 62.547351V377.603992a63.99688 63.99688 0 0 1-127.99376 0V218.571745l-249.139854 249.139854A63.80489 63.80489 0 0 1 601.570673 486.398688zM63.99688 1023.972481a11.647432 11.647432 0 0 0-1.535925 0 63.356911 63.356911 0 0 1-22.398908-4.607775 63.868886 63.868886 0 0 1-40.062047-57.789183V646.390888a63.99688 63.99688 0 0 1 127.99376 0v159.096245l249.139855-249.139855a63.99688 63.99688 0 0 1 90.491588 90.491589L218.485349 895.978721H377.581593a63.99688 63.99688 0 1 1 0 127.99376H63.99688z" /></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M1002.139794 894.317714l-185.051429-187.830857a73.874286 73.874286 0 0 0-36.644571-20.406857 438.345143 438.345143 0 0 0 77.897143-250.368C858.340937 195.072 666.194651 0 429.211794 0 192.155794 0 0.009508 195.072 0.009508 435.712s192.146286 435.785143 429.202286 435.785143a422.985143 422.985143 0 0 0 262.875428-91.355429c3.291429 12.361143 9.728 23.990857 19.236572 33.718857l185.051428 187.904a74.020571 74.020571 0 0 0 105.764572 0 76.873143 76.873143 0 0 0 0-107.446857z m-574.610286-136.630857c-175.908571 0-318.537143-144.822857-318.537143-323.510857 0-178.614857 142.628571-323.437714 318.537143-323.437714 175.981714 0 318.610286 144.822857 318.610286 323.437714 0 178.688-142.628571 323.510857-318.610286 323.510857z" /></svg>
|
||||
|
After Width: | Height: | Size: 1019 B |
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M601.6 486.4h-1.536a63.168 63.168 0 0 1-22.336-4.608 63.936 63.936 0 0 1-40.064-57.856V108.8a64 64 0 0 1 128 0v159.104L914.688 18.752a64 64 0 0 1 90.496 90.496L756.096 358.4H915.2a64 64 0 0 1 0 128H601.6zM64 1024a64 64 0 0 1-45.248-109.248l249.152-249.216H108.8a64 64 0 0 1 0-128H423.936a63.36 63.36 0 0 1 22.4 4.672 64 64 0 0 1 40.064 57.792V915.2a64 64 0 0 1-128 0v-159.168l-249.152 249.216A63.808 63.808 0 0 1 64 1024z" /></svg>
|
||||
|
After Width: | Height: | Size: 714 B |
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,328 @@
|
|||
/*
|
||||
EasySlides - слидер
|
||||
Autor 2017 Shabanov Ivan (Шабанов Иван)
|
||||
Usage:
|
||||
|
||||
$('.slider').EasySlides({
|
||||
'autoplay': true,
|
||||
'timeout': 3000,
|
||||
'show': 5, //Сколь-ко позывать слайдов (по умолчанию 5: 1-активный, 2-предыдущих и 2-следующих)
|
||||
'vertical': false, //Если True то слайдер вертикальный, слайды листаются движением вверх/вниз
|
||||
'reverse': false, //Перевернутый слайдер
|
||||
'touchevents': true, //Вкючено ли события на прикосновения к сладеру (листания и т.п)
|
||||
'delayaftershow': 300, //Задержка после смены слайдера, в это время слайдер нельзя листать
|
||||
'stepbystep': true, //При клике на далекий слайд перейти к нему последовательно, а не сразу
|
||||
'startslide': 0, //Стартовый слайд
|
||||
'beforeshow': function () {},
|
||||
'aftershow': function () {},
|
||||
});
|
||||
|
||||
*/
|
||||
(function ($) {
|
||||
|
||||
$.fn.EasySlides = function (options) {
|
||||
var settings = $.extend({
|
||||
'autoplay': false,
|
||||
'timeout': 3000,
|
||||
'show': 5,
|
||||
'vertical': false,
|
||||
'reverse': false,
|
||||
'touchevents': true,
|
||||
'delayaftershow': 300,
|
||||
'stepbystep': true,
|
||||
'loop': true,
|
||||
'startslide': 0,
|
||||
'distancetochange': 10,
|
||||
'beforeshow': function () {},
|
||||
'aftershow': function () {},
|
||||
|
||||
}, options);
|
||||
return this.each(function () {
|
||||
var this_slider = this;
|
||||
var EasySlidesTimer;
|
||||
var EasySlidesCanChange = true;
|
||||
|
||||
var count = $(this_slider).children('*:not(.next_button, .prev_button, .nav_indicators)').length;
|
||||
var cur_slide = 0;
|
||||
var mousedowned = false;
|
||||
var need_slide = 0;
|
||||
var slides;
|
||||
if (count > 0) {
|
||||
|
||||
while (count < settings['show']) {
|
||||
var html = $(this_slider).html();
|
||||
$(html).appendTo(this_slider);
|
||||
$(this_slider).children('.next_button:eq(0), .prev_button:eq(0), .nav_indicators:eq(0)').remove();
|
||||
slides = $(this_slider).children('*:not(.next_button, .prev_button, .nav_indicators)');
|
||||
|
||||
count = $(slides).length;
|
||||
}
|
||||
slides = $(this_slider).children('*:not(.next_button, .prev_button, .nav_indicators)');
|
||||
|
||||
if ($(this_slider).children('.nav_indicators').length > 0) {
|
||||
var nav_indicators = '<ul>';
|
||||
while (need_slide < count) {
|
||||
need_slide++;
|
||||
nav_indicators = nav_indicators + '<li>' + need_slide + '</li>';
|
||||
}
|
||||
nav_indicators = nav_indicators + '</ul>';
|
||||
$(this_slider).children('.nav_indicators').html(nav_indicators);
|
||||
need_slide = 0
|
||||
}
|
||||
var EasySlidesLoopToNeeded = function () {
|
||||
var next;
|
||||
var left = need_slide - cur_slide;
|
||||
var right = cur_slide - need_slide
|
||||
if (settings['loop'] == true) {
|
||||
if (left < 0) {
|
||||
left = left + count;
|
||||
}
|
||||
if (right < 0) {
|
||||
right = right + count;
|
||||
}
|
||||
}
|
||||
if (cur_slide != need_slide) {
|
||||
if (settings['loop'] == true) {
|
||||
if ((left) < (right)) {
|
||||
next = cur_slide + 1;
|
||||
} else {
|
||||
next = cur_slide - 1;
|
||||
}
|
||||
} else {
|
||||
if (left > 0) {
|
||||
next = cur_slide + 1;
|
||||
} else {
|
||||
next = cur_slide - 1;
|
||||
}
|
||||
}
|
||||
EasySlidesNext(next);
|
||||
setTimeout(EasySlidesLoopToNeeded, settings['delayaftershow']);
|
||||
}
|
||||
}
|
||||
var EasySlidesNext = function (nextslide) {
|
||||
if (EasySlidesCanChange) {
|
||||
EasySlidesCanChange = false;
|
||||
setTimeout(function () {
|
||||
EasySlidesCanChange = true;
|
||||
}, settings['delayaftershow']);
|
||||
clearTimeout(EasySlidesTimer);
|
||||
if (typeof settings['beforeshow'] == 'function') {
|
||||
settings['beforeshow']();
|
||||
}
|
||||
var i = 0;
|
||||
if (count > 0) {
|
||||
if (typeof nextslide == 'number') {
|
||||
cur_slide = nextslide;
|
||||
} else {
|
||||
cur_slide++;
|
||||
nextslide = cur_slide;
|
||||
}
|
||||
if (settings['loop'] == true) {
|
||||
while (cur_slide < 0) {
|
||||
cur_slide = cur_slide + count;
|
||||
}
|
||||
while (cur_slide >= count) {
|
||||
cur_slide = cur_slide - count;
|
||||
}
|
||||
while (nextslide < 0) {
|
||||
nextslide = nextslide + count;
|
||||
}
|
||||
while (nextslide >= count) {
|
||||
nextslide = nextslide - count;
|
||||
}
|
||||
|
||||
} else {
|
||||
if (cur_slide < 0) {
|
||||
cur_slide = 0;
|
||||
}
|
||||
if (cur_slide >= count) {
|
||||
cur_slide = count - 1;
|
||||
}
|
||||
if (nextslide < 0) {
|
||||
nextslide = 0;
|
||||
}
|
||||
if (nextslide >= count) {
|
||||
nextslide = count - 1;
|
||||
}
|
||||
}
|
||||
$(this_slider).children('.nav_indicators').find('ul').find('li').removeClass('active');
|
||||
|
||||
$(this_slider).find('.nav_indicators ul li:nth-child(' + (nextslide + 1) + ')').addClass('active');
|
||||
i = 0;
|
||||
/*
|
||||
$(this_slider).children('*:not(.next_button, .prev_button, .nav_indicators)').each(function() {
|
||||
*/
|
||||
$(slides).each(function () {
|
||||
|
||||
|
||||
var cssclass = '';
|
||||
var icount = 0;
|
||||
icount = i - nextslide;
|
||||
while (icount < 0) {
|
||||
icount = icount + count;
|
||||
}
|
||||
|
||||
while (icount > count) {
|
||||
icount = icount - count;
|
||||
}
|
||||
if (icount == 0) {
|
||||
cssclass = 'active';
|
||||
$(this_slider).find('.' + cssclass + ':not(.nav_indicators ul li)').removeClass(cssclass);
|
||||
$(this).removeClass('hidden');
|
||||
$(this).addClass(cssclass);
|
||||
} else if (icount < settings['show'] / 2) {
|
||||
cssclass = 'next' + icount;
|
||||
$(this_slider).find('.' + cssclass).removeClass(cssclass);
|
||||
$(this).removeClass('hidden');
|
||||
$(this).addClass(cssclass);
|
||||
} else if (icount > count - (settings['show'] / 2)) {
|
||||
cssclass = 'prev' + (count - icount);
|
||||
$(this_slider).find('.' + cssclass).removeClass(cssclass);
|
||||
$(this).removeClass('hidden');
|
||||
$(this).addClass(cssclass);
|
||||
} else {
|
||||
$(this).addClass('hidden');
|
||||
}
|
||||
|
||||
if ((Math.abs(i - nextslide) > (settings['show'] / 2)) && (settings['loop'] == false)) {
|
||||
var icnt = 1;
|
||||
while (icnt < settings['show'] / 2) {
|
||||
cssclass = 'next' + icnt;
|
||||
if ($(this).hasClass(cssclass) ) {
|
||||
$(this).removeClass(cssclass)
|
||||
};
|
||||
cssclass = 'prev' + icnt;
|
||||
if ($(this).hasClass(cssclass) ) {
|
||||
$(this).removeClass(cssclass)
|
||||
};
|
||||
icnt ++;
|
||||
};
|
||||
$(this).addClass('hidden');
|
||||
}
|
||||
i++;
|
||||
});
|
||||
if (settings['autoplay']) {
|
||||
clearTimeout(EasySlidesTimer);
|
||||
EasySlidesTimer = setTimeout(function () {
|
||||
EasySlidesNext();
|
||||
}, settings['timeout']);
|
||||
}
|
||||
}
|
||||
if (typeof settings['aftershow'] == 'function') {
|
||||
settings['aftershow']();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
EasySlidesNext(settings['startslide']);
|
||||
/*
|
||||
$(this_slider).children(':not(.next_button, .prev_button, .nav_indicators)').click(function () {
|
||||
*/
|
||||
$(slides).click(function () {
|
||||
need_slide = $(this_slider).children().index(this);
|
||||
if (settings['stepbystep']) {
|
||||
EasySlidesLoopToNeeded()
|
||||
} else {
|
||||
EasySlidesNext(need_slide);
|
||||
}
|
||||
});
|
||||
$(this_slider).children('.nav_indicators').find('ul').find('li').click(function () {
|
||||
need_slide = $(this_slider).find('.nav_indicators ul li').index(this);
|
||||
if (settings['stepbystep']) {
|
||||
EasySlidesLoopToNeeded()
|
||||
} else {
|
||||
EasySlidesNext(need_slide);
|
||||
}
|
||||
});
|
||||
|
||||
$(this_slider).find('.next_button').click(function () {
|
||||
EasySlidesCanChange = true;
|
||||
EasySlidesNext();
|
||||
});
|
||||
$(this_slider).find('.prev_button').click(function () {
|
||||
EasySlidesCanChange = true;
|
||||
cur_slide--;
|
||||
EasySlidesNext(cur_slide);
|
||||
});
|
||||
if (settings['touchevents']) {
|
||||
var EasySliderMoved = function (xcur, ycur) {
|
||||
var offset = $(slides).find('.active').offset();
|
||||
var left = 0;
|
||||
var top = 0;
|
||||
if (typeof offset !== 'undefined') {
|
||||
left = offset.left;
|
||||
top = offset.top;
|
||||
}
|
||||
|
||||
var p0 = $(this_slider).data('posstart'),
|
||||
p1 = {
|
||||
x: xcur,
|
||||
y: ycur,
|
||||
l: left,
|
||||
t: top,
|
||||
},
|
||||
d = 0;
|
||||
if (typeof p0 === 'undefined') {
|
||||
p0 = p1;
|
||||
$(this_slider).data('posstart', p1);
|
||||
}
|
||||
|
||||
if (settings['vertical']) {
|
||||
d = p1.y - p0.y;
|
||||
top = p0.t + d;
|
||||
//$(this_slider).find('.active:not(.nav_indicators ul li)').offset({'top': top});
|
||||
} else {
|
||||
d = p1.x - p0.x;
|
||||
left = p0.l + d;
|
||||
//$(this_slider).find('.active:not(.nav_indicators ul li)').offset({'left': left});
|
||||
}
|
||||
if (settings['reverse']) {
|
||||
d = -d;
|
||||
}
|
||||
if ((Math.abs(d) > settings['distancetochange']) && (EasySlidesCanChange)) {
|
||||
$(this_slider).data('posstart', p1);
|
||||
|
||||
if (d > 0) {
|
||||
cur_slide--;
|
||||
} else {
|
||||
cur_slide++;
|
||||
}
|
||||
EasySlidesNext(cur_slide);
|
||||
}
|
||||
}
|
||||
/*События*/
|
||||
$(this_slider).bind('mousemove', function (e) {
|
||||
e.preventDefault();
|
||||
if (e.buttons > 0) {
|
||||
EasySliderMoved(e.pageX, e.pageY);
|
||||
mousedowned = true;
|
||||
} else {
|
||||
if (mousedowned) {
|
||||
EasySliderMoved(e.pageX, e.pageY);
|
||||
$(this_slider).removeData('posstart');
|
||||
mousedowned = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
$(this_slider).bind('mouseup', function (e) {
|
||||
e.preventDefault();
|
||||
if (mousedowned) {
|
||||
EasySliderMoved(e.pageX, e.pageY);
|
||||
$(this_slider).removeData('posstart');
|
||||
mousedowned = false;
|
||||
}
|
||||
})
|
||||
|
||||
$(this_slider).bind('touchmove', function (e) {
|
||||
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
|
||||
EasySliderMoved(touch.pageX, touch.pageY);
|
||||
});
|
||||
$(this_slider).bind('touchend', function (e) {
|
||||
$(this_slider).removeData('posstart');
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})(jQuery);
|
||||
Loading…
Reference in New Issue