- jQuery 教程
- jQuery - 主页
- jQuery - 概述
- jQuery - 基础知识
- jQuery - 语法
- jQuery - 选择器
- jQuery - 事件
- jQuery - 属性
- jQuery-AJAX
- jQuery DOM 操作
- jQuery-DOM
- jQuery - 添加元素
- jQuery - 删除元素
- jQuery - 替换元素
- jQuery CSS 操作
- jQuery - CSS 类
- jQuery - 尺寸
- jQuery - CSS 属性
- jQuery 效果
- jQuery - 效果
- jQuery - 动画
- jQuery - 链接
- jQuery - 回调函数
- jQuery 遍历
- jQuery - 遍历
- jQuery - 遍历祖先
- jQuery - 遍历后代
- jQuery用户界面
- jQuery - 交互
- jQuery - 小部件
- jQuery - 主题
- jQuery 参考
- jQuery - 实用程序
- jQuery 插件
- jQuery - 插件
- jQuery - PagePiling.js
- jQuery-Flickerplate.js
- jQuery - Multiscroll.js
- jQuery - Slidebar.js
- jQuery - Rowgrid.js
- jQuery - Alertify.js
- jQuery - Progressbar.js
- jQuery - Slideshow.js
- jQuery - Drawsvg.js
- jQuery - Tagsort.js
- jQuery - LogosDistort.js
- jQuery - Filer.js
- jQuery - Whatsnearby.js
- jQuery - Checkout.js
- jQuery - Blockrain.js
- jQuery - Producttour.js
- jQuery - Megadropdown.js
- jQuery - Weather.js
- jQuery 有用资源
- jQuery - 问题与解答
- jQuery - 快速指南
- jQuery - 有用的资源
- jQuery - 讨论
jQuery - 页面起球
pagePiling.js 是一个 jQuery 插件,用于将布局部分相互“堆积”并通过滚动来访问它们。
一个简单的主题示例如下所示 -
<!DOCTYPE html> <html xmlns = "https://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" /> <link rel = "stylesheet" type = "text/css" href = "https://fonts.googleapis.com/css?family=Lato:300,400,700" /> <link rel = "stylesheet" type = "text/css" href = "/jquery/src/pagepilling/jquery.pagepiling.css" /> <link rel = "stylesheet" type = "text/css" href = "/jquery/src/pagepilling/examples.css" /> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script> <script type = "text/javascript" src = "/jquery/src/pagepilling/jquery.pagepiling.min.js"> </script> <script type = "text/javascript"> $(document).ready(function() { $('#pagepiling').pagepiling({ menu: '#menu', anchors: ['page1', 'page2', 'page3', 'page4'], sectionsColor: ['#bfda00', '#2ebe21', '#2C3E50', '#51bec4'], navigation: { 'position': 'right', 'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Pgae 4'] }, afterRender: function(){ //playing the video $('video').get(0).play(); } }); }); </script> <style> .section { text-align:center; } #myVideo { position: absolute; z-index: 4; right: 0; bottom: 0; top:0; right:0; width: 100%; height: 100%; background-size: 100% 100%; background-color: black; /* in case the video doesn't fit the whole page*/ background-image: /* our video */; background-position: center center; background-size: contain; object-fit: cover; /*cover video background */ } #section1 .layer { position: absolute; z-index: 5; width: 100%; left: 0; top: 43%; height: 100%; } #section1 h1 { color:#fff; } #infoMenu li a { color: #fff; } </style> </head> <body> <ul id = "menu"> <li data-menuanchor = "page1" class = "active"> <a href = "#page1">Page 1</a></li> <li data-menuanchor = "page2"><a href = "#page2"> Page 2</a></li> <li data-menuanchor = "page3"><a href = "#page3"> Page 3</a></li> </ul> <div id = "pagepiling"> <div class = "section" id = "section1"> <video autoplay loop muted id = "myVideo"> <source src = "imgs/flowers.mp4" type = "video/mp4"> <source src = "imgs/flowers.webm" type = "video/webm"> </video> </div> <div class = "section" id = "section2"> <div class = "intro"> <h1>No limits</h1> <p>Anything is possible with Tutorialspoint</p> </div> </div> <div class = "section" id = "section4"> <div class = "intro"> <h1></h1> <p>Simple Easy Learning</p> </div> </div> </div> </body> </html>
这应该产生以下结果 -