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);
    }








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,必须是这个页面加载完后执行,一定不能是页面初始化 不然没效果的

jquery换一批的写法

jquery换一批的写法

  <img src="{$yuming}/images/3/huanyipi.png" alt="" currentindex="1" count="3" class="huanyipi">
 $('.huanyipi').on('click',function () {
         var currentindex=parseInt($(this).attr('currentindex'));
         var count=parseInt($(this).attr('count'));
        currentindex++;
        if(currentindex>count){
            currentindex=1;
        }
        $(this).attr('currentindex',currentindex);
        $('.bufenlist').css('display','none');
        $('.bufen'+currentindex).fadeIn();
    })

点一次一次currentindex+1 来判断 就行了

jquery swiper入场和出场动画

jquery swiper入场和出场动画

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="path/to/swiper.min.css">
    <link rel="stylesheet" href="path/to/animate.min.css">
</head>
<body>
    ...
    <script src="path/to/swiper.min.js"></script>
    <script src="path/to/swiper.animate-twice.min.js"></script>
</body>
</html>
<script>        
  var mySwiper = new Swiper ('.swiper-container', {
  onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
    swiperAnimateCache(swiper); //隐藏动画元素 
    swiperAnimate(swiper); //初始化完成开始动画
  }, 
  onSlideChangeEnd: function(swiper){ 
    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
  } 
  })        
  </script>

<div class="swiper-slide a">
            <div class="ani" data-slide-in="at 500 from bounceInDown use swing during 500" data-slide-out="at 0 to fadeOutRight use swing during 1500 force">内容1</div>
        </div>

4.说明

在每个要动画的类上面添加一个 ani的类名 然后在后面的DATA内 多了两个参数 data-slide-in 进场动画和 data-slide-out出场动画
参数是一致的。

at 500 from bounceInRight use swing during 500
在 多少时间开始 以 什么动画 使用 什么速度 动画用时 多少 (force 是否使用 只在出场的时候判断)

at 后面跟的是 动画延迟时间
from 后面跟的是 动画样式
use 后面跟的是 动画力度
during 后面跟的是 动画持续时间
force 后面跟的是 是否使用 只有在出场动画的时候使用。进场动画无效。。
出场动画执行时间 =进场等待时间(at)+进场动画执行时间(during)+出场等待时间(at)

jquery on绑定事件叠加解决方法

jquery on绑定事件叠加解决方法

代码如下

  $('.maoqiu').each(function () {
        var is_bind = $(this).attr('is_bind');
        if (is_bind != 1) {
            $(this).attr('is_bind', 1);
            $(this).on('touchend', function () {

                var that = $(this);
                that.addClass('fadeOutRight animated');

                mcount++;

                setTimeout(function () {
                    that.remove();
                    $('.p3_wz2').text(mcount);

                }, 500)

            })
        }

    });