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)

            })
        }

    });

jquery swiper自定义pagination的方法

jquery swiper自定义pagination的方法

<script>
var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  paginationClickable: true,
  paginationBulletRender: function (swiper, index, className) {
      return '<span class="' + className + '">' + (index + 1) + '</span>';
  }
});  
</script>

具体详情http://www.swiper.com.cn/api/pagination/2014/1217/70.html

ps:自定义classname方法

   bulletClass: 'chanpin-bullet',
        bulletActiveClass: 'chanpin-bullet-active',

jquery鼠标经过弹出层写法

jquery鼠标经过弹出层写法

<div class="navitem"><a href="/index.php?c=news&amp;a=index&amp;id=52">新闻中心</a>
<div class="navitemlist" style="display: none;">
<a href="/index.php?c=news&amp;a=index&amp;id=52">公司新闻</a>
<a href="/index.php?c=news&amp;a=index&amp;id=53">媒体报道</a>
</div>
</div>
    $(".navitem").hover(function(){
        $(this).children('a').next('.navitemlist').fadeIn();
    },function(){
        $(this).children('a').next('.navitemlist').css('display','none');
    });
.header .navitem {
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    display: block;
    line-height: 102px;
    font-size: 16px;
    color: #242169;
    border-bottom: 1px #FFF solid;
    text-decoration: none;
    float: left;
    position: relative;
}
.navitemlist {
    height: auto;
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 75px;
    background: #FFF;
    z-index: 9999;
    text-align: left;
    display: none;
}