WEB手機端 上下切換效果

doctype html
>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
meta 
name
="viewport"
content
="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<
meta 
name
content
="yes"
/>
<
title
>slider
title
>
<
style
>
*html ,
body ,
#slider 
.s-list
.s-list>li
.s-list>li:nth-child(1)
.s-list>li:nth-child(2)
.s-list>li:nth-child(3)
.s-list>li:nth-child(4)
style
>
head
>
<
body
>
<
section 
id="slider"
>
<
ul class
="s-list"
>
<
li>第一屏
li>
<
li>第二屏
li>
<
li>第三屏
li>
<
li>第四屏
li>
ul>
section
>
<
script
>
function
slider( id )
//開始
varsliderstart 
=function
( event )
//移動
varslidermove 
=function
( event )
}else
}oul.style[
'-webkit-transform'] 
='translate3d(0px,'+
addnum +'
px,0px)';}}
//結束
varsliderend 
=function
()else
}else
if( 
this
.offsety 
<0) 
else
}

this.offsety = 0;

//

真實的切換
oul.style[
'-webkit-transform'] 
='translate3d(0px,'+
-num
*winheight +'
px,0px)';
//讓累加數值為當前頁面切換到的數值
addnum =-
num*
winheight;
}//讓最頂層的 div 處理事件，然而 ul 根據，最頂層的 div 操作來移動
oslider.addeventlistener(
'touchstart
', sliderstart);
oslider.addeventlistener(
'touchmove
', slidermove);
oslider.addeventlistener(
'touchend
', sliderend);
}slider(
'slider');
script
>
body
>
html
>

移動端上 下 左 右滑動

在移動端的上 下的移動與現實有很大的差距，分別分兩種情況，如下圖 有三個事件 上滑與下滑相似 1 判斷手指按下時的位置 touchstart startx event.touches 0 pagex starty event.touches 0 pagey 2 判斷手指抬起時的位置 touchend...

flex 實現移動端上下固定，中間滑動

如果你還在用position fixed來保持移動端頂部 下部的導航欄在全域性固定位置不動。那你可以換種方法。更簡單，方便，快捷 還不會受定位的影響。不過注意，使用flex彈性布局的話，需要將設定flex的這個盒子所依賴的父標籤的height有個固定的值，一般就是佔滿全域性height 100 大師...

Python高階 上下文管理器

上下文管理器 上下文管理器是乙個python物件，為操作提供了額外的上下文資訊。這種額外的資訊，在使用with語句初始化上下文，以及完成with塊中 的所有 時，採用可呼叫的形式。object.enter self 輸入與此物件相關的執行時上下文，如果存在的話，with語句將繫結該方法的返回值到該語...