jquery JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦)就是有点卡

jquery JSMpeg.js 播放视频解决不用全屏也能播放(也支持自动播放哦)就是有点卡

<!DOCTYPE html>
<html>

<head>
    <title>JSMpeg Stream Client</title>
    <style type="text/css">
    html,
    body {
        background-color: #111;
        text-align: center;
    }
    </style>
</head>

<body>
    <canvas id="video-canvas"></canvas>
    <script src="/moban/js/jquery.min.js"></script>
    <script type="text/javascript" src="/jsmpeg/jsmpeg.min.js"></script>
    <script type="text/javascript">
    $(function() {
    	var canvas = document.getElementById('video-canvas');
        var player = new JSMpeg.Player('/moban/ceshi.ts', { canvas: canvas});
        player.play();

    })

    </script>
</body>

</html>

ps:ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 out.ts mp4转化成ts
具体使用说明 https://github.com/phoboslab/jsmpeg

jquery.eraser制作擦涂效果

jquery.eraser制作擦涂效果

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta charset="utf-8" />
    <title>
        canvas画图
    </title>
</head>

<body>
    <img id="redux" style="width:60%;"  src="http://www.w3school.com.cn/i/ct_html5_canvas_image.gif" />
    <script type="text/javascript" src="/moban/js/jquery.min.js"></script>
    <script type="text/javascript" src="/moban/js/jquery.eraser.js"></script>
    <script type="text/javascript">
    $(function() {
        $('#redux').eraser({
            completeRatio: .6,
            size: 20,
           completeFunction: showResetButton
        });
    })
    function showResetButton(){
    alert('刮完');
}
    </script>
</body>

</html>

ps:jquery.eraser.js源码我修改了 ctx.drawImage( this, 0, 0,width,height ); 这样就能自适应了 所以图片必须设置宽度

可以用于刮刮卡

jquery倒计时代码

jquery倒计时代码

    <span id="day_show">0天</span>
                <strong id="hour_show">0时</strong>
                <strong id="minute_show">0分</strong>
                <strong id="second_show">0秒</strong>

    timer(50);

    function timer(intDiff) {
        window.setInterval(function() {
            var day = 0,
                hour = 0,
                minute = 0,
                second = 0; //时间默认值
            if (intDiff > 0) {
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            $('#day_show').html(day + "天");
            $('#hour_show').html('<s id="h"></s>' + hour + '时');
            $('#minute_show').html('<s></s>' + minute + '分');
            $('#second_show').html('<s></s>' + second + '秒');
用于毫秒倒计时
               //countdaojishi1('haomiao_show', 99,10);
            intDiff--;
        }, 1000);
    }


注意haomiao_show是id元素





function countdaojishi1(obj, startv, endv) {
    var options = {  
        useEasing: true,
          useGrouping: false,
          separator: ',',
          decimal: '.',
    };
    var demo = new CountUp(obj, startv, endv, 0, 2.5, options);
    if (!demo.error) {  
        demo.start();
    } else {  
        console.error(demo.error);
    }
}


jquery手指触摸滑动放大图片的方法(比较靠谱的方法)

jquery手指触摸滑动放大图片的方法(比较靠谱的方法)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>touch.js demo</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script type="text/javascript" src="{$yuming}/touchjs/js/touch.min.js"></script>
    <script type="text/javascript" src="{$yuming}/touchjs/js/cat.touchjs.js"></script>
    <script type="text/javascript" src="{$yuming}/touchjs/js/jquery-1.10.2.min.js"></script>
</head>
<body>
<style>
    .tcpiccontainer{
        width:100%;
        height: 100%;
        position: absolute;
        left:0px;
        top:0px;
        z-index: 999;
        background: #000;
    }
    .tcpiccontainer img{
        width:100%;
        position: absolute;
        margin-top: 11rem;;
    }
</style>
<div class="tcpiccontainer">
    <img id="targetObj" src="http://demo.somethingwhat.com/images/flower1.jpg" />
</div>




    <script type="text/javascript">
        $(function () {
            var $targetObj = $('#targetObj');
            //初始化设置
            cat.touchjs.init($targetObj, function (left, top, scale, rotate) {
                $('#left').text(left);
                $('#top').text(top);
                $('#scale').text(scale);
                $('#rotate').text(rotate);
                $targetObj.css({
                    left: left,
                    top: top,
                    'transform': 'scale(' + scale + ') rotate(' + rotate + 'deg)',
                    '-webkit-transform': 'scale(' + scale + ') rotate(' + rotate + 'deg)'
                });
            });
            //初始化拖动手势(不需要就注释掉)
//            cat.touchjs.drag($targetObj, function (left, top) {
//                $('#left').text(left);
//                $('#top').text(top);
//            });
            //初始化缩放手势(不需要就注释掉)
            cat.touchjs.scale($targetObj, function (scale) {
                $('#scale').text(scale);
            });
            //初始化旋转手势(不需要就注释掉)
//            cat.touchjs.rotate($targetObj, function (rotate) {
//                $('#rotate').text(rotate);
//            });
        });


    </script>
</body>
</html>

//预览地址
http://wxserver.knowway.cn/home/moban/touchujs.html

jquery 用creatjs preloadjs的方法

jquery 用creatjs preloadjs的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img class="p1_bg" />
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<script src="http://cdn.gbtags.com/PreloadJS/0.4.1/preloadjs.min.js"></script>
<script>
    $(function () {
        setupManifest();
        startPreload();

    })
    //开始预加载
    function startPreload() {
        preload = new createjs.LoadQueue(true);
        //注意加载音频文件需要调用如下代码行
        preload.installPlugin(createjs.Sound);
        preload.on("fileload", handleFileLoad);
        preload.on("progress", handleFileProgress);
        preload.on("complete", loadComplete);
        preload.on("error", loadError);
        preload.loadManifest(manifest);
    }

    //处理单个文件加载
    function handleFileLoad(event) {
        console.log("文件类型");
        console.log(event.item);
         $('.'+event.item.id).attr('src',event.item.src);
    }

    //处理加载错误:大家可以修改成错误的文件地址,可在控制台看到此方法调用
    function loadError(evt) {
        console.log("加载出错!",evt.text);
    }

    //已加载完毕进度
    function handleFileProgress(event) {
       console.log("已加载 " + (preload.progress*100|0) + " %");

    }

    //全度资源加载完毕
    function loadComplete(event) {
        console.log("已加载完毕全部资源");
    }
    //定义相关JSON格式文件列表
    function setupManifest() {
        manifest = [
         {
            src:  "/moban/images/1/p1_bg.jpg",
            id: "p1_bg"
        }

        ];
    }
</script>
</body>
</html>

jquery serialize()函数用法

jquery serialize()函数用法

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").text($("form").serialize());
  });
});
</script>
</head>
<body>
<form action="">
First name: <input type="text" name="FirstName" value="Bill" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
</form>

<button>序列化表单值</button>
<div></div>
</body>
</html>

ps:注意必须所有控件在form表单内才可以获取到

使用jquery操作iframe中的元素

使用jquery操作iframe中的元素

<script>
window.onload = function() {
    $( "#frameTHY" ).contents().find( "a" ).css( "background-color", "red" );
};
</script>

另外这里说一下,iframe的src的地址必须是当前站点域名内的才能够被访问到,否在的话是访问不到的,比如下面这种情况。
还有一点需要注意,如果你要获取iframe中的元素,那么必须使用window.onload,必须是这个页面加载完后执行,一定不能是页面初始化 不然没效果的