JQuery插件 制作具有动态效果的网页

  前  言

JQuery

　　今天我给大家介绍一个运用JQuery插件制作的动态网页——iphone 5C 宣传页面。这个网页中运用到了fullpage.js和move.js两个插件。

动态效果

         

1导入插件

在这个页面中需要用到三款插件，分别是jquery-3.1.1.js（JQuery 3.1.1版本）、jquery.fullPage.js（附带jquery.fullPage.css）和 move.js 动画插件。

导入顺序也如上所示，因为后两款是使用JQuery编写的，因而需要优先导入jquery-3.1.1.js，还需要一并将jquery.fullPage.css导入HTML文件。

结构如下，导入完成后，我们开始编写HTML代码。

<link rel="stylesheet" type="text/css" href="../css/jquery.fullPage.css"/>

<link rel="stylesheet" type="text/css" href="../css/iphone.css"/>

<script type="text/javascript" src="../js/jquery-3.1.1.js"></script>

<script type="text/javascript" src="../js/jquery.fullPage.js"></script>

<script type="text/javascript" src="../js/move.js"></script>

2HTML

<body>

        <div id="fullpage">

            <div class="section" id="section1">

                <h1>fullPage.js — iPhone 5C演示</h1>

                <img src="../img/iphone1.jpg"/>

            </div>

            <div class="section" id="section2">

                <img src="../img/iphone2.png" class="img2"/>

                <img src="../img/iphone3.png" class="img3"/>

                <img src="../img/iphone4.png" class="img4"/>

                <div class="description">

                    <h1>A powerful plugin</h1>

                    <strong>fullPage.js</strong> callbacks allow you to create amazing dynamic sites with a bit of imagination. This example tries to reproduce the Apple iPhone-5c website animations as an example of what fullPage.js is capable of.

                </div>

            </div>

            <div class="section" id="section3">

                <img src="../img/iphone-yellow.png" class="yellow"/>

                <img src="../img/iphone-red.png"/ class="red">

                <img src="../img/iphone-blue.png" class="blue"/>

                <div class="description">

                    <h1>Amazing stuff</h1>

                    Combining <strong>fullPage.js</strong> with your own CSS styles and animations, you will be able to create something remarkable.

                </div>

            </div>

            <div class="section" id="section4">

                <img src="../img/iphone-green.png"  class="green"/>

                <img src="../img/iphone-two.png"  class="two"/>

                    <div class="description">

                        <h1>Just a demo</h1>

                        This is, of course, just a demo. I didn't want to spend much time on it.

                        Don't expect it to work perfectly in all kind of screens.

                        It has been designed to work on 1180px width or over on modern browsers with CSS3.

                    </div>

            </div>

        </div>

    </body>

3CSS样式

*{

    margin: 0px;

    padding: 0px;

}

#fullpage{

    min-width:1250px ;

}

.section{

    min-height: 600px;

}

#section1{

    background-color: #F0F2F4;

    overflow: hidden;

    text-align: center;

}

#section1 h1{

    font-size: 70px;

    color: #333333;

    text-align: center;

    margin: 60px 0px;

}

#section2{

    position: relative;

    overflow: hidden;

}

#section2 .description{

    width: 370px;

    position: absolute;   <!--首先固定动画执行之前，图片的位置-->

    top: 200px;

    right: 130px;

    color: #808080;

    font-size: 18px;

    line-height: 35px;

}

#section2 .description h1{

    font-size: 36px;

    margin-top: 15px;

    margin-bottom: 15px;

}

#section2 img{

    position: absolute;

    left: 0px;

    bottom: -60px;

}

#section2 .img3{

    z-index:;

}

#section3{

    position: relative;

    overflow: hidden;

}

#section3 .description{

    width: 600px;

    position: absolute;

    top: 150px;

    right: 200px;

    color: #808080;

    font-size: 18px;

    line-height: 35px;

}

#section3 .description h1{

    font-size: 36px;

    margin-top: 15px;

    margin-bottom: 15px;

}

#section3 img{

    position: absolute;

}

#section3 .red{

    left: 150px;

    top: 260px;

}

#section3 .yellow{

    left: -180px;

    bottom: -420px;

}

#section3 .blue{

    bottom: -420px;

    left: 490px;

}

#section3{

    position: relative;

    overflow: hidden;

}

#section4 .green{

    position: absolute;

    top: 200px;

    left: 150px;

}

#section4 .description{

    width: 90%;

    position: absolute;

    top: 100px;

    left: 5%;

    color: #808080;

    font-size: 14px;

    line-height: 25px;

    text-align: center;

}

#section4 .description h1{

    font-size: 36px;

    margin-top: 15px;

    margin-bottom: 15px;

}

#section4 .two{

    position: absolute;

    bottom: -200px;

    left: 490px;

}

4各种调用JQuery插件

