首页 新闻 搜索 专区 学院

如何能让这个滑屏页每到一个页面动画能重新播放一次,,我这个动画播了一次就停止了,后面就无法进行了

0
悬赏园豆:5 [已解决问题] 解决于 2016-05-21 17:04
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
<title>上下滑动</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>

<style>
    .rspimg1{
        width: 100%;
    }
</style>
<script type="text/javascript">
     $(document).ready(
        function() {
            var nowpage = 0;
            //给最大的盒子增加事件监听
            $(".container").swipe(
                {
                    swipe:function(event, direction, distance, duration, fingerCount) {
                         if(direction == "up"){
                            nowpage = nowpage + 1;
                         }else if(direction == "down"){
                            nowpage = nowpage - 1;
                         }

                         if(nowpage > 2){
                            nowpage = 2;
                         }

                         if(nowpage < 0){
                            nowpage = 0;
                         }

                        $(".container").animate({"top":nowpage * -100 + "%"},400);

                        $(".page").eq(nowpage).addClass("cur").siblings().removeClass("cur");
                    }
                }
            );
        }
    );
</script>
</head>
<body onmousewheel="return false;">
<!--效果html开始-->
<div class="container">
  <div class="page page0 cur">
                 <div class="fade_animation2" ><img class='rspimg1' src="images/10.1.png" ondrag="return false"></div>
                 <div class="fade_animation2" ><img class='rspimg1' src="images/10.2.png" ondrag="return false"></div>
                 <div class="fade_inUp" ><img class='rspimg1' src="images/10.3.png" ondrag="return false"></div>
                 <div class="fade_inUp" ><img class='rspimg1' src="images/10.4.png" ondrag="return false"></div>
  </div>
  <div class="page page1">
               <div class="fade_animation2" ><img class='rspimg1' src="images/11.1.png" ondrag="return false"></div>
                 <div class="fade_animation2" ><img class='rspimg1' src="images/11.2.png" ondrag="return false"></div>
  </div>
  <div class="page page2">
                <div class="fade_animation2" ><img class='rspimg1' src="images/12.1.png" ondrag="return false"></div>
                <div class="fade_animation2" ><img class='rspimg1' src="images/12.2.png" ondrag="return false"></div>
                <div class="fade_inUp" ><img class='rspimg1' src="images/12.3.png" ondrag="return false"></div>
                <div class="fade_inUp" ><img class='rspimg1' src="images/12.4.png" ondrag="return false"></div>
  </div>

</div>
<!--效果html结束-->
<script type="text/javascript">
            /* $(document).ready(function(){
               alert($(window).height()); //浏览器当前窗口可视区域高度
              })*/
        function browserRedirect() {
            var sUserAgent = navigator.userAgent.toLowerCase();
            var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
            var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
            var bIsMidp = sUserAgent.match(/midp/i) == "midp";
            var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
            var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
            var bIsAndroid = sUserAgent.match(/android/i) == "android";
            var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
            var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
            var height=window.screen.Height;
            if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                //alert("phone");
            } else if ($(window).height()==590) {
                $('.container .page').css("width","355px").css("margin","0 auto");
                $('.p-ct').css("margin","0 auto");
                $(".pic1").css("width","50%");
                $(".back").css("width","11%");
            }else{
                //alert("pc");
                $('.container .page').css("width","410px").css("margin","0 auto");
                $('.p-ct').css("margin","0 auto");
                $(".pic1").css("width","50%");
                $(".back").css("width","11%");
            }
        }

        browserRedirect();
