|
|
| (35 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | <html>
| |
| − | <script>
| |
| − | $(document).ready(function(){
| |
| − | $(document).bind('mousewheel DOMMouseScroll',mouseScroll);//鼠标滚轮事件绑定
| |
| − | $(document).keydown(mouseScroll);//键盘上下事件绑定
| |
| − | var document_Height = $(window).height();
| |
| − | var document_Width = document.body.clientWidth;
| |
| − | var tag=1;
| |
| − | var tagRange=4;
| |
| − | var doscroll=true;
| |
| − | var transitionTime=700;
| |
| − | $(".ssection").css("height",document_Height);
| |
| − | $(".s1").css("height",document_Height);
| |
| − | var divHeight = $(".s1 > div").height();
| |
| − | function mouseScroll(e){
| |
| − | if(doscroll){
| |
| − | var delta = -e.originalEvent.wheelDelta || e.originalEvent.detail;//firefox用detail:下3上-3,其他用wheelDelta。
| |
| − | var keyDir = event.keyCode || e.which; //Internet Explorer/Chrome 浏览器使用 event.keyCode 取回被按下的字符，而 Netscape/Firefox/Opera 等浏览器使用 event.which。
| |
| − | if(delta > 0 || keyDir === 40){
| |
| − | if (tag<tagRange){//这里有问题！
| |
| − | tag++;
| |
| − | $(".s1 > div").css("transform","translateY(" + -(document_Height)*(tag-1) + "px)");
| |
| − | }
| |
| − | }
| |
| − | if(delta < 0 || keyDir === 38){
| |
| − | if (tag>1){
| |
| − | tag--;
| |
| − | $(".s1 > div").css("transform","translateY(" + -(document_Height)*(tag-1) + "px)");
| |
| − | }
| |
| − | }
| |
| − | doscroll = false;
| |
| − | setTimeout(function(){doscroll = true;},transitionTime);
| |
| − | }
| |
| − | }
| |
| | | | |
| − | /*$('body').on('touchmove touchstart', function (event) {
| |
| − | event.preventDefault();
| |
| − | });*/
| |
| − |
| |
| − |
| |
| − | /*Mobile Control*/
| |
| − | document.body.addEventListener('touchmove',function(ev){ev.preventDefault();},{passive:false});//passive: false 对于iOS 11.3起作用
| |
| − | document.addEventListener('touchstart',touch, false);
| |
| − | document.addEventListener('touchmove',touch, false);
| |
| − | document.addEventListener('touchend',touch, false);
| |
| − | var clientY_start,clientY,deltaY,mTop,clientY_end,moveY,mTop_changed,swipe,swipe_t1,swipe_t2,edgeStatus,swipeStatus,transition;
| |
| − | function touch (event){
| |
| − | if(doscroll){
| |
| − | var touchEvent = event || window.event;
| |
| − | var paa = document.getElementById("test");
| |
| − | switch(touchEvent.type){
| |
| − | case "touchstart":
| |
| − | clientY_start=touchEvent.touches[0].clientY;
| |
| − | mTop=parseFloat($(".s1 > div").css("transform").replace(/[^0-9\-,]/g,'').split(',')[5]);
| |
| − | if(!mTop){mTop=0;}
| |
| − | //alert($(".s1 > div").css("transform").replace(/[^0-9\-,]/g,'').split(',')[5]);
| |
| − | swipe_t1=new Date().getTime();
| |
| − | //开头结尾状态检测
| |
| − | edgeStatus=0;
| |
| − | if(mTop >= 0){edgeStatus=1;}
| |
| − | if(divHeight <= -(mTop - 17.5 - document_Height - 5)){edgeStatus=2;}
| |
| − | //alert(document_Width);
| |
| − | //$("body").css("height","calc(100% + 20px)");
| |
| − | transition=$(".s1 > div").css("transition");
| |
| − | $(".s1 > div").css("transition","none");
| |
| − | paa.innerHTML = "tag=" + tag + "touching";
| |
| − | break;
| |
| − | case "touchmove":
| |
| − |
| |
| − | clientY=touchEvent.touches[0].clientY;
| |
| − | //alert(clientY);
| |
| − | //alert(clientY_start);
| |
| − | deltaY=clientY-clientY_start;
| |
| − | //clientY_start=clientY;
| |
| − | //alert(deltaY);
| |
| − |
| |
| − | //开头结尾检测
| |
| − | swipeStatus=0;
| |
| − | if(edgeStatus){
| |
| − | if(deltaY>0){//如果下滑
| |
| − | if(edgeStatus === 1){swipeStatus=1;break;}
| |
| − | }else if(deltaY<0){//如果上滑
| |
| − | if(edgeStatus === 2){swipeStatus=1;break;}
| |
| − | }
| |
| − | }
| |
| − | swipe = mTop+deltaY;
| |
| − | $(".s1 > div").css("transform","translateY(" + swipe + "px)");
| |
| − |
| |
| − | paa.innerHTML = clientY + "px," + deltaY + "px, tag=" + tag ;
| |
| − | break;
| |
| − | case "touchend":
| |
| − |
| |
| − | $(".s1 > div").css("transition", transition);
| |
| − | if(!swipeStatus){clientY_end=touchEvent.changedTouches[0].clientY;}//检测是否滑动，与边缘有关
| |
| − | paa.innerHTML = "tag=" + tag + "removed";
| |
| − | moveY=clientY_end-clientY_start;
| |
| − | swipe_t2=new Date().getTime();
| |
| − | mTop_changed=parseFloat($(".s1 > div").css("transform").replace(/[^0-9\-,]/g,'').split(',')[5]) - mTop;
| |
| − | //alert(mTop_changed);
| |
| − | if(Math.abs(moveY)/(swipe_t2-swipe_t1)>=1.3){//多次测试得出
| |
| − | doscroll=false;
| |
| − | if(moveY>0){
| |
| − | if(tag>1){
| |
| − | tag--;
| |
| − | $(".s1 > div").css("transform","translateY(" + -(document_Height)*(tag-1) + "px)");
| |
| − | setTimeout(function(){doscroll = true;},transitionTime);
| |
| − | paa.innerHTML = "tag=" + tag;
| |
| − | }
| |
| − | }else{
| |
| − | if(tag<tagRange){
| |
| − |
| |
| − | tag++;
| |
| − | $(".s1 > div").css("transform","translateY(" + -(document_Height)*(tag-1) + "px)");
| |
| − | setTimeout(function(){doscroll = true;},transitionTime);
| |
| − | paa.innerHTML = "tag=" + tag;
| |
| − | }
| |
| − | }
| |
| − | }else{
| |
| − | doscroll=false;
| |
| − | if(Math.abs(mTop_changed)<document_Height/2){
| |
| − | $(".s1 > div").css("transform","translateY(" + -(document_Height)*(tag-1) + "px)");
| |
| − | setTimeout(function(){doscroll = true;},transitionTime);
| |
| − | }else{
| |
| − | if(moveY>0){
| |
| − | if(tag>1){
| |
| − | tag--;
| |
| − | $(".s1 > div").css("transform","translateY(" + -(document_Height)*(tag-1) + "px)");
| |
| − | setTimeout(function(){doscroll = true;},transitionTime);
| |
| − | paa.innerHTML = "tag=" + tag;
| |
| − | }
| |
| − | }else{
| |
| − | if(tag<tagRange){
| |
| − | tag++;
| |
| − | $(".s1 > div").css("transform","translateY(" + -(document_Height)*(tag-1) + "px)");
| |
| − | setTimeout(function(){doscroll = true;},transitionTime);
| |
| − | paa.innerHTML = "tag=" + tag;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | }
| |
| − | }
| |
| − | /*function amend(){//以防万一错位
| |
| − | var floor=Math.round($(".s1 > div").offset().top/document_Height);//，分别输出section height 与client height的值
| |
| − | $(".s1 > div").animate({marginTop: document_Height * floor - 1 },500,"swing");
| |
| − | }*/
| |
| − |
| |
| − |
| |
| − | }
| |
| − |
| |
| − | });
| |
| − | </script>
| |
| − | </html>
| |