<script type="text/javascript">

            $(function(){

                $("#fullpage").fullpage({      //调用fullpage插件

                    navigation : true,

                    verticalCentered : false,

                    anchors:["page1","page2","page3","page4"],

                    onLeave:function(index,nextIndex,direction){    // 当页面即将滚动离开的时候触发。设置目的：为了使动画循环执行。

                        switch(index){   // index：当前所在页面的序号

                            case 2:

                                move(".img2").delay(600).x(0).duration("0s").end();

                                move(".img3").delay(600).x(0).duration("0s").end();

                                move(".img4").delay(600).x(0).duration("0s").end();

                                break;

                            case 3:

                                if(nextIndex != 4){

                                    move(".red").delay(0).y(0).duration("0s").end();

                                    move(".blue").delay(0).y(0).duration("0s").end();

                                    move(".yellow").delay(0).y(0).duration("0s").end();

                                }

                                move(".green").delay(0).y(30).duration("1.5s").end();

                                break;

                            default:

                                break;

                        }

                        switch(nextIndex){        // nextIndex：即将去往页面的序号；

                            case 2:

                                move(".img2").delay(300).x(-65).duration(".5s").end();

                                move(".img3").delay(300).x(290).duration(".5s").end();

                                move(".img4").delay(300).x(630).duration(".5s").end();

                                break;

                            case 3:

                                move(".red").delay(0).y(-400).duration("1.5s").end();   // 调用move 调整动画显示位置，执行时间

                                move(".blue").delay(0).y(-400).duration("1.5s").end();

                                move(".yellow").delay(0).y(-400).duration("1.5s").end();

                                move(".green").delay(0).y(-360).duration("1.5s").end();

                            break;

                            default:

                                break;

                        }

                    },

                });

            });  // 文档就绪函数 

 </script>

结束语

　　到这里，这个模拟iphone 5C动态效果的网页就完成了。如果有不妥当的地方还请大神们指教，ths！

JQuery插件制作动态网页的更多相关文章

  1. jQuery插件制作之全局函数用法实例

    原文地址:http://www.jb51.net/article/67056.htm 本文实例讲述了jQuery插件制作之全局函数用法.分享给大家供大家参考.具体分析如下: 1.添加新的全局函数 所谓 ...

  2. jQuery插件制作方法详解

        jQuery插件制作方法详解   jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...

  3. JQuery插件：动态列和无间隙网格布局Mason.js

    来源:GBin1.com 在线演示 JavaScript提供很多强有力的方案,解决动态列的网格布局(例如:Pinterest).这些方案很有效,但是,有时候,会造成网格的间隙或粗糙的边缘. Mason ...

  4. jquery插件制作，下拉菜单

    要求输入框点击出现下拉菜单,并实现以下功能: 1.首先点击地点标签页,选择好地点: 2.自动显示相应节点标签页显示节点信息,选择好节点 3.自动显示相应的连接点,选择连接点,连接点被选中并被传送的输入 ...

  5. 利用Highcharts插件制作动态图表

    向大家推荐一款js插件,用于绘制图表Highcharts,具体操作可参考官方网站:http://www.hcharts.cn/ 1.如下为本人制作的图形效果如下,当然其效果远不止这些,大家还可以深入研 ...

  6. jQuery——插件制作

    1.$.fn.extend:扩展 jQuery 元素集来提供新的方法(通常用来制作插件),使用时是$('选择器').方法 2.$.extend:扩展jQuery对象本身,用来在jQuery命名空间上增 ...

  7. jQuery插件制作

    模板:(function($){ $.fn.plugins=function(options){ var defaults = { } var options = $.extend(defaults, ...

  8. jquery插件制作教程 txtHover(转载)

    http://www.jb51.net/article/31082.htm 该系列文章是我阅读<jQuery Plugin Development Beginner's Guide>后的总 ...

  9. 【实战】如何通过html+css+mysql+php来快速的制作动态网页（以制作一个博客网站为列）

    一.开发环境的搭建 (1)apache+php+mysql环境搭建 因为要用apache来做服务器,mysql作为数据库来存储数据,php来写代码以此实现网页与数据库的交互数据,所以需要下载上述软件, ...

随机推荐

  1. Pandas 操作

    一.Series的创建: pd.Series([ 数据 ]) In [17]: import pandas as pd In [18]: import numpy as np In [19]: s = ...

  2. HTTP和HTTPS有什么区别？ 什么是SSL证书？使用ssl证书优势？

    什么是SSL? SSL是指安全套接层协议(以及传输层协议TLS),位于TCP/IP协议与各种应用层协议之间,为数据通讯提供安全支持,是目前使用最广泛的安全协议.它为互联网或内部网络连接,进行操作的两台 ...

  3. Java读取properties文件(非泛滥)

    根据spring配置文件的 PropertiesFactoryBean和 PropertyPlaceholderConfigurer可以选择不同的加载方式,我是使用System.setProperty ...

  4. .NET Standard 2.0 特性介绍和使用指南

    .NET Standard 2.0 发布日期:2017年8月14日 公告原文地址 前言 早上起来.NET社区沸腾了,期待已久的.NET Core 2.0终于发布!根据个人经验,微软的产品一般在2.0时 ...

  5. c++类与初始化，const

    --c++类与初始化,const --------------------------------2014/09/04 1. 类的定义(头文件.声明文件)看成类的外部接口,一般写成.h头文件. 2. ...

  6. 关于write()和fsync()

    --关于write()和fsync()   ----------------------------转载 write ssize_t write(int fd, const void *buf, si ...

  7. LeetCode Algorithm

    LeetCode Algorithm 原文出处:[LeetCode] 算法参考:[陈皓 coolshell] 1. Two Sum 3. Longest Substring Without Repea ...

  8. servlet实现登陆注册

    拿到信息必须进行非空验证用servlet做注册登陆时,在form表单的action中不用加后缀.java,jsp文件需要加 public boolean CheckParm(String...args ...

  9. 【Java学习笔记之二十二】解析接口在Java继承中的用法及实例分析

    一.定义 Java接口(Interface),是一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法的实现,因此这些方法可以在不同的地方被不同的类实现,而这些实现可以具有不同的行为( ...

  10. sizeof求类的大小

    用sizeof求类的大小,http://blog.csdn.net/szchtx/article/details/10254007(sizeof浅析(三)——求类的大小),这篇博文给出了非常详尽的举例 ...