网站上面的内容里面放照片怎么做的,如何做一个网页,终身免费建站,各种网站末班GitHub:https://github.com/alvarotrigo/fullPage.js FullPage.js是一个基于JQuery的插件,可以很方便的制作出全屏网站; 一 特点: 1.支持鼠标滚动;2.支持键盘控制前进和后退;3.多个回调函数;4.支持手机/平板触摸事件;5.支持CSS3动画;6.支持窗口缩放,缩放时自动调整;7.jQuery兼… GitHub:https://github.com/alvarotrigo/fullPage.js FullPage.js是一个基于JQuery的插件,可以很方便的制作出全屏网站; 一 特点: 1.支持鼠标滚动;2.支持键盘控制前进和后退;3.多个回调函数;4.支持手机/平板触摸事件;5.支持CSS3动画;6.支持窗口缩放,缩放时自动调整;7.jQuery兼容1.7;IE8; 二 引入文件 1.引入FullPage.css 1 link relstylesheet hrefcss/jquery.fullpage.css 2.引入jquery.js 1 script srcjs/jquery.min.js/script 3.引入easings.js增强动画过渡效果,也可以使用完整的jQuery UI代替; 1 script srcjs/jquery.easings.min.js/script 4.引入FullPage.js 1 script srcjs/jquery.fullpage.js/script 三 HTML结构 1 !-- 每个section代表一屏,默认显示第一屏;如果要指定加载页面时显示的屏幕,可在对应的section加上classactive --2 div idwrapper3 div classsection第一屏/div4 div classsection第二屏/div5 div classsection第三屏/div6 /div7 8 !-- 可在section内加入slide; --9 div classsection
10 div classslide第一屏的第一屏/div
11 div classslide第一屏的第二屏/div
12 div classslide第一屏的第三屏/div
13 /div 四 JavaScript调用 1 script
2 $(function(){
3 $(#wrapper).fullpage();
4 });
5 /script 五 配置 1 $(document).ready(function() {2 $(#fullpage).fullpage({3 //Navigation4 menu: false, // 绑定菜单,设置的相关属性与anchors的值对应后,菜单可以控制滚动;5 anchors:[firstPage, secondPage], // 定义锚链接;6 navigation: false, // 是否显示项目导航;7 navigationPosition: right, // 项目导航的位置;8 navigationTooltips: [firstSlide, secondSlide], // 项目导航的tip;9 showActiveTooltips: false,
10 slidesNavigation: true, // 是否显示左右滑动的项目导航;
11 slidesNavPosition: bottom, // 左右滑动的项目导航的位置;
12
13 //Scrolling
14 css3: true, // 是否使用CSS3-transforms滚动;
15 scrollingSpeed: 700, // 滚动速度;
16 autoScrolling: true, // 是否使用插件的滚动方式,选择false会出现滚动条;
17 fitToSection: true,
18 scrollBar: false,
19 easing: easeInOutCubic, // 滚动动画方式;
20 easingcss3: ease,
21 loopBottom: false, // 滚动到最底部是否滚回顶部;
22 loopTop: false, // 滚动到最顶部是否滚回底部;
23 loopHorizontal: true, // 左右滑块是否循环;
24 continuousVertical: false, // 是否循环滚动;
25 normalScrollElements: #element1, .element2,
26 scrollOverflow: false, // 内容超过满屏后是否显示滚动条;
27 touchSensitivity: 15,
28 normalScrollElementTouchThreshold: 5,
29
30 //Accessibility
31 keyboardScrolling: true, // 是否使用键盘方向键导航;
32 animateAnchor: true, // 锚点控制滚动;
33 recordHistory: true, // 记录历史;
34
35 //Design
36 controlArrows: true, // 左右滑块箭头;
37 verticalCentered: true, // 内容是否垂直居中;
38 resize : false, // 字体是否随窗口缩放而缩放;
39 sectionsColor : [#ccc, #fff],
40 paddingTop: 3em, // 与顶部距离;
41 paddingBottom: 10px,
42 fixedElements: #header, .footer, // 定位某个元素;
43 responsive: 0,
44
45 //Custom selectors
46 sectionSelector: .section,
47 slideSelector: .slide,
48
49 //events
50 onLeave: function(index, nextIndex, direction){}, // 滚动前的回调函数;
51 afterLoad: function(anchorLink, index){}, // 滚动到某一屏后的回调函数;
52 afterRender: function(){}, // 页面结构生成后的回调函数;
53 afterResize: function(){},
54 afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){}, // 滚动到某一水平滑块后的回调函数;
55 onSlideLeave: function(anchorLink, index, slideIndex, direction){} // 某一水平滑块滚动前的回调函数;
56 });
57 }); 转载于:https://www.cnblogs.com/yizihan/p/4560787.html
