jquery tweenmax时间轴动画

jquery tweenmax时间轴动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>{$title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <!-- Link Swiper's CSS -->
    <include file="commonheader" />
</head>

<body>
    <include file="jiazai" />
    <include file="commonmokuai" />
    <div class="showcontainer" style="display: block;">
      <div class="ddd1" style="position: absolute;left:10%;top:20%;">111111111</div>
    </div>
    <script src="{$yuming}/js/TweenMax.js"></script>
    <script src="{$yuming}/js/DrawSVGPlugin.min.js"></script>
    <include file="commonfooter" />
    <script type="text/javascript">
      var times=0;
    $(function() {
      var tl = new TimelineLite();

       var tm = new TimelineMax();
       // tm.to($('.ddd1'), 3, {left:300,delay:0,repeat: 1, yoyo: true,repeatDelay: 1,ease: Linear.easeNone});//将一个动画添加到时间轴
       // tl.add(tm);//将一个动画添加到时间轴
       // 
      tm.to($('.ddd1'), 3, {left:300,delay:0,repeatDelay: 1,ease: Linear.easeNone});//将一个动画添加到时间轴
       tl.add(tm);//将一个动画添加到时间轴
       // 
       tl.pause();

       setInterval(function(){
             times+=0.1;
             tl.progress(times);
       },200)
   

    })
    </script>
</body>

</html>

jquery trim重写

jquery trim重写

String.prototype.trim = function(char, type) {
    if (char) {
        if (type == 'left') {
            return this.replace(new RegExp('^\\' + char + '+', 'g'), '');
        } else if (type == 'right') {
            return this.replace(new RegExp('\\' + char + '+$', 'g'), '');
        }
        return this.replace(new RegExp('^\\' + char + '+|\\' + char + '+$', 'g'), '');
    }
    return this.replace(/^\s+|\s+$/g, '');
};

 str = '/Ruchee/';
    console.log(str.trim('/', 'left')); // Ruchee/

jquery 路径动画贝塞尔动画

jquery 路径动画贝塞尔动画

<!DOCTYPE html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                position: absolute;
                top: 0px;
                left: 0px;
            }
            #box{
                width: 200px;
                height: 200px;
                background: red;
            }
            #conn{
                width:20px;
                height: 20px;
                background: green;
                position: absolute;
                left:10%;
                top:10%;
            }
        </style>
    </head>
    <body>
        <div id="conn"></div>
        <script type="text/javascript" src="/youmenghengda/js/TweenMax.js" ></script>
        <script>

            TweenMax.to('#conn', 5, {bezier:[{left:"10%", top:"10%"}, {left:"30%", top:"30%"}, {left:"50%", top:"10%"}], repeat:10,yoyo:true, ease:Power1.easeInOut});
       
            
        </script>
    </body>
</html>

jquery鼠标点击穿透的解决方法

jquery鼠标点击穿透的解决方法

<div class="showcontainer" style="background:#000;display: block;"> 
    <div class="dd" style="width:20%;height:3rem;background:#F00; position: absolute;left:20%;top:10%;">
      <div class="ddd" style="width:100%;height:100%;position: absolute;left:0px;top:0px;background:#FF0"></div>
      <div class="ss" style="width:20%;height:2rem;background:#0F0;position: absolute;left:20%;top:10%;">

      </div>              
    </div>
  </div>
    $('.dd').on(START_EV, function() {
        alert('dd')
    })
    $('.ss').on(START_EV, function() {
    
        return false;
    })

点击了ss就阻止后面的代码运行了 因为穿透也是按照顺序运行的

jquery翻页turnjs简单实例

jquery翻页turnjs简单实例

<div id="flipbook">
        <div class="hard" style="background: #000; color: #FFF">1</div>
                <div class="hard" style="background: #F00;color: #FFF">2</div>
                <div style="background: #000;color: #FFF">3</div>
                <div style="background: #F00;color: #FFF">4</div>
                <div style="background: #000;color: #FFF">5</div>
                <div class="hard" style="background: #F00;color: #FFF">6</div>
                <div class="hard" style="background: #000;color: #FFF">7</div>
    </div>

  var bodywidth=$('body').width();
    var bodyheight=$('body').height();
    $("#flipbook").turn({
        width: bodywidth,
        height: bodyheight,
        autoCenter: false,
        display: "single",
    });

如果要设置双页 直接把display: “single”,注释掉

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

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


   <div class="swiper-slide">
                <div class="wrapslide bg">
                    <img class="ani bg loadimg" swiper-animate-effect="fadeInUp"  swiper-animate-duration="1s" swiper-animate-delay="0s" loadimg="{$yuming}/images/3/p3_bg.jpg" />
                    <img class="ani p3_wz1  loadimg" swiper-animate-effect="suoxiaofadeIn"  swiper-animate-duration="1s" swiper-animate-delay="0s" loadimg="{$yuming}/images/3/p3_wz1.png" />
                    <img class="ani p3_wz2  loadimg" swiper-animate-effect="suoxiaofadeIn"  swiper-animate-duration="1s" swiper-animate-delay="0.5s" loadimg="{$yuming}/images/3/p3_wz2.png" />
                </div>
            </div>
      /*切换时就触发 用于做出场动画*/
            onSlideChangeStart: function(swiper) {
               $('.swiper-slide-prev .wrapslide').addClass('rotate')
            },
onTransitionEnd: function(swiper) {
              
            },
   onTransitionEnd: function(swiper) {
                // $('.wrapslide').removeClass('rotate');
            },

ps: 因为slide不方便做动画 所以里面加了个wrapslide 做出场动画就不冲突了 入场动画bg上一定要加动画 适当的时候切换时间用speed控制(一般不用)

还有个方法就是 切换不能淡出的画 就采取自定义触摸上滑做效果 speed设置0就可以了 快速切换

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:此方法不仅可以用于序列真播放还可以用在 后续加载中 全屏最好放在长拉野 不要放在全屏的H5