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:此方法不仅可以用于序列真播放还可以用在 后续加载中

javascript采用Broadway实现安卓视频自动播放的方法(这种坑比较多 不建议使用)

javascript采用Broadway实现安卓视频自动播放的方法
Broadway 是一个 H.264 解码器, 比jsmpge清晰度要高 使用 Emscripten 工具从 Android 的 H.264 解码器转化而成,它还针对 WebGL 做了一些优化。

1 先把mp4要转下 ffmpeg -i in.mp4 -s 500×804 -vcodec libx264 -pass 1 -coder 0 -bf 0 -flags -loop -wpredp 0 out.mp4
2 代码如下

<html>
<head>
  <link type="text/css" href="screen.css" rel="stylesheet" />
</head>
<body onload="load()">
  <script src="/moban/js/jquery.min.js"></script>
  <script type="text/javascript" src="Decoder.js"></script>
  <script type="text/javascript" src="YUVCanvas.js"></script>
  <script type="text/javascript" src="Player.js"></script>
  
  <script type="text/javascript" src="stream.js"></script>
  
  <script type="text/javascript" src="mp4.js"></script>
  
  <script type="text/javascript">
    function load() {
    var broadwaynode=$('.broadway')[0];
    var broadway = new Broadway(broadwaynode);
    broadway.play();
    }
  </script>
  

  <div class="broadway" src="mozilla_story.mp4" width="640" height="360" style="float: left; position: relative;" workers="false" render="true" webgl="auto"></div>
</body>
</html>
// 用绝对定位是为了挡住下面的调试信息
canvas{
       width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 101;
}


  var broadwaynode=$('.broadway')[0];
    var broadway = new Broadway(broadwaynode);
    broadway.play();

3 官网资料 https://github.com/mbebenita/Broadway

ps:Unrecognized option ‘wpredp’这个错误 说明 ffmpge不完整 建议用win版本

html5 textarea 写入换行的方法

html5 textarea 写入换行的方法

   <textarea id="fwe" class="selmiao" cols="30" rows="10"></textarea>
  $('#fwe').val('wwe\nffwe');

ps:必须用js的方法写入才可以 直接在html事先写好不行


     var miaoshu = $('#fwe').val();
        miaoshu = miaoshu.replace('\n', '||');
        miaoshu = miaoshu.replace('\n', '||');
        miaoshu = miaoshu.replace('\n', '||');
        miaoshu = miaoshu.replace('\n', '||');

读取 然后读取并看不到\n