客戶端元素滑動和滾動效果實現

最近一直在搞一些有關元素動態展示的功能，這麼做是為了增加使用者的體驗，使得客戶端更加的具有和使用者之間的互動作用；

1，介紹兩種外掛程式，實現元素輪番展示和拖動元素滑動的效果；

2，外掛程式引數的介紹；

3，擴充套件功能的提出和實現；

4，一些懸而未解的問題，寫在最後希望高手指點迷津，經驗交流，小生不勝感激！

進入正題：

(1)為大家介紹兩款外掛程式，使用起來比較簡單，要是需要更高階的效果，還可以自己實現；乙個是jquery外掛程式：jcarousellite，乙個是iscroll外掛程式；官方位址分別是：

和下面就寫點自己使用過程中的一些感悟，一般網頁上實現元素的滑動或者滾動都是使用ul元素進行封裝，為什麼要這麼做？我在乙個美女空間裡發現了她寫的一篇日誌，解釋的挺不錯，在這裡我就偷一下懶，引用她的觀點了：

重組div的結構。

）iscroll中的滑動原理也是一樣的，模式也是div+div+ul+li 簡單點說：最外面的一層div可以看成是乙個顯示器，顯示器下的第乙個子元素就可以當做乙個滾動元素的box，可以看成是乙個滾動條，顯示的元素多少，是有顯示器的寬度來決定的，滾動的長短是由box的寬度來決定的；

jcarousellite實現滾動，官方文件中介紹的很詳細，這裡我就不做過多的說明；

(2)

jcarousellite引數

js**

$.fn.jcarousellite =function(o) , o || {});

iscroll 引數

iscroll4官方文件給出了5個例子，都挺經典的，有興趣的可以仔細的研讀一下；特別是pullup/down refresh 這個在手機應用中經常能看到；

this.x /this.y:判斷元素scroll left/right滑動距離可以使用this.x，這個引數是返回的結果是滑動元素li:first，距離最左邊的乙個距離，就相當於原點，scroll left ,this.x<0;scroll rigth ,this.x >0;同樣，scroll也提供了 this.y ，這個可以參考pullup/down refresh例子中的js寫法；

snap:捕獲元素，通常設定為true，這樣元素的滑動，是一屏一屏的滑動，你也可以設定成只捕獲乙個li元素，但是寫法有要求：你可以寫成「 li " or "li .a"但是」#scroller li" is wrong;

(3)

這裡有個需求：iscroll只能實現元素的單方向的滑動，不能實現像jcarousellite那樣的輪番迴圈的滑動，如果能把iscroll的滑動結合jcarousellite的迴圈展示，這該多好啊；

於是，就開始了我的工作：

1)判斷元素向左向右滑動，

2)滑動乙個元素，就把隱藏到div中的那個元素移到li元素的最後，可以直接的使用jquery操作元素，改變li布局，也可以改變li樣式position，但是，實驗證明：只改動position：left的座標，下次獲取元素的時候，使用eq()或者nth-child()方法獲取的都不是指定的元素，這裡我想到了使用refresh()；好像也沒有起作用，最後只能保險起見，先挪動position樣式，然後更改li元素的位置，這樣，不至於出現錯誤；

code：

onscrollend:function()
this.minscrollx -= 90;//alert(this.minscrollx);myscroll.refresh();
}}else if(thisx < 0)
this.maxscrollx += 90;//scrollwidth += 90;$(".scroller").css("width",scrollwidth+"px");}}
},

3)實現了，但是有個bug：每次的滑動都要先**，然後才能更換位置，這個原因是：我把置換位置的操作放到了方法onscrollend中執行了,應該放到onscrollmove中執行；而這又引發了另外的一種問題出現：滑動的時候，會閃屏，這個原因是因為每次的滑鼠onmousemover事件都相應的觸發了我寫的置換元素位置的方法；這樣，也就遇到了問題；怎樣才能在onscrollmove中完美的實現滾動；

(4)問題：

怎樣通過判斷滑鼠拖動的距離來判斷應該滑動幾個li元素；

怎樣實現向左向右的滑動，而不會出現上面提到的**；

客戶端元素滑動和滾動效果實現

Thrift 各種服務端和客戶端實現

實現迭代伺服器端和客戶端

React 伺服器端渲染和客戶端渲染效果對比

客戶端元素滑動和滾動效果實現

Thrift 各種服務端和客戶端實現

實現迭代伺服器端和客戶端

React 伺服器端渲染和客戶端渲染效果對比

相關推薦