在写网站的时候，有一些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动画载入插件的更多相关文章

  1. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  2. 自写JQ控件-树状菜单控件[demo下载]

    一个多月没有写博客了,最近也弄一个基于JQ的树状菜单控件,在此分享给大家.另外呢,通过这个例子分享一下怎么写JQ控件的. 事实上工作中,也是经常遇到的,有些时候自己想实现一些前端效果,用网上一些插件吧 ...

  3. css动画和jq动画的简单区分

    有很多不怎么用css3写动画的同学经常会对其中css3的transform,transition,translate,animation,@keyframes等等动画属性混淆错乱,经常使用了发现没有效 ...

  4. （21）jq动画

    jq动画的优点 优点: 1.可以知道动画结束的表示(结束的回调函数) 2.可以利用jq动画插件完成复杂的动画 动画有三个参数:动画的样式是字典.动画持续的事件,动画结束回调函数 <!DOCTYP ...

  5. Android插件化（三）载入插件apk中的Resource资源

    Android载入插件apk中的Resource资源 简单介绍 怎样载入未安装apk中的资源文件呢?我们从android.content.res.AssetManager.java的源代码中发现,它有 ...

  6. 一款炫酷Loading动画--载入失败

    简单介绍 上一篇文章一款炫酷Loading动画–载入成功.给大家介绍了成功动画的绘制过程,这篇文章将接着介绍载入失败特效的制作. 相比成功动画,有了前面的经验,失败动画的过程就显得比較简单了. 动画结 ...

  7. DrawSVG - SVG 路径动画 jQuery 插件

    jQuery DrawSVG 使用了 jQuery 内置的动画引擎实现 SVG 路径动画,用到了 stroke-dasharray 和 stroke-dashoffset 属性.DrawSVG 是完全 ...

  8. jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件

    插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...

  9. 手写js面向对象选项卡插件

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

随机推荐

  1. P3703 [SDOI2017]树点涂色 LCT维护颜色+线段树维护dfs序+倍增LCA

    \(\color{#0066ff}{ 题目描述 }\) Bob有一棵\(n\)个点的有根树,其中1号点是根节点.Bob在每个点上涂了颜色,并且每个点上的颜色不同. 定义一条路径的权值是:这条路径上的点 ...

  2. 树链剖分【洛谷P2590】 [ZJOI2008]树的统计

    P2590 [ZJOI2008]树的统计 题目描述 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把 ...

  3. luogu3380 树套树之线段树套线段树

    个人感觉可能是最不需要脑子写的方法 不过也不太好调 就是用一个普通的线段树维护这个序列,但是对于线段树的每一个区间,再开一个动态开点的权值线段树,里面存储这个区间所有元素值 单点修改只会涉及到log棵 ...

  4. luogu4240 毒瘤之神的考验(毒瘤乌斯反演)

    link 题意:求出\(\sum_{i=1}^n\sum_{j=1}^m\varphi(ij)\),对998244353取模 多组数据,\(T\le 10^4,n,m\le 10^5\). 前置知识: ...

  5. webpack 的使用教程

    webpack 的使用教程 今天接触webpack,就着官网上的教程一步一步的玩,把自己的理解总结以便和大家交流 webpack的主要特点 1. 可以把js,css,image,甚至文本当成模块来处理 ...

  6. MYSQL查询字段全部为中文的字段

    在实际使用mysql的过程中,会遇到这样的问题,查询字段内容全部为中文内容的数据,对于刚用mysql的小伙伴可能就比较迷失了,不知道怎么使用,其实这个问题很简单,使用下面这个sql语句就可以了 SEL ...

  7. Centos6.8 yum安装LNMP

    1.Centos6系统库中默认是没有nginx的rpn包的,所以我们需要先更新下rpm依赖库 (1):使用yum安装nginx,安装nginx库 rpm -Uvh http://nginx.org/p ...

  8. Forward链、Input链和Output链的区别

    转载自:http://blog.chinaunix.net/uid-27863080-id-3442374.html 1. 如果数据包的目的地址是本机,则系统将数据包送往Input链.如果通过规则检查 ...

  9. 洛谷1541（多维dp）

    走格子拿分数,直接弄dp[i]是到了第i格的最大得分可以发现是假的. 于是此题设f[i][j][k][t]代表四种步伐各用了几次可以得到的最大得分,到达的点可以直接算出来,就好转移了. const i ...

  10. 网络流EdmondsKarp算法模板理解

    先推荐一个讲网络流的博客,我的网络流知识均吸收于此   传送门 EdmondsKarp算法基本思想:从起点到终点进行bfs,只要存在路,说明存在增广路径,则取这部分路 权值最小的一部分,即为增广路径( ...