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. 一个想法照进现实-《IT连》创业项目：聊聊IT连App是如何思考解决IT人员单身问题的

    前言: 根据最早我编写的IT联盟社区众筹计划书的思路方向:社交->资讯=>评级=>培训. 现在在实现第一个阶段中,而且这个阶段可能会走很久. 今天开文,主要是讲述一下,现在的版本为什 ...

  2. POJ 1182 食物链 -- 解题报告

    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 70529   Accepted: 20875 Description ...

  3. 【HTTP权威指南】第三章-HTTP报文

    HTTP是因特网的信使,报文就是信使运送的包裹. 这一章包含: 报文如何流动 报文的三个组成部分(起始行,首部,实体的主体部分) 请求报文和响应报文的区别 请求报文支持的各种功能(方法) 响应报文返回 ...

  4. MySQL学习进阶

    存储引擎 MyISAMMySQL 5.0 之前的默认数据库引擎,最为常用.拥有较高的插入,查询速度,但不支持事务 InnoDB事务型数据库的首选引擎,支持ACID事务,支持行级锁定, MySQL 5. ...

  5. IOS开发之UITabBarController与UINavigationController混合使用

    ios开发中UITabBarController与UINavigationController混合使用是很多app的基础页面结构,下面是简单的的页面初始化的方法,在AppDelegate.m的 - ( ...

  6. RMAN数据库恢复测试

    RMAN恢复实践   RMAN> list backup; using target database control file instead of recovery catalog List ...

  7. python 初学习 模拟用户登录

    #!/usr/bin/env python#coding:utf-8''' 2017年8月19日 模拟用户登录,userfile 文件保存字典 用户名,和密码 sorryname 文件保存字典 登录过 ...

  8. kali linux安装到U盘并增加persistence功能

    这里写两种方法,其实本质是一样的,都是利用grub4dos重新写mbr,同时建立persistence分区并写入配置文件. 一, 1,首先将U盘分区,分两个即可,一个可当U盘使用存储数据,另一个则用来 ...

  9. JS中几种常见的数组算法（前端面试必看）

    JS中几种常见的数组算法 1.将稀疏数组变成不稀疏数组 /** * 稀疏数组 变为 不稀疏数组 * @params array arr 稀疏数组 * @return array 不稀疏的数组 */ f ...

  10. JavaScript模块化 --- Commonjs、AMD、CMD、es6 modules

    随着前端js代码复杂度的提高,JavaScript模块化这个概念便被提出来,前端社区也不断地实现前端模块化,直到es6对其进行了规范,下面就介绍JavaScript模块化. 这篇文章还是希望能给大家一 ...