在写网站的时候，有一些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. P4011 孤岛营救问题

    \(\color{#0066ff}{题目描述}\) 1944 年,特种兵麦克接到国防部的命令,要求立即赶赴太平洋上的一个孤岛,营救被敌军俘虏的大兵瑞恩.瑞恩被关押在一个迷宫里,迷宫地形复杂,但幸好麦克 ...

  2. 「杂录」CQOI 2018 背板记

    背景 经过一天天的等待,终于迎来了\(CQOI2018\),想想\(NOIp\)过后到现在,已经有了快要半年了,曾经遥遥无期,没想到时间一转眼就过去了-- 日志 \(Day0\) 因为明天就要考试了, ...

  3. 转换jmeter测试结果jtl

    #bin/sh filelist=`ls jtl` # 将jtl目录的所有文件列表读取并存入变量 for file in $filelist #遍历处理各个文件 do #文件名形如 test2ad.j ...

  4. Linux 文件系统的目录结构

    http://www.jb51.net/LINUXjishu/151820.htmlLinux下的文件系统为树形结构,入口为/ 树形结构下的文件目录: 无论哪个版本的Linux系统,都有这些目录,这些 ...

  5. hive中解析json数组

    -- hive中解析json数组 select t1.status ,substr(ss.col,,) as col ,t3.evcId ,t3.evcLicense ,t3.evcAddress , ...

  6. WindowsMTU修改

    MTU是英文Maximum Transmission Unit的缩写,意为"最大传输单位".也就是通过TCP/IP协议所传输的数据包最大有多少字节,对于网速有极大的影响, MTU并 ...

  7. vue 父组件调用子组件的函数

    子组件 <template> <div> child </div> </template> <script> export default ...

  8. spark on yarn，cluster模式时，执行spark-submit命令后命令行日志和YARN AM日志

    [root@linux-node1 bin]# ./spark-submit \> --class com.kou.List2Hive \> --master yarn \> --d ...

  9. shell 终端字符颜色

    终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关,shell,python,perl等均可以调用. 转义序列是以 ESC 开头,可以用 \033 完成相同的工作(ESC ...

  10. oracle命令查看表结构及表索引

    --查看oracle数据库的单个表结构 select dbms_metadata.get_ddl('TABLE','TABLE_NAME') from dual; 括号里面有两个参数,第一个参数是我们 ...