在写网站的时候，有一些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. 【bzoj3209】: 花神的数论题 数论-DP

    [bzoj3209]: 花神的数论题 首先二进制数中1的个数最多就是64个 设所有<=n的数里二进制中1的个数为i的有a[i]个 那么答案就是  然后快速幂 求a[i]可以用DP 设在二进制中从 ...

  2. 关于IBOutlet的生命周期

    在调试程序的时候,发现 IBOutlet的对象在执行 getter时,开始一直想找IBOutlet对象getter方法前被执行的代码,但是一直找不到,于是我就想是不是系统自动给IBOutlet 自动初 ...

  3. 删除Ati显卡桌面右键菜单（配置可交换显卡，显示卡属性，图形选项，图形属性）

    Win+R 打开注册表 依次找到 HKEY_CLASSES_ROOT\Directory\Background\shellex\ContextMenuHandlers 保留Gadgets.New.Sh ...

  4. HP EliteBook 8570p TouchPad Issue

    最近更换了笔记本,当时TouchPad总是不能用,有个指示灯总是亮着:同事同型号的就没有这样的问题. Google了好久终于找到了一篇帖子能解决我的问题.分享给朋友们. Link: http://h3 ...

  5. c++中STL中的next_permutation函数基本用法

    对于next_permutation函数是针对于排列组合问题的库函数,它的排序方式是按照字典的方式排列的·: 如以下代码对于next_permutation函数的初步解释: #include<c ...

  6. POJ1769（线段树+DP)

    飞翔 题意 : 给定一个区间长度 n ,接下来给出 m 个子区间,要求最少选出多少个区间才能使得 1~n 这个区间被所选的所有子区间覆盖 分析: 首先是动态规划,dp[i]表示把最大值从1位置搞到第i ...

  7. [转载]jQuery中的html，val，text区别

    在jquery中 text() 返回目标元素所包含的所有文本内容,注意不包含html标签 alert($("#shuru").text()); 1 html() 返回目标元素所包含 ...

  8. lvs 中DR模式负载均衡及keepalived

    lvs DR配置 LVS负载均衡:三种负载均衡模式:DR,TUN(ip隧道),NAT,这里我们介绍DR模式 server1: 首先,配置server机yum源 方便后期实验流畅vim /etc/yum ...

  9. SQL注入工具sqlmap的注入过程记录

    1.sqlmap的get注入 假设目标是 https://www.baidu.com/news.php?id=1&data=2 sqlmap语句 列库 sqlmap.py -u "h ...

  10. web安全之文件上传漏洞攻击与防范方法

    一. 文件上传漏洞与WebShell的关系 文件上传漏洞是指网络攻击者上传了一个可执行的文件到服务器并执行.这里上传的文件可以是木马,病毒,恶意脚本或者WebShell等.这种攻击方式是最为直接和有效 ...