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

svg路径动画制作教程(目前只适应移动端)

svg路径动画制作教程(目前只适应移动端)


详细教程看https://www.w3cplus.com/svg/svg-animation-guide.html

php imagick 文字居中的方法

php imagick 文字居中的方法

  public function getwenzinfo($nickName)
    {

        $nickNamelen   = mb_strlen($nickName, 'utf-8');
        $wzallkd       = 0;
        $wzallkdlist   = array();
        $wzallkdlist[] = 0;
        $perzifulist   = array();
        for ($i = 0; $i < $nickNamelen; $i++) {
            $perzifu       = mb_substr($nickName, $i, 1, 'utf-8');
            $perzifulist[] = $perzifu;
            if (preg_match("/^[A-Za-z0-9]+$/", $perzifu) == false) {
                // echo '是中文';
                $wzkd = 26;
                $wzallkd += 26;
            } else {
                // echo '不是中文';
                $wzkd = 17;
                $wzallkd += 15;
            }
            $wzallkdlist[] = $wzkd;
        }
        /*因为字符串宽度是 字符本身宽度+字符之间的间隔-最后的字符串间隔*/
        $wzallkd=$wzallkd-2;
        array_pop($wzallkdlist);

        $wenziinfo['wzallkd']     = $wzallkd;
        $wenziinfo['wzallkdlist'] = $wzallkdlist;
        $wenziinfo['perzifulist'] = $perzifulist;

        return $wenziinfo;
    }

   $text = new \Imagick();
        $text->newImage(750, 1206, 'none');

        $text->setImageFormat('png');

        $draw1 = new \ImagickDraw();
        $draw1->setFont(__DIR__ . '/../../../Public/tianyangzhongqiu/ziti/fanzhengdahei.ttf'); //设置中文字体 可以解决中文乱码问题
        /*$draw->setTextAlignment(1);*///1  从文字的左下方开始计算的  2 从文字中下来计算  3 从文字右下来计算 默认为1
        $xingzuocolor = $this->getxingzuocolor($xingzuo);
        $draw1->setFillColor(new \ImagickPixel($xingzuocolor));
        $draw1->setFontSize(27);
        $draw1->setTextAlignment(1);
        $nickName  = '啦啊';
        $wenziinfo = $this->getwenzinfo($nickName);
      
        $wzallkd     = $wenziinfo['wzallkd'];
        $wzallkdlist = $wenziinfo['wzallkdlist'];
        $perzifulist = $wenziinfo['perzifulist'];

        $wenzizuobiao = (750 - $wzallkd) / 2;
        
        foreach ($wzallkdlist as $k => $v) {
            $wenzizuobiao += $v;
        
            $draw1->annotation($wenzizuobiao, 240, $perzifulist[$k]);
        }

        $draw1->annotation(167, 290, $chengji);

        $text->drawImage($draw1);

ps:就是先设置宽度 然后打字 就这样文字宽度我来定 就不会出错了