IOS裝置上網頁中的頁面滾動效果模擬

可能咋一看不知道我說的是個啥，因為ios本來就用這功能的啊，還模擬它幹啥？先聽我說下專案背景哈

$(document).bind('touchmove', function(e) );

(function show(time)
source.animation = window.settimeout(function() 
x && $self.scrollleft($self.scrollleft() - ha(time,speedx) * aa );
y && $self.scrolltop($self.scrolltop() - ha(time,speedy) * aa ); 
show(++time);
},aa);
})(1);

函式ha：

function ha(x,maxspeed)

上面第一段**的意思是在手指離開螢幕之後要執行的乙個連續動畫，可以看到，隨著時間速度越來越慢，速度的變化由函式ha決定，一開始我用y = 1/x的速度，發現速度變化太快，動畫執行完一半就基本上等於結束了，後來就是在慢慢的蹭一秒多，縣的很不流暢。。然後就換，換成了第二個，y = -x + 100，這個效果好一點了，但是太流暢了。。刷一下飛好遠。。用aa調整靈敏度後效果還是差強人意，於是看了半天蘋果自帶的效果，發現速度在由快變慢的過程中，加速度絕對值的變化程度好像是小--大--小的乙個狀態，於是我就試著用y = x2 - 10x（具體多少忘記了）之類的函式去試，效果還好，不過還是有點快，最後我選中了四分之一圓，這個弧度**又均衡，在靈敏度調整為20後，終於實現了和ios相差無幾的滾動效果，心裡那個高興啊。。呵呵，。

由於**不長，就直接貼這裡了，簡單的api如下：

$(selecor).swipeleft(fn).swiperight(fn).swipeup(fn).swipedown(fn).tap(fn).scrollx().scrolly().scroll('xy');注意滾動和swipe會衝突，盡量避免一起使用~

jqueqy.tomtouch.js

(function($)
var events = "touchmove,tap,swiperight,swipeleft,swipeup,swipedown";
var proto = function($e,type,fn);
proto.prototype = );
}self.tempx = touch.pagex;
self.tempy = touch.pagey;}},
touchstart:function(e));
} 
},touchend:function(e));
} 
var speedx = dx / timed;
var speedy = dy / timed;
//d(self.starty + "," + touch.pagey);
self.fn.touchend &&
self.fn.touchend.call(this,); }},
handle:function()
});self.$e.bind("touchmove",self,self.touchmove);
self.$e.bind("touchstart",self,self.touchstart);
self.$e.bind("touchend",self,self.touchend);
}}; 
$.each(events.split(","),function(i,name) 
}); 
$.fn.touchscroll = function(direction),
touchend:function(e)
source.animation = window.settimeout(function() 
x && $self.scrollleft($self.scrollleft() - ha(time,speedx) * aa );
y && $self.scrolltop($self.scrolltop() - ha(time,speedy) * aa ); 
show(++time);
},aa);
})(1);
function ha(x,maxspeed)
}}); 
return $(this);
}$.fn.touchscrollx = function();
$.fn.touchscrolly = function();
})(jquery);

IOS裝置上網頁中的頁面滾動效果模擬

iOS 裝置的網頁除錯工具 Firebug

iOS 頁面滑動與標題切換顏色漸變的聯動效果例項

網頁設計中的頁面尺寸

IOS裝置上網頁中的頁面滾動效果模擬

iOS 裝置的網頁除錯工具 Firebug

iOS 頁面滑動與標題切換顏色漸變的聯動效果例項

網頁設計中的頁面尺寸

相關推薦