fullpage.js 是一个基于jquery 的插件,它能够轻松的制作出高大上的全屏网站,主要功能有; 1．支持鼠标滚动 2．支持前进后退和键盘控制 3．多个回调函数 4．支持 CSS3 动画 5．可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等. 实现的原理: 1. 窗口大小变化时,改变布局. 2. 鼠标wheel时,滚动. 3. jQuery Easing是在jQuery原有的动画效果上进行了扩展,所以使用时可以根据jQuery原有的动画函数进行扩展,使动画看起来更流畅…

fullpage插件大家都很熟悉 jquery一款全屏上下滑动的插件. 最近做公司一个活动移动端使用fullpage插件填写input的时候遇见一个问题,手机自带的键盘弹出的时候会把页面顶出去,页面错版,当时也是熬夜解决这个问题,首先想到的是键盘收起时重新给页面赋值高度,处理失败,fullpage插件会强迫重新复制给页面高度, 等等一些方法赋值都不行,最后跟同事一起想办法解决掉了 ,so~话不多说分享给大家我认为正确的解决办法,希望遇到此问题的前端朋友能更快处理. $(function(){$(…

fullPage插件 fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等 1.引文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> &…

仿造fullPage.js https://alvarotrigo.com/fullPage/#firstPage 自己参照网上教程写了一个,加了注释.主要是练习造轮子的能力,需求是不断变化的只拿来用的话谁都会,只有掌握了核心的技术,遇到复杂的需求才不会犯难.以后会按照官网逐渐完善其他功能.欢迎star. demo:https://hwlv.github.io/myplugin/fullpage/index.html github:https://github.com/hwlv/myplugin…

今天是端午自己做了一个小的送祝福链接  这里用到了fullpage插件 $('#container').fullpage({ navigation: false,        //navigation是否显示导航,默认为false easing: 'easeInQuart', scrollingSpeed: 400, loopBottom: false, loopTop: false, afterLoad: function(anchorLink, index) {//最后一页不显示向上滑动…

fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站.如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js. fullPage.js的主要功能有:支持鼠标滚动.支持前进后退和键盘控制.多个回调函数.支持手机.平板触摸事件.支持 CSS3 动画.支持窗口缩放.窗口缩放时自动调整.可设置滚动宽度.背…

运用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 动画插件. 导入顺序也如上所示,因为后…

参数说明 $(document).ready(function() { $('#fullpage').fullpage({ //Navigation menu: false,//绑定菜单,设定的相关属性与anchors的值对应后,菜单可以控制滚动,默认为false. anchors:['firstPage', 'secondPage'],//anchors定义锚链接,默认为[] lockAnchors: false,//是否锁定锚链接,默认为false,设为true后链接地址不会改变 navig…

1. fullpage 插件(全屏) 官网:http://www.jq22.com/ jqueryui 官网:http://jqueryui.com/draggable/ 1.1 使用方法 引入文件 <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <!-- jqu…

Advanced Tables 基于table插件的增强表格插件,添加了排序功能. tinymce.init({ plugins: 'table advtable', menubar: 'table' }); Anchor 锚点插件 tinymce.init({ selector: "textarea", // change this value according to your HTML plugins: "anchor", toolbar: "anc…

<div class="search"> <input type="text"></div> .search{ text-align: center;}.search input{ margin: 0 auto; padding: 0 10px; width: 536px; height: 34px; border: 1px solid rgba(255,255,255,.8); border-radius: 2px; color…

写在前面:经过系统的学习了原生JS之后,会发现其具有以下三个特点: 1.是一种解释性脚本语言(代码不进行预编译). 2.主要用来向 HTML 页面添加交互行为. 3.可以直接嵌入 HTML 页面,但写成单独的js文件有利于结构和行为的分离. 而接下来要讲的jQuery 就对原生javascript的一个扩展,封装,就是让javascript更好用,更简单. 换而言之,jquery就是要用更少的代码,漂亮的完成更多的功能.{Write less, Do more!} 1. jQuery 作为 Ja…

一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕分辨率:指在横纵向上的像素点数,单位是px,1px=1个像素点.一般以纵向像素*横向像素来表示一个手机的分辨率,如1920*1080.(这里的1像素指的是物理设备的1个像素点) 屏幕像素密度:屏幕上每英寸可以显示的像素点的数量,单位是ppi.屏幕像素密度与屏幕尺寸和屏幕分辨率有关,在单一变化条件下,…

官网加动画特效,哇哦,下面我介绍一下WOW.js 官网地址:https://www.delac.io/wow/ 点击github可以找到wow.js和wow.min.js 以及animate.css者animate.min.css wow.js依赖于animate.css,首先在头部引用animate.css或者animate.min.css. 在body底部引入wow.js 且初始化一下: <script src="js/wow.min.js"></script&g…

官网:http://mynameismatthieu.com/WOW/ 建议去官网一看 下载地址:https://github.com/matthieua/WOW 浏览器兼容 IE10+  Chrome  Firefox  Opera  Safari  IE6.IE7 等老旧浏览器不支持 CSS3 动画,所以没有效果:而 wow.js 也使用了 querySelectorAll 方法,IE 低版本会报错.为了达到更好的兼容,最好加一个浏览器及版本判断. 1.wow.js依赖于animate.cs…

实例方法: on() one() off() trigger() hover() 一.绑定事件与jQuery事件委托 $(selector).eventType(fn); $(selector).on(event,childSelector,data,function); $(selector).one(event,data,function); 1.jQuery可以直接通过点击内置事件类型方法来添加事件程序,比如添加点击事件:$("...").click(function(){con…

安装并使用 安装 npm install --save vue-fullpage.js 引入 // 引用fullpage 插件 import Vue from 'vue' import 'fullpage.js/vendors/scrolloverflow' // Optional. When using scrollOverflow:true import './fullpage.scrollHorizontally.min' // Optional. When using fullpage…

刚做好公司网站,通过全屏滚动,显著提高了官网的浏览体验.遂总结一下使用fullpage.js的方法.欢迎指正 一. fullpage.js简介 fullpage.js是一套实现浏览器全屏滚动的js插件,很多网站现在都使用了其来实现较好的浏览体验. 可以实现的功能: 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等 二.插件下载 npm|npm install…

css部分(此处需要导入jquery.fullPage.css) <style> .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;} .section2 p { position: relative; left: -%;} .section3 p { position: relative; bottom: -%;} .section4 p { display: none;} &…

1.引用文件 [html] view plain copy print?在CODE上查看代码片派生到我的代码片 <link rel="stylesheet" href="css/jquery.fullPage.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery-ui.min.js"></…

下载链接包括一些实例: http://www.dowebok.com/demo/2014/77/ 当然也可以从Github 上下载: https://github.com/alvarotrigo/fullPage.js 使用这个插件可以很轻松的完成一个看似高大上的网页.全屏切换.…

如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js 主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等 实…

fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等 1.选项 选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 slidesColo…

演 示 下 载   简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面,QQ浏览器的官网站.如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js. fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS…

fullPage.js主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等 模板展示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible&qu…

最近很流行整屏滚动的效果,无论是在PC端还是移动端,本人也借机学习了一下,主要通过jquery.funnPage.js插件+CSS3实现效果. 本人做的效果: PC端:http://demo.qpdiy.com/hxw/ss/h/index.html 移动端:http://demo.qpdiy.com/hxw/ss/h/s.html 首先使用要引入插件 <link rel="stylesheet" href="../c/jquery.fullPage.css"…

前言: 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次. 在学习过jQuery插件之后,才发现之前的很多网站特效完全可以借助jQuery插件来实现,今天我们来尝试使用move.js以及fullPage.js插件来制作一个"高端网站". 网站效果展示如下:  fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多…

文章转载自dowebok http://www.dowebok.com/ 原文链接:http://www.dowebok.com/77.html 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js. fullPage.js 是一个基于 jQuery 的插件,它能够…

兼容性: 支持 IE8+ 及其他现代浏览器. 主要功能: 1.支持鼠标滚动: 2.支持前进后退键盘控制; 3.多个回调函数; 4.支持手机.移动设备; 5.支持窗口缩放自动调整; 6.可设置滚动宽度.背景颜色.滚动速度.循环选项.回调.文本对齐方式等等; 7.支持CSS3动画; 实现方法: 1.插入jquery.fullPage.css; 2.插入jquery.js; 3.插入jquery-ui.js;(用于制作动画) 4.插入jquery.fullpage.js; 1 <link rel=&quo…

 fullpage 全屏插件 全屏滚动效果,原生js也很好实现,主要是用 mousewheel 鼠标滚轮滚动事件, 来判断上滚动还是下滚动,之后设置每次滚动的高度为屏幕的高度即可.但是,虽然效果简单,但是兼容性很差,要做很多兼容处理及比较麻烦啦! fullPage.js 是一个基于 jQuery 的插件,它能够帮你很方便.很轻松的制作出全屏网站. github 官网 https://github.com/alvarotrigo/fullPage.js 中文演示地址 http://www.dowe…