</script>
</body>
</html>
@charset "utf-8";
/*科e互联特效基本框架CSS*/
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input {margin:0;padding:0;-webkit-text-size-adjust: none}
h1, h2, h3, h4, h5, h6{font-size:36px;}
body>div{margin:0 auto}
div {text-align:left}
a img {border:0}
ul, ol, li {list-style-type:none;vertical-align:0}
a {outline-style:none;color:#535353;text-decoration:none}
a:hover { color: #D40000; text-decoration: none}
.clear{height:0; overflow:hidden; clear:both}
.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top,  #ed1c24,  #A51715);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317'); font-size:14px!important;}
}
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top,  #c9151b,  #a11115); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}
.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
.keTitle{ height: 60px; line-height: 60px; font-size: 28px; font-family: '微软雅黑'; color: #FFF; text-align: center; background: url(../images/bodyBg1.gif) repeat-x left bottom; font-weight: normal; position: absolute; width: 100%; left: 0; top: 0; z-index: 999; padding: 0px 0px 8px; opacity:0.8; }
.keBottom{ color: #FFF; height: 60px; text-align: center; background: url(../images/bodyBg2.gif) repeat-x left top; position: absolute; width: 100%; left: 0; bottom: 0; z-index: 999; font: 18px/60px "微软雅黑"; padding: 3px 0px 5px; opacity:0.8;}
.keBottom a,.keBottom a:hover{color:#fff;}
/*科e互联特效基本框架CSS结束,应用特效时,以上样式可删除*/
/* 效果CSS开始 */
* { margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
.container { width: 100%; height: 100%; position: absolute; left: 0; top: 0%; }
.container .page { height: 100%; position: relative; color:#fff;text-align:center; }
.container .page h1{padding-top:120px; line-height:50px; display:block}
/* .container .page0 { background-color: blue; }
.container .page1 { background-color:#93F; }
.container .page2 { background-color:#F90; }
.container .page3 { background-color: green; }
.container .page4 { background-color: tomato; } */
.container .page1 img.no1 { position: absolute; left: 10px; top: 50px; -webkit-transition: all 1s ease 0s; }
.container .page1.cur img.no1 { -webkit-transform: rotate(720deg); }
.container .page1 img.no2 { position: absolute; left: 600px; top: 50px; -webkit-transition: all 1s ease 2s; }
.container .page1.cur img.no2 { left: 30px; top: 100px; -webkit-transform: rotate(720deg); }
.xiangxiatishi { position: fixed; bottom: 20px; left: 50%; -webkit-transform: translateX(-50%); -webkit-animation: dong 1s linear 0s infinite alternate; }
@-webkit-keyframes dong {  from {
bottom:20px;
}
to { bottom: 60px; }
}
/* 效果CSS结束 */
/*动画 */
@charset "utf-8";
/* CSS Document */


/*弹跳进入*/
.fade_bounceInDown{
    -webkit-animation:bounceInDown 1s .2s ease both;
    -moz-animation:bounceInDown 1s .2s ease both;}
@-webkit-keyframes bounceInDown{
    0%{opacity:0;
    -webkit-transform:translateY(-2000px)}
    60%{opacity:1;
    -webkit-transform:translateY(30px)}
    80%{-webkit-transform:translateY(-10px)}
    100%{-webkit-transform:translateY(0)}
}
@-moz-keyframes bounceInDown{
    0%{opacity:0;
    -moz-transform:translateY(-2000px)}
    60%{opacity:1;
    -moz-transform:translateY(30px)}
    80%{-moz-transform:translateY(-10px)}
    100%{-moz-transform:translateY(0)}
}
/*下方淡出*/
.fade_animation{
    -webkit-animation:fadeInUp 1s .2s ease both;
    -moz-animation:fadeInUp 1s .2s ease both;
}
.fade_inUp2{
    -webkit-animation:fadeInUp 1s 1.2s ease both;
    -moz-animation:fadeInUp 1s 1.2s ease both;
}
.fade_inUp3{
    -webkit-animation:fadeInUp 1s 2.8s ease both;
    -moz-animation:fadeInUp 1s 2.8s ease both;
}
.fade_inUp{
    -webkit-animation:fadeInUp 1s 2s ease both;
    -moz-animation:fadeInUp 1s 2s ease both;
}
@-webkit-keyframes fadeInUp{
    0%{opacity:0;
    -webkit-transform:translateY(20px)}
    100%{opacity:1;
    -webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInUp{
    0%{opacity:0;
    -moz-transform:translateY(20px)}
    100%{opacity:1;
    -moz-transform:translateY(0)}
}
/*上方淡出*/
.page .fade_animation2{
    -webkit-animation:fadeInDown 1s 1s ease both;
    -moz-animation:fadeInDown 1s 1s ease both;
}
@-webkit-keyframes fadeInDown{
    0%{opacity:0;
    -webkit-transform:translateY(-20px)}
    100%{opacity:1;
    -webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDown{
    0%{opacity:0;
    -moz-transform:translateY(-20px)}
    100%{opacity:1;
    -moz-transform:translateY(0)}
}
/*左边淡出*/
.fadeInLeft{
-webkit-animation:fadeInLeftBig 1s .1s ease both;
-moz-animation:fadeInLeftBig 1s .1s ease both;}
.fadeInLeft2{
-webkit-animation:fadeInLeftBig 1s 1s ease both;
-moz-animation:fadeInLeftBig 1s 1s ease both;}
.fadeInLeft3{
-webkit-animation:fadeInLeftBig 1s 1.8s ease both;
-moz-animation:fadeInLeftBig 1s 1.8s ease both;}
@-webkit-keyframes fadeInLeftBig{
    0%{opacity:0;
    -webkit-transform:translateX(-2000px)}
    100%{opacity:1;
    -webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInLeftBig{
    0%{opacity:0;
    -moz-transform:translateX(-2000px)}
    100%{opacity:1;
    -moz-transform:translateX(0)}
}
/*右边淡出*/
.fadeInRight{
-webkit-animation:fadeInRightBig 1s .4s ease both;
-moz-animation:fadeInRightBig 1s .4s ease both;}
.fadeInRight2{
-webkit-animation:fadeInRightBig 1s 1.4s ease both;
-moz-animation:fadeInRightBig 1s 1.4s ease both;}
.fadeInRight3{
-webkit-animation:fadeInRightBig 1s 2.4s ease both;
-moz-animation:fadeInRightBig 1s 2.4s ease both;}
@-webkit-keyframes fadeInRightBig{
    0%{opacity:0;
    -webkit-transform:translateX(2000px)}
    100%{opacity:1;
    -webkit-transform:translateX(0)}
}
@-moz-keyframes fadeInRightBig{
    0%{opacity:0;
    -moz-transform:translateX(2000px)}
    100%{opacity:1;
    -moz-transform:translateX(0)}
}


/*旋转进入*/
.faderRotateIn{
    -webkit-animation:rotateIn 1s 1.5s ease both;
    -moz-animation:rotateIn 1s 1.5s ease both;}
@-webkit-keyframes rotateIn{
    0%{-webkit-transform-origin:center center;
    -webkit-transform:rotate(-200deg);
    opacity:0}
    100%{-webkit-transform-origin:center center;
    -webkit-transform:rotate(0);
    opacity:1}
}
@-moz-keyframes rotateIn{
    0%{-moz-transform-origin:center center;
    -moz-transform:rotate(-200deg);
    opacity:0}
    100%{-moz-transform-origin:center center;
    -moz-transform:rotate(0);
    opacity:1}
}
/*左边旋转进入*/
.faderRotateInDownLeft{
-webkit-animation:rotateInDownLeft 1s .8s ease both;
-moz-animation:rotateInDownLeft 1s .8s ease both;}
@-webkit-keyframes rotateInDownLeft{
    0%{-webkit-transform-origin:left bottom;
    -webkit-transform:rotate(-90deg);
    opacity:0}
    100%{-webkit-transform-origin:left bottom;
    -webkit-transform:rotate(0);
    opacity:1}
}
@-moz-keyframes rotateInDownLeft{
    0%{-moz-transform-origin:left bottom;
    -moz-transform:rotate(-90deg);
    opacity:0}
    100%{-moz-transform-origin:left bottom;
    -moz-transform:rotate(0);
    opacity:1}
}
/*缩放*/
.faderbounceIn{
    -webkit-animation:bounceIn 1s .8s ease both;
    -moz-animation:bounceIn 1s .8s ease both;
}
@-webkit-keyframes bounceIn{
    0%{opacity:0;
    -webkit-transform:scale(.3)}
    50%{opacity:1;
    -webkit-transform:scale(1.05)}
    70%{-webkit-transform:scale(.9)}
    100%{-webkit-transform:scale(1)}
}
@-moz-keyframes bounceIn{
    0%{opacity:0;
    -moz-transform:scale(.3)}
    50%{opacity:1;
    -moz-transform:scale(1.05)}
    70%{-moz-transform:scale(.9)}
    100%{-moz-transform:scale(1)}
}
//jquery.touchSwipe.min.js
(function(a){if(typeof define==="function"&&define.amd&&define.amd.jQuery){define(["jquery"],a)}else{a(jQuery)}}(function(f){var p="left",o="right",e="up",x="down",c="in",z="out",m="none",s="auto",l="swipe",t="pinch",A="tap",j="doubletap",b="longtap",y="hold",D="horizontal",u="vertical",i="all",r=10,g="start",k="move",h="end",q="cancel",a="ontouchstart" in window,v=window.navigator.msPointerEnabled&&!window.navigator.pointerEnabled,d=window.navigator.pointerEnabled||window.navigator.msPointerEnabled,B="TouchSwipe";var n={fingers:1,threshold:75,cancelThreshold:null,pinchThreshold:20,maxTimeThreshold:null,fingerReleaseThreshold:250,longTapThreshold:500,doubleTapThreshold:200,swipe:null,swipeLeft:null,swipeRight:null,swipeUp:null,swipeDown:null,swipeStatus:null,pinchIn:null,pinchOut:null,pinchStatus:null,click:null,tap:null,doubleTap:null,longTap:null,hold:null,triggerOnTouchEnd:true,triggerOnTouchLeave:false,allowPageScroll:"auto",fallbackToMouseEvents:true,excludedElements:"label, button, input, select, textarea, a, .noSwipe"};f.fn.swipe=function(G){var F=f(this),E=F.data(B);if(E&&typeof G==="string"){if(E[G]){return E[G].apply(this,Array.prototype.slice.call(arguments,1))}else{f.error("Method "+G+" does not exist on jQuery.swipe")}}else{if(!E&&(typeof G==="object"||!G)){return w.apply(this,arguments)}}return F};f.fn.swipe.defaults=n;f.fn.swipe.phases={PHASE_START:g,PHASE_MOVE:k,PHASE_END:h,PHASE_CANCEL:q};f.fn.swipe.directions={LEFT:p,RIGHT:o,UP:e,DOWN:x,IN:c,OUT:z};f.fn.swipe.pageScroll={NONE:m,HORIZONTAL:D,VERTICAL:u,AUTO:s};f.fn.swipe.fingers={ONE:1,TWO:2,THREE:3,ALL:i};function w(E){if(E&&(E.allowPageScroll===undefined&&(E.swipe!==undefined||E.swipeStatus!==undefined))){E.allowPageScroll=m}if(E.click!==undefined&&E.tap===undefined){E.tap=E.click}if(!E){E={}}E=f.extend({},f.fn.swipe.defaults,E);return this.each(function(){var G=f(this);var F=G.data(B);if(!F){F=new C(this,E);G.data(B,F)}})}function C(a4,av){var az=(a||d||!av.fallbackToMouseEvents),J=az?(d?(v?"MSPointerDown":"pointerdown"):"touchstart"):"mousedown",ay=az?(d?(v?"MSPointerMove":"pointermove"):"touchmove"):"mousemove",U=az?(d?(v?"MSPointerUp":"pointerup"):"touchend"):"mouseup",S=az?null:"mouseleave",aD=(d?(v?"MSPointerCancel":"pointercancel"):"touchcancel");var ag=0,aP=null,ab=0,a1=0,aZ=0,G=1,aq=0,aJ=0,M=null;var aR=f(a4);var Z="start";var W=0;var aQ=null;var T=0,a2=0,a5=0,ad=0,N=0;var aW=null,af=null;try{aR.bind(J,aN);aR.bind(aD,a9)}catch(ak){f.error("events not supported "+J+","+aD+" on jQuery.swipe")}this.enable=function(){aR.bind(J,aN);aR.bind(aD,a9);return aR};this.disable=function(){aK();return aR};this.destroy=function(){aK();aR.data(B,null);return aR};this.option=function(bc,bb){if(av[bc]!==undefined){if(bb===undefined){return av[bc]}else{av[bc]=bb}}else{f.error("Option "+bc+" does not exist on jQuery.swipe.options")}return null};function aN(bd){if(aB()){return}if(f(bd.target).closest(av.excludedElements,aR).length>0){return}var be=bd.originalEvent?bd.originalEvent:bd;var bc,bb=a?be.touches[0]:be;Z=g;if(a){W=be.touches.length}else{bd.preventDefault()}ag=0;aP=null;aJ=null;ab=0;a1=0;aZ=0;G=1;aq=0;aQ=aj();M=aa();R();if(!a||(W===av.fingers||av.fingers===i)||aX()){ai(0,bb);T=at();if(W==2){ai(1,be.touches[1]);a1=aZ=au(aQ[0].start,aQ[1].start)}if(av.swipeStatus||av.pinchStatus){bc=O(be,Z)}}else{bc=false}if(bc===false){Z=q;O(be,Z);return bc}else{if(av.hold){af=setTimeout(f.proxy(function(){aR.trigger("hold",[be.target]);if(av.hold){bc=av.hold.call(aR,be,be.target)}},this),av.longTapThreshold)}ao(true)}return null}function a3(be){var bh=be.originalEvent?be.originalEvent:be;if(Z===h||Z===q||am()){return}var bd,bc=a?bh.touches[0]:bh;var bf=aH(bc);a2=at();if(a){W=bh.touches.length}if(av.hold){clearTimeout(af)}Z=k;if(W==2){if(a1==0){ai(1,bh.touches[1]);a1=aZ=au(aQ[0].start,aQ[1].start)}else{aH(bh.touches[1]);aZ=au(aQ[0].end,aQ[1].end);aJ=ar(aQ[0].end,aQ[1].end)}G=a7(a1,aZ);aq=Math.abs(a1-aZ)}if((W===av.fingers||av.fingers===i)||!a||aX()){aP=aL(bf.start,bf.end);al(be,aP);ag=aS(bf.start,bf.end);ab=aM();aI(aP,ag);if(av.swipeStatus||av.pinchStatus){bd=O(bh,Z)}if(!av.triggerOnTouchEnd||av.triggerOnTouchLeave){var bb=true;if(av.triggerOnTouchLeave){var bg=aY(this);bb=E(bf.end,bg)}if(!av.triggerOnTouchEnd&&bb){Z=aC(k)}else{if(av.triggerOnTouchLeave&&!bb){Z=aC(h)}}if(Z==q||Z==h){O(bh,Z)}}}else{Z=q;O(bh,Z)}if(bd===false){Z=q;O(bh,Z)}}function L(bb){var bc=bb.originalEvent;if(a){if(bc.touches.length>0){F();return true}}if(am()){W=ad}a2=at();ab=aM();if(ba()||!an()){Z=q;O(bc,Z)}else{if(av.triggerOnTouchEnd||(av.triggerOnTouchEnd==false&&Z===k)){bb.preventDefault();Z=h;O(bc,Z)}else{if(!av.triggerOnTouchEnd&&a6()){Z=h;aF(bc,Z,A)}else{if(Z===k){Z=q;O(bc,Z)}}}}ao(false);return null}function a9(){W=0;a2=0;T=0;a1=0;aZ=0;G=1;R();ao(false)}function K(bb){var bc=bb.originalEvent;if(av.triggerOnTouchLeave){Z=aC(h);O(bc,Z)}}function aK(){aR.unbind(J,aN);aR.unbind(aD,a9);aR.unbind(ay,a3);aR.unbind(U,L);if(S){aR.unbind(S,K)}ao(false)}function aC(bf){var be=bf;var bd=aA();var bc=an();var bb=ba();if(!bd||bb){be=q}else{if(bc&&bf==k&&(!av.triggerOnTouchEnd||av.triggerOnTouchLeave)){be=h}else{if(!bc&&bf==h&&av.triggerOnTouchLeave){be=q}}}return be}function O(bd,bb){var bc=undefined;if(I()||V()){bc=aF(bd,bb,l)}else{if((P()||aX())&&bc!==false){bc=aF(bd,bb,t)}}if(aG()&&bc!==false){bc=aF(bd,bb,j)}else{if(ap()&&bc!==false){bc=aF(bd,bb,b)}else{if(ah()&&bc!==false){bc=aF(bd,bb,A)}}}if(bb===q){a9(bd)}if(bb===h){if(a){if(bd.touches.length==0){a9(bd)}}else{a9(bd)}}return bc}function aF(be,bb,bd){var bc=undefined;if(bd==l){aR.trigger("swipeStatus",[bb,aP||null,ag||0,ab||0,W,aQ]);if(av.swipeStatus){bc=av.swipeStatus.call(aR,be,bb,aP||null,ag||0,ab||0,W,aQ);if(bc===false){return false}}if(bb==h&&aV()){aR.trigger("swipe",[aP,ag,ab,W,aQ]);if(av.swipe){bc=av.swipe.call(aR,be,aP,ag,ab,W,aQ);if(bc===false){return false}}switch(aP){case p:aR.trigger("swipeLeft",[aP,ag,ab,W,aQ]);if(av.swipeLeft){bc=av.swipeLeft.call(aR,be,aP,ag,ab,W,aQ)}break;case o:aR.trigger("swipeRight",[aP,ag,ab,W,aQ]);if(av.swipeRight){bc=av.swipeRight.call(aR,be,aP,ag,ab,W,aQ)}break;case e:aR.trigger("swipeUp",[aP,ag,ab,W,aQ]);if(av.swipeUp){bc=av.swipeUp.call(aR,be,aP,ag,ab,W,aQ)}break;case x:aR.trigger("swipeDown",[aP,ag,ab,W,aQ]);if(av.swipeDown){bc=av.swipeDown.call(aR,be,aP,ag,ab,W,aQ)}break}}}if(bd==t){aR.trigger("pinchStatus",[bb,aJ||null,aq||0,ab||0,W,G,aQ]);if(av.pinchStatus){bc=av.pinchStatus.call(aR,be,bb,aJ||null,aq||0,ab||0,W,G,aQ);if(bc===false){return false}}if(bb==h&&a8()){switch(aJ){case c:aR.trigger("pinchIn",[aJ||null,aq||0,ab||0,W,G,aQ]);if(av.pinchIn){bc=av.pinchIn.call(aR,be,aJ||null,aq||0,ab||0,W,G,aQ)}break;case z:aR.trigger("pinchOut",[aJ||null,aq||0,ab||0,W,G,aQ]);if(av.pinchOut){bc=av.pinchOut.call(aR,be,aJ||null,aq||0,ab||0,W,G,aQ)}break}}}if(bd==A){if(bb===q||bb===h){clearTimeout(aW);clearTimeout(af);if(Y()&&!H()){N=at();aW=setTimeout(f.proxy(function(){N=null;aR.trigger("tap",[be.target]);if(av.tap){bc=av.tap.call(aR,be,be.target)}},this),av.doubleTapThreshold)}else{N=null;aR.trigger("tap",[be.target]);if(av.tap){bc=av.tap.call(aR,be,be.target)}}}}else{if(bd==j){if(bb===q||bb===h){clearTimeout(aW);N=null;aR.trigger("doubletap",[be.target]);if(av.doubleTap){bc=av.doubleTap.call(aR,be,be.target)}}}else{if(bd==b){if(bb===q||bb===h){clearTimeout(aW);N=null;aR.trigger("longtap",[be.target]);if(av.longTap){bc=av.longTap.call(aR,be,be.target)}}}}}return bc}function an(){var bb=true;if(av.threshold!==null){bb=ag>=av.threshold}return bb}function ba(){var bb=false;if(av.cancelThreshold!==null&&aP!==null){bb=(aT(aP)-ag)>=av.cancelThreshold}return bb}function ae(){if(av.pinchThreshold!==null){return aq>=av.pinchThreshold}return true}function aA(){var bb;if(av.maxTimeThreshold){if(ab>=av.maxTimeThreshold){bb=false}else{bb=true}}else{bb=true}return bb}function al(bb,bc){if(av.allowPageScroll===m||aX()){bb.preventDefault()}else{var bd=av.allowPageScroll===s;switch(bc){case p:if((av.swipeLeft&&bd)||(!bd&&av.allowPageScroll!=D)){bb.preventDefault()}break;case o:if((av.swipeRight&&bd)||(!bd&&av.allowPageScroll!=D)){bb.preventDefault()}break;case e:if((av.swipeUp&&bd)||(!bd&&av.allowPageScroll!=u)){bb.preventDefault()}break;case x:if((av.swipeDown&&bd)||(!bd&&av.allowPageScroll!=u)){bb.preventDefault()}break}}}function a8(){var bc=aO();var bb=X();var bd=ae();return bc&&bb&&bd}function aX(){return !!(av.pinchStatus||av.pinchIn||av.pinchOut)}function P(){return !!(a8()&&aX())}function aV(){var be=aA();var bg=an();var bd=aO();var bb=X();var bc=ba();var bf=!bc&&bb&&bd&&bg&&be;return bf}function V(){return !!(av.swipe||av.swipeStatus||av.swipeLeft||av.swipeRight||av.swipeUp||av.swipeDown)}function I(){return !!(aV()&&V())}function aO(){return((W===av.fingers||av.fingers===i)||!a)}function X(){return aQ[0].end.x!==0}function a6(){return !!(av.tap)}function Y(){return !!(av.doubleTap)}function aU(){return !!(av.longTap)}function Q(){if(N==null){return false}var bb=at();return(Y()&&((bb-N)<=av.doubleTapThreshold))}function H(){return Q()}function ax(){return((W===1||!a)&&(isNaN(ag)||ag<av.threshold))}function a0(){return((ab>av.longTapThreshold)&&(ag<r))}function ah(){return !!(ax()&&a6())}function aG(){return !!(Q()&&Y())}function ap(){return !!(a0()&&aU())}function F(){a5=at();ad=event.touches.length+1}function R(){a5=0;ad=0}function am(){var bb=false;if(a5){var bc=at()-a5;if(bc<=av.fingerReleaseThreshold){bb=true}}return bb}function aB(){return !!(aR.data(B+"_intouch")===true)}function ao(bb){if(bb===true){aR.bind(ay,a3);aR.bind(U,L);if(S){aR.bind(S,K)}}else{aR.unbind(ay,a3,false);aR.unbind(U,L,false);if(S){aR.unbind(S,K,false)}}aR.data(B+"_intouch",bb===true)}function ai(bc,bb){var bd=bb.identifier!==undefined?bb.identifier:0;aQ[bc].identifier=bd;aQ[bc].start.x=aQ[bc].end.x=bb.pageX||bb.clientX;aQ[bc].start.y=aQ[bc].end.y=bb.pageY||bb.clientY;return aQ[bc]}function aH(bb){var bd=bb.identifier!==undefined?bb.identifier:0;var bc=ac(bd);bc.end.x=bb.pageX||bb.clientX;bc.end.y=bb.pageY||bb.clientY;return bc}function ac(bc){for(var bb=0;bb<aQ.length;bb++){if(aQ[bb].identifier==bc){return aQ[bb]}}}function aj(){var bb=[];for(var bc=0;bc<=5;bc++){bb.push({start:{x:0,y:0},end:{x:0,y:0},identifier:0})}return bb}function aI(bb,bc){bc=Math.max(bc,aT(bb));M[bb].distance=bc}function aT(bb){if(M[bb]){return M[bb].distance}return undefined}function aa(){var bb={};bb[p]=aw(p);bb[o]=aw(o);bb[e]=aw(e);bb[x]=aw(x);return bb}function aw(bb){return{direction:bb,distance:0}}function aM(){return a2-T}function au(be,bd){var bc=Math.abs(be.x-bd.x);var bb=Math.abs(be.y-bd.y);return Math.round(Math.sqrt(bc*bc+bb*bb))}function a7(bb,bc){var bd=(bc/bb)*1;return bd.toFixed(2)}function ar(){if(G<1){return z}else{return c}}function aS(bc,bb){return Math.round(Math.sqrt(Math.pow(bb.x-bc.x,2)+Math.pow(bb.y-bc.y,2)))}function aE(be,bc){var bb=be.x-bc.x;var bg=bc.y-be.y;var bd=Math.atan2(bg,bb);var bf=Math.round(bd*180/Math.PI);if(bf<0){bf=360-Math.abs(bf)}return bf}function aL(bc,bb){var bd=aE(bc,bb);if((bd<=45)&&(bd>=0)){return p}else{if((bd<=360)&&(bd>=315)){return p}else{if((bd>=135)&&(bd<=225)){return o}else{if((bd>45)&&(bd<135)){return x}else{return e}}}}}function at(){var bb=new Date();return bb.getTime()}function aY(bb){bb=f(bb);var bd=bb.offset();var bc={left:bd.left,right:bd.left+bb.outerWidth(),top:bd.top,bottom:bd.top+bb.outerHeight()};return bc}function E(bb,bc){return(bb.x>bc.left&&bb.x<bc.right&&bb.y>bc.top&&bb.y<bc.bottom)}}}));
像风一样自由~~~的主页 像风一样自由~~~ | 初学一级 | 园豆:48
提问于:2016-05-19 13:34
< >
分享
最佳答案
0

你可以根据你container的top值,判断来写事件,当值不同的时候    在处罚你的动画效果  就可以了

收获园豆:5
Cuntain√ | 菜鸟二级 |园豆:332 | 2016-05-19 15:24
   var temp=$(".container").css("top");
                         alert(temp);
                        if (temp==0) {
                            alert(222);
                          $(".rspimg1").addClass("fade_animation2");
                        };

这是写错了吗,没有效果

像风一样自由~~~ | 园豆:48 (初学一级) | 2016-05-19 15:45

@像风一样自由~~~: var temp=parseInt($(".container").css("top"));你alert出来的是什么,条件写的是什么,明显代码错了

Cuntain√ | 园豆:332 (菜鸟二级) | 2016-05-19 16:03

@Cuntain√: 

  var temp=parseInt($(".container").css("top"))
                         console.log(temp);
                            //alert(temp);
                        if (temp==-568) {
                          $(".a").addClass("fade_animation2");
                          $(".b").addClass("fade_inUp");
                        };
                         if (temp==0) {
                          $(".a").addClass("fade_animation2");
                          $(".b").addClass("fade_inUp");
                        };

这个样子?

像风一样自由~~~ | 园豆:48 (初学一级) | 2016-05-19 16:16

@Cuntain√: 行不通

像风一样自由~~~ | 园豆:48 (初学一级) | 2016-05-19 16:24

@像风一样自由~~~: 哪里不通?alert有效果吗

Cuntain√ | 园豆:332 (菜鸟二级) | 2016-05-19 16:31

@Cuntain√: 

   if (temp==0) {
                            alert(1);
                          $(".a").addClass("fade_animation2");
                          $(".b").addClass("fade_inUp");
                        };
                        if (temp==-($(window).height())) {
                            alert(2);
                          $(".c").addClass("fade_animation");
                          $(".d").addClass("fade_animation2");
                        };

这样写可以,,但是返回滑动的时候动画又没有任何效果了,这是为什么

像风一样自由~~~ | 园豆:48 (初学一级) | 2016-05-19 16:33

@像风一样自由~~~: 你第一次滑动过去的时候,你添加class了,第二次的时候class还在  所以没有动画,

if (temp==0) { alert(1);

$(".a").addClass("fade_animation2");

$(".b").addClass("fade_inUp"); };

$(".c").removeClass("fade_animation");

$(".d").removeClass("fade_animation2"); };

if (temp==-($(window).height())) { alert(2);

$(".a").removeClass("fade_animation2");

$(".b").removeClass("fade_inUp"); };

$(".c").addClass("fade_animation");

$(".d").addClass("fade_animation2"); };

我这个是就你的问题回答的,当满足条件的时候,addClass,不满足这个条件的时候,记得删除,就可以了

Cuntain√ | 园豆:332 (菜鸟二级) | 2016-05-19 16:37

@像风一样自由~~~: 就是每次滑动到那得时候, 添加一次,划过去了  删除,再划过来的时候  再添加,大概就是这个样子,这和tab切换  基本一个道理

Cuntain√ | 园豆:332 (菜鸟二级) | 2016-05-19 16:40

@Cuntain√: 

像风一样自由~~~ | 园豆:48 (初学一级) | 2016-05-19 16:47

@Cuntain√: 多了俩括号,而且去掉后也没有效果

像风一样自由~~~ | 园豆:48 (初学一级) | 2016-05-19 16:48

括号多了,你去掉,就是每次滑动到那的时候, 添加一次,划过去了  删除,再划过来的时候  再添加,大概就是这个样子,这和tab切换  基本一个道理 ,你再好好想想

Cuntain√ | 园豆:332 (菜鸟二级) | 2016-05-19 16:53

@Cuntain√: 你知不知道如何控制它的滑动次数呀,就是滑到第三次,temp不能累加??

像风一样自由~~~ | 园豆:48 (初学一级) | 2016-05-20 10:51

@像风一样自由~~~:这个  写if(temp>=a)的时候   temp=a  就好

Cuntain√ | 园豆:332 (菜鸟二级) | 2016-05-20 11:02
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册