自写Jq动画载入插件

在写网站的时候，有一些dom第一次进入屏幕时需要加一个动画进入效果，如下图

于是，自己就研究下，要是实现gif图中左图效果大致原理就是首先将dom放在他的左侧，并将他的透明度（opacity）设置为0；

然后监听滚轮当dom出现在屏幕中时候，然后dom移回原位，并且透明度（opacity）设置为1。

html如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: %;

            height: 100px;

            margin-top: 1500px;

        }

        .txt{

            margin-left:100px;

            width: 600px;

            display:inline-block;

        }

        #txt{

            width: 600px;

            display:inline-block;

        }

        .AtFirst{

            opacity: ;

            transform: translateX();

            transition-duration: 2s;

        }

        .left{

            opacity: ;

            transform: translateX(-100px);

        }

        .right{

            opacity: ;

            transform: translateX(100px);

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="txt"><img src="imgs/1.jpg" /></div>

        <div id="txt"><img src="imgs/2.jpg" /></div>

    </div>

    <div class="box"></div>

</body>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="js/socllII.js"></script>

<script>

    $(".txt").ScrollLeft();

    $("#txt").ScrollRight();

</script>

</html>

插件代码如下

$.fn.extend({ 

ScrollLeft:function(){

    var that=this;

return (function(){

    that.addClass('AtFirst');

        that.addClass('left');

        $(window).bind("scroll",function(){

        var ss=that.offset().top- $(window).height() +;

        if($(window).scrollTop() > ss){

            that.removeClass('left');

            $(this).unbind("scroll");

        }

        })

})()

},

ScrollRight:function(){

    var that=this;

return (function(){

    that.addClass('AtFirst');

        that.addClass('right');

        $(window).bind("scroll",function(){

        var ss=that.offset().top- $(window).height() +;

        if($(window).scrollTop() > ss){

            that.removeClass('right');

            $(this).unbind("scroll");

        }

        })

})()

}

});

这个插件中我用闭包是怕外层函数的this到jq监听滚轮时，this指向就不再是原来的dom，其实不用闭包也可以的。

代码如下

ScrollLeft:function(){

    var that=this;

　　that.addClass('AtFirst');

        that.addClass('left');

        $(window).bind("scroll",function(){

        var ss=that.offset().top- $(window).height() +;

        if($(window).scrollTop() > ss){

            that.removeClass('left');

            $(this).unbind("scroll");

        }

   })

}

我只是写了两种动画效果，如果你需要多种特效的话，可以去下载animate.min.css，引用到html中，然后修改下插件代码即可

代码如下

ScrollRight:function(){

    var that=this;

return (function(){

    that.addClass('AtFirst');

        that.addClass('right');

        $(window).bind("scroll",function(){

        var ss=that.offset().top- $(window).height() +;

        if($(window).scrollTop() > ss){

            that.addClass('animated flipInY');//前一个class一定要加，后一个class看你要什么效果，自己修改。

            that.removeClass('right');

            $(this).unbind("scroll");

        }

        })

})()

}

巴特西

自写Jq动画载入插件

最新文章

热门文章