|
|
| (26 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);
| + | |
| − | }
| + | |
| − | }
| + | |
| − |
| + | |
| − | /*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;
| + | |
| − | var paa = document.getElementById("test");
| + | |
| − | function touch (event){
| + | |
| − | paa.innerHTML = doscroll;
| + | |
| − | if(doscroll){
| + | |
| − | var touchEvent = event || window.event;
| + | |
| − |
| + | |
| − | 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;
| + | |
| − | deltaY=clientY-clientY_start;
| + | |
| − |
| + | |
| − | //开头结尾检测
| + | |
| − | 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;}//检测是否滑动，与边缘有关
| + | |
| − |
| + | |
| − | 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;paa.innerHTML = "removed"+doscroll;},transitionTime);
| + | |
| − | paa.innerHTML = "tag=" + tag;
| + | |
| − | }
| + | |
| − | }else{
| + | |
| − | if(tag<tagRange){
| + | |
| − | tag++;
| + | |
| − | $(".s1 > div").css("transform","translateY(" + -(document_Height)*(tag-1) + "px)");
| + | |
| − | setTimeout(function(){doscroll = true;paa.innerHTML = "removed"+doscroll;},transitionTime);
| + | |
| − | paa.innerHTML = "tag=" + tag;
| + | |
| − | }else if(tag===tagRange){
| + | |
| − | setTimeout(function(){doscroll = true;paa.innerHTML = "removed"+doscroll;},transitionTime);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }else if(Math.abs(moveY)/(swipe_t2-swipe_t1)<1.3){//!swipeStatus = false 需要排除
| + | |
| − | doscroll=false;
| + | |
| − | if(Math.abs(mTop_changed)<document_Height/2){
| + | |
| − | $(".s1 > div").css("transform","translateY(" + -(document_Height)*(tag-1) + "px)");
| + | |
| − | setTimeout(function(){doscroll = true;paa.innerHTML = "removed"+doscroll;},transitionTime);
| + | |
| − | }else{
| + | |
| − | if(moveY>0){
| + | |
| − | if(tag>1){
| + | |
| − | tag--;
| + | |
| − | $(".s1 > div").css("transform","translateY(" + -(document_Height)*(tag-1) + "px)");
| + | |
| − | setTimeout(function(){doscroll = true;paa.innerHTML = "removed"+doscroll;},transitionTime);
| + | |
| − | paa.innerHTML = "tag=" + tag;
| + | |
| − | }
| + | |
| − | }else{
| + | |
| − | if(tag<tagRange){
| + | |
| − | tag++;
| + | |
| − | $(".s1 > div").css("transform","translateY(" + -(document_Height)*(tag-1) + "px)");
| + | |
| − | setTimeout(function(){doscroll = true;paa.innerHTML = "removed"+doscroll;},transitionTime);
| + | |
| − | paa.innerHTML = "tag=" + tag;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }else{
| + | |
| − | doscroll=true;
| + | |
| − | }
| + | |
| − | paa.innerHTML = "tag=" + tag + "removed" + clientY_end;
| + | |
| − |
| + | |
| − |
| + | |
| − | }
| + | |
| − | }
| + | |
| − | }
| + | |
| − |
| + | |
| − | });
| + | |
| − | </script>
| + | |
| − | </html>
| + | |
