康諾科技java培訓小課堂：Web前端——橫向切換屏幕

康諾科技java培訓小課堂：Web前端——橫向切換屏幕

用到的知識點：html+css+js。

實現的效果：橫向切換屏幕

源碼：

橫向滾屏效果

第一屏

第二屏

第三屏

第四屏

第一屏

第二屏

第三屏

第四屏

//滑鼠滑動觸發或手機觸屏觸摸橫屏滾動效果

$("section").horizon();

style.css源碼：html, body {

width: 100%;

height: 100%;

padding: 0;

margin: 0;

overflow: hidden;

}

section, header,footer, nav, div, span, ul, li, a {

box-sizing: border-box;

}

header {

position: fixed;

top: 0;

right: 0;

left: 0;

background-color: #f2f2f2;

}

header nav {

}

header ul {

margin: 0;

padding: 0;

list-style: none;

}

header ul li {

display: inline-block;

padding: 0 20px;

}

header ul a {

text-decoration: none;

color: #4d4d4d;

height: 50px;

display: block;

position: relative;

}

header ul a span{

position: relative;

top: 50%;

transform: translateY(-50%);

display: inline-block;

}

section {

float: left;

display: block;

height: 100%;

padding: 75px 0 0 0;

margin: 0;

}

#section-section1{

background: #2c3e50;

}

#section-section2{

background: #16a085;

}

#section-section3{

background: #27ae60;

}

#section-section4{

background: #c0392b;

}

.horizon-prev,.horizon-next {

position: fixed;

top: 50%;

margin-top: -24px;

z-index: 9999;

}

.horizon-prev {

left: 20px;

}

.horizon-next {

right: 20px;

}

文/康諾科技

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！