jquery swiper3自定义切换效果的方法

jquery swiper3自定义切换效果的方法

      /*切换时就触发 用于做出场动画*/
            onSlideChangeStart: function(swiper) {
               $('.swiper-slide-prev .wrapslide').addClass('rotate')
            },
onTransitionEnd: function(swiper) {
              
            },
   onTransitionEnd: function(swiper) {
                // $('.wrapslide').removeClass('rotate');
            },

ps: 因为slide不方便做动画 所以里面加了个wrapslide 做动画就不冲突了 切换时间用speed控制

jquery序列帧播放

jquery序列帧播放 这个弊端就是到时候需要升级下带宽 至少10MB 保证不卡。。 ae导出序列真的时候 每秒10帧 就是代码每秒播放10张图片

 <php>
        for($i=0;$i<200;$i++){

          if($i<10){
               $ss='00'.$i;
            }else if($i>=10 && $i<100){
               $ss='0'.$i;
             }else{
                 $ss=$i;
             }
      echo'<img class="bg noshow loadimg dss" loadimg="'.$yuming.'/images/1/in_00'.$ss.'.jpg?v=2" />';
         }
     for($i=200;$i<508;$i++){
        
          if($i<10){
               $ss='00'.$i;
            }else if($i>10 && $i<100){
               $ss='0'.$i;
             }else{
                 $ss=$i;
             }
      echo'<img class="bg noshow loadimg1 dss" loadimg1="'.$yuming.'/images/1/in_00'.$ss.'.jpg?v=2" />';
         }         
    </php>


/*用于后续加载的*/
function jiazaipic2() {
    var load_img1 = [];
 var loadimg1length = $('.loadimg1').length;
 if(loadimg1length==0){
        alert('你还没有设置loadimg1');
        return false;
    }
    $('.loadimg1').each(function() {
        var loadimg1 = $(this).attr('loadimg1');
        load_img1.push(loadimg1);
    })
    console.log(load_img1);
    window.imgNum1 = 0;
    var qq = -1;
    jQuery.imgpreload(load_img1, {
        each: function() {
            /*this will be called after each image loaded*/
            var status = $(this).data('loaded') ? 'success' : 'error';
            if (status == "success") {
                qq++;
                var v = (parseFloat(++imgNum1) / load_img1.length).toFixed(2);
                console.log(Math.round(v * 100) + "<sup>%</sup>");
                var loadimg1 = $('.loadimg1').eq(qq).attr('loadimg1');
                $('.loadimg1').eq(qq).attr('src', loadimg1)
            } else {
                alert('加载失败,重新刷新');
                window.location.reload();
            }
        },
        all: function() {
$('.jiazaicontainer').css('display', 'none');
            console.log('全部加载完成');
            /*这个地方还是要巩固下 如果万一上面有个失败*/
            $('.loadimg1').each(function() {
                var loadimg1 = $(this).attr('loadimg1');
                $(this).attr('src', loadimg1);
            })
        }
    });
}
 jiazaipic2();

var ii=-1;
  xuliezhenanim();
   function xuliezhenanim() {
    setTimeout(function() {
        if (ii < xuliezhennum) {
            ii++;
            if (ii > 3) {
                $('.dss').eq(ii - 1).css('display', 'none');
            }
            var img = $('.dss').eq(ii).attr('src');
            console.log(img);
            if (iskong(img)) {
                
                $('.jiazaicontainer').css('display', 'block');
                console.log('还没加载完' + ii);
            } else {
                xuliezhenanim();
                $('.dss').eq(ii).css('display', 'block');
            }
        } else {}
    }, 60)
}

ps:此方法不仅可以用于序列真播放还可以用在 后续加载中

 jQuery 触发事件 移动端和pc端的区别

 jQuery 触发事件 移动端和pc端的区别

mousedown	event.pageX
mousemove	event.pageX
mouseup	          event.pageX
touchstart	event.originalEvent.touches[0].pageX  &  event.originalEvent.changedTouches[0].pageX  &  event.originalEvent.targetTouches[0].pageX
touchmove	event.originalEvent.touches[0].pageX  &  event.originalEvent.changedTouches[0].pageX  &  event.originalEvent.targetTouches[0].pageX
touchend	event.originalEvent.changedTouches[0].pageX  &  event.originalEvent.targetTouches[0].pageX

  其中关于touch触摸事件的触摸列表:

    touches :当前位于屏幕上的所有手指的一个列表。
    targetTouches :位于当前DOM元素上的手指的一个列表。
    changedTouches :涉及当前事件的手指的一个列表。

jquery判断手指滑动方向

jquery判断手指滑动方向

/*判断哪个滑动方向还是自己改下 要么上下 要么左右*/
var startX;
var startY;
$(“.shanghua”).on(“touchstart”, function(e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
startX = e.originalEvent.changedTouches[0].pageX;
startY = e.originalEvent.changedTouches[0].pageY;
console.log(‘startX:’ + startX);
console.log(‘startY:’ + startY);
});
$(“.shanghua”).on(“touchend”, function(e) {
// 判断默认行为是否可以被禁用
if (e.cancelable) {
// 判断默认行为是否已经被禁用
if (!e.defaultPrevented) {
e.preventDefault();
}
}
var moveEndX = e.originalEvent.changedTouches[0].pageX;
var moveEndY = e.originalEvent.changedTouches[0].pageY;
console.log(‘moveEndX:’ + moveEndX);
console.log(‘moveEndY:’ + moveEndY);
var X = moveEndX – startX;
var Y = moveEndY – startY;
//下滑
if (Y > 0) {
alert(‘下滑’);
}
//上滑
else if (Y < 0) { alert('上滑'); } });