實現前後滾動效果 axure設計例項

2022-08-03 04:48:11 字數 2705 閱讀 7763

效果說明:

通過點選向前向後的按鈕實現某模組中的內容前後移動。這個設計可以應用在有限的空間內顯示眾多內容時候,且內容並不是非常重要的。它的缺點是由於隱藏了後面的內容,點選率肯定沒有第一屏顯示的內容點選率高,因此重要的資訊需要傳達給使用者時不宜採用此方法。

效果圖示:

實現使用到的action:

1、move panel(s) /*根據絕對座標或相對座標來移動動態面板 */

2、wait time(s) /*等待多少毫秒(ms)後再進行這個動作*/

實現思路:

1、使用到兩個動態面板,乙個動態面板用來顯示使用者看到的第一屏內容,第二個動態面板用來顯示所有的內容。這裡第二個動態面板肯定比第乙個動態面板要長。

2、動作只要在向前和向後按鈕中去設定,想讓使用者單擊時滾動,就在onclick中新增,想讓使用者滑鼠移到按鈕上時滾動,就在onmouseenter中新增。本次例子是onclick.

3、在onclick中,新增action,首先當單擊的時候要移動第二個面板中的內容,使用move panel(s)動作,移動的時候有兩個選項 "to"和「by」,這裡使用by,x軸填寫你要移動距離,如果是點選向後按鈕,這裡的距離要加上負號,如果點選的是向前按鈕,這裡填的就是正數。

4、接著使用wait time(s)動作,為了實現移動中有動感,那麼在這裡可以使用等待200ms後再向前移動一點。再向前移動一點。(你要讓使用者單擊按鈕後看到的內容的最前的那個位置)

5、最後再使用move panel(s)移動到你想讓使用者點選按鈕時看到內容的最前位置。(如我例子中,當使用者點選向後時讓他看到「以2方塊開始」的內容)

要點:

1、為了實現動作流暢,在使用者完成一次點選的時候,可以先讓介面移動一點,等待一會時間,再移動到最終的位置。

要點截圖:

圖1:使用到的動態面板

圖2:點選向右移動

圖3:點選向右移動

效果說明:

通過點選向前向後的按鈕實現某模組中的內容前後移動。這個設計可以應用在有限的空間內顯示眾多內容時候,且內容並不是非常重要的。它的缺點是由於隱藏了後面的內容,點選率肯定沒有第一屏顯示的內容點選率高,因此重要的資訊需要傳達給使用者時不宜採用此方法。

效果圖示:

實現使用到的action:

1、move panel(s) /*根據絕對座標或相對座標來移動動態面板 */

2、wait time(s) /*等待多少毫秒(ms)後再進行這個動作*/

實現思路:

1、使用到兩個動態面板,乙個動態面板用來顯示使用者看到的第一屏內容,第二個動態面板用來顯示所有的內容。這裡第二個動態面板肯定比第乙個動態面板要長。

2、動作只要在向前和向後按鈕中去設定,想讓使用者單擊時滾動,就在onclick中新增,想讓使用者滑鼠移到按鈕上時滾動,就在onmouseenter中新增。本次例子是onclick.

3、在onclick中,新增action,首先當單擊的時候要移動第二個面板中的內容,使用move panel(s)動作,移動的時候有兩個選項 "to"和「by」,這裡使用by,x軸填寫你要移動距離,如果是點選向後按鈕,這裡的距離要加上負號,如果點選的是向前按鈕,這裡填的就是正數。

4、接著使用wait time(s)動作,為了實現移動中有動感,那麼在這裡可以使用等待200ms後再向前移動一點。再向前移動一點。(你要讓使用者單擊按鈕後看到的內容的最前的那個位置)

5、最後再使用move panel(s)移動到你想讓使用者點選按鈕時看到內容的最前位置。(如我例子中,當使用者點選向後時讓他看到「以2方塊開始」的內容)

要點:

1、為了實現動作流暢,在使用者完成一次點選的時候,可以先讓介面移動一點,等待一會時間,再移動到最終的位置。

要點截圖:

圖1:使用到的動態面板

圖2:點選向右移動

圖3:點選向右移動

ScrollView 實現滾動效果

布局檔案 縱向滾動條 需要新增滾動條的內容.水平滾動條 內容 設定滾動條屬性 sethorizontalscrollbarenable false setverticalscrollbarenable false 監聽scrollview何時滑到底部 setontouchlistener activ...

實現滾動導航效果

由於近期有乙個頁面需要滾動加導航效果,以前在網上搜了乙個滑鼠滾動事件做了乙個效果,但 太冗餘,不喜歡,所以抽時間研究了一下,使用jquery 滾動監聽寫了乙個小demo,希望能幫助到有需要的朋友。如下 style type text css cont li cont ul cont menu men...

js實現垂直滾動效果

實現js的垂直滾動首先要先搞懂offsettop和scrolltop的兩個屬性offset屬性介紹 scroll屬性介紹 從以上兩篇文章中可以大致將offsettop理解為內部邊框的margin top,而scrolltop可以理解為當外部塊狀元素比內部塊狀元素高度小後,有一部分內部元素高度被遮住,...