文档章节

jquery文本动画淡入效果插件reveal-it.js

mymlucifer
 mymlucifer
发布于 2015/03/16 13:09
字数 434
阅读 13
收藏 0

dreamweaver免费视频教程:

51RGB Dreamweaver板块

加讨论群390180913 入群即可参加周一至周五免费公开课并获得免费视频 绝对干货!

 

jquery文本动画淡入效果插件reveal-it.js

 

51RGB小编Q群162542073整理了一个堆叠切换图片效果插件分享出来大家参考使用。

1立即在页面加载

<div class="container">

    <div class="row">

        <div class="col-xs-12">

            <p>Box 1: Reveal Immediately</p>

            <div class="box1">

                <h1>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus</h1>

            </div>

        </div>

    </div>

</div>

 

jQuery(function () {

    //Box 1: reveal immediately - on page load

    //NOTE: id does refer to an element id, It is used to

    //      uniquely refer to the element to be revealed.

    var options1 = {

        id: 'box1'

    };

    $('.box1').initReveal(options1);

});

2,指定的延迟后:设置背景颜色。

<div class="container" style="background-color: #555;">

    <div class="row">

        <div class="col-xs-12">

            <p>Box 2: Reveals after 3000ms delay</p>

            <div class="box2">

                <h1>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus</h1>

            </div>

        </div>

    </div>

</div>

var options2 = {

    id: 'box2'

    , delay: 3000

    , background: '#555'

};

$('.box2').initReveal(options2);

3:点击事件——如。Onclick

<div class="container">

    <div class="row">

        <div class="col-xs-12">

            <p>Box 3: Reveal on click event</p>

            <div>

                <div class="box3">

                    <h1>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus</h1>

                </div>

            </div>

  

            <button class="btn btn-primary btn-reveal">Reveal!</button>

        </div>

    </div>

</div>

var options3 = {

    id: 'box3'

    , auto: false

};

var box3 = $('.box3');

box3.initReveal(options3);

  

$('.btn-reveal').on('click', function () {

    box3.performReveal(options3);

});

4:当元素卷轴到视窗

<div class="container">

    <div class="row">

        <div class="col-xs-12">

            <p>Box 4: Reveal when element scrolls into the viewport</p>

            <div>

                <div class="box4">

                    <h1>Lorem ipsum dolor sit amet, ne mel vero impetus voluptatibus</h1>

                </div>

            </div>

        </div>

    </div>

</div>

var options4 = {

    id: 'box4'

    , auto: false

    , trigger: 'on-visible'

};

$('.box4').initReveal(options4);

代码下载地址:

51RGB

 

光看文字怎么够 来看在线视频 手把手教你做网站!

Adobe官方讲师万晨曦指导 轻松幽默学习网站开发

Dreamweaver视频直达网址 51RGB Dreamweaver板块


© 著作权归作者所有

mymlucifer
粉丝 7
博文 61
码字总数 26911
作品 0
南昌
私信 提问
2011年度最佳 jQuery 插件发布

近日,国外著名博客WDL发布了2011年度最佳 jQuery 插件。jQuery 自2006年发布以来,经过五年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架。jQuery 的易扩展性吸引了来自全球的...

红薯
2011/11/25
6K
16
10 个非常酷的基于jQuery的菜单效果插件

除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉。本文为你带来10个非常酷的基于jQuery的菜单效果插件。 1. 右击菜单 一个创建右击菜单的插件,简洁且易...

红薯
2011/12/20
3.9K
4
让人期待的2011年度最佳 jQuery 插件发布啦

  近日,国外著名博客WDL发布了2011年度最佳 jQuery 插件。jQuery 自2006年发布以来,经过五年的迅速发展,目前已是最流行和使用最广泛的 JavaScript 框架。jQuery 的易扩展性吸引了来自全...

Yamazaki
2012/05/02
0
0
10 款基于 jQuery 的切换效果插件推荐

本文整理了 10 款非常好用的jQuery切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换。 1. InnerFade 这是一个基于jQuery的小插件,可以实现页面内的元素淡入...

红薯
2011/12/15
1K
2
炫酷实用 7款jQuery/HTML5图片应用

jQuery非常强大,我们这里有很多关于jQuery焦点图的插件,今天我们精选了7款利用jQuery和HTML5实现的超炫酷图片特效应用,有些也是焦点图插件,一起来看看吧。 1、HTML5 3D衣服摆动特效 超酷...

老鸟的空间
2014/07/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

springboot+jpa 错误信息org.springframework.beans.factory.BeanCreationException

报错信息 org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'entityManagerFactory' defined in class path resource [org/springframework/boot/a......

冥焱
21分钟前
1
0
威胁快报|新兴挖矿团伙借助shodan作恶,非web应用安全再鸣警钟

近日,阿里云安全发现了一个使用未授权访问漏洞部署恶意Docker镜像进行挖矿的僵尸网络团伙。我们给这一团伙取名为Xulu,因为该团伙使用这个字符串作为挖矿时的用户名。 Xulu并不是第一个攻击...

迷你芊宝宝
28分钟前
2
0
十大经典排序算法动画与解析

排序算法是《数据结构与算法》中最基本的算法之一。 排序算法可以分为内部排序和外部排序。 内部排序是数据记录在内存中进行排序。 而外部排序是因排序的数据很大,一次不能容纳全部的排序记...

夜黑人模糊灬
32分钟前
4
0
7. java枚举

1. 枚举是什么 有的时候一个类的对象是有限且固定的,这种情况下我们使用枚举类就比较方便 2. 为什么不用静态常量来替代枚举类呢? 3. 常用方式 3.1 方式1 枚举类: package cn.ali.tencent...

20190513
33分钟前
1
0
elasticsearch – 弹性搜索:“Term”,“Match Phrase”和“Query String”之间的差异

术语查询匹配单个术语,因为它是:不分析值。 所以,它不必根据你索引的情况而降低。 如果您在索引时间提供Bennett并且未分析该值,则以下查询将不返回任何内容: { "query": { "te...

xiaomin0322
39分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部