今天心情不錯 那就寫寫博客吧 今天我在這里與大家分享一下手機移動端的屏幕切換的效果希望能幫助一些剛接觸js的同學
好啦 不多說，上代碼
我們先上設置一個父容器div 然后里面包含了子容器 然后給它們加上 class
我這里定義好了它們的布局 接下來我們來設置它的樣式
好 這里是先給父容器定義了樣式 然后在給子容器定義樣式
到了這里呢 基本的布局已經寫好了 然后根據你的個人喜好來給每個手機屏幕切換的背景顏色 還是在style里去添加樣式
背景顏色也寫完了 這是我隨便弄了幾個顏色 接下來我們來看看樣式寫完的效果 當然我這里是用谷歌瀏覽器打開的哦
運行打開后點擊上面的提示 如下有這樣的效果 上面我選的手機類型是iPhone6s 你可以根據的你選擇來選擇你想要的手機型號 這里默認的是第一個頁面就是上面我們定義的一個第一個<div class=page></div> 背景顏色為紅色 當然我們在參加工作之后可以根據項目要求來寫上相關的內容與樣式。
好了 我們固定頁面樣式寫完了 接下來我們就用我們的javascript來實現它的切換效果 我們用script標簽插入
我們這里先獲得所有的container 然后聲明兩個變量 start ，ent
然后給它添加兩個事件 touchstart 和touchmove 當手指放上去點擊時就觸發 和連續觸發
當然我們有點擊滑動 也要有手指離開的時候 好 我們看下面
說了這么多到底有沒我們想要的效果呢 看下面
我們剛才說了第一個默認的屏幕是紅色是吧 那下面就是：
第二個屏幕
第三個
第四個
第五個
我們這里設置的是X軸水平方向上的切換 如果我們想讓它向下切換呢 怎么弄呢 也很簡單 就直接在上面的父容器上面把h改寫成v 因為我們在樣式里設置了水平方向是h 垂直反向是v 所以我們改一下就可以 記得哦 想屏幕切換 用電腦鼠標點擊滑動在松開就可以實現效果了。 說了這么多 希望能對同學們有幫助
