在写网站的时候，有一些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. win10更新后IE不见了

    只是快捷方式不见了,到C:\Program Files\internet explorer\iexplore.exe就看到了,可以正常运行

  2. socket中close发生的事情,RST,pipe信号错误

    1.server端close之后,client端write,导致server端发送RST(服务器关闭套接字):对方已经关闭或者异常终止,但是client端,不知道,这个成为半打开 当server端cl ...

  3. i++操作非原子的验证代码

    package incre; public class Incre { public static void main(String[] args) { class Count implements ...

  4. 小程序渲染问题:ios显示安卓不显示

    问题描述: 测试库转到正式库后添加数据,小程序数据渲染不出来,但是测试库没问题,ios数据能显示,没问题,但是安卓显示没数据. 排除是服务器https证书问题,如果是证书问题,小程序会直接调不了接口. ...

  5. Flashcache的 KEEP属性自动失效

    如果希望一个数据对象长期地缓存在flashcache中,则可以手动地将该数据对象的CELL_FLASH_CACHE属性设置为"keep". 其实需要说明的是,但不是数据对象的CEL ...

  6. Unity 动画系统 AnimationEvent 动画事件

  7. jquery 初步学习

    首先 jQuery是一个轻量级的 JS框架,核心文件才几十KB 1. jquery 对象 var $variable=jquery对象 var variable = DOM对象 $variable[0 ...

  8. Photoshop入门教程（六）：通道

    学习心得:当大部分人听到通道.心里可能会有一种很害怕的感觉,因为“通道”并不像“图层”这样易于理解,望而生畏.”通道“的本质其实是存储图片的信息,把一张图片比作一个为网站,那么通道就是网站的后台,存储 ...

  9. 12.标准标签库（JSTL）

    1.JSTL标签库安装 JSTL的概念: JSP标准标签库(JSP Standard Tag Library)是一个实现 Web 应用程序中常见的通用功能的定制标记库集功能包括迭代和条件判断.数据管理 ...

  10. oracle截取字符串，定索引

    转载:https://www.cnblogs.com/qmfsun/p/4493918.html 使用Oracle中Instr()和substr()函数: 1 2 3 4 5 6 7 8 9 10 1 ...