自写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: 100%;
            height: 100px;
            margin-top: 1500px;
            
        }
        .txt{
            margin-left:100px;
            
            width: 600px;
            display:inline-block;
        }
        #txt{
            
            width: 600px;
            display:inline-block;
        }
        .AtFirst{
            opacity: 1;
            transform: translateX(0);
            transition-duration: 2s;
        }
        .left{
            opacity: 0;
            transform: translateX(-100px);
        }
        .right{
            opacity: 0;
            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() +300;
        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() +300;
        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() +300;
        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() +300;
        if($(window).scrollTop() > ss){
            that.addClass('animated flipInY');//前一个class一定要加，后一个class看你要什么效果，自己修改。
            that.removeClass('right');
            $(this).unbind("scroll");
        }
        })
})()
}

 

posted on 2018-01-21 21:55  tzzf  阅读(142)  评论(0)  编辑  收藏  举报

导航