h5-全屏插件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*交集选择器:h3当当前元素同时添加了second和current的样式的时候才有效果*/
.first.current h3{
font-size: 100px;
}
</style>
<!--因为这个全屏插件是基于jquery的，所以要在导入前先导入jquery-->
<script src="../js/jquery-3.4.1.js"></script>
<script src="../js/jquery.fullPage.min.js"></script>
</head>
<body>
<div id="dowebok">
<div class="section first">
<h3>第一屏</h3>
</div>
<div class="section second">
<h3>第二屏</h3>
</div>
<div class="section">
<h3>第三屏</h3>
</div>
<div class="section">
<h3>第四屏</h3>
</div>
</div>
<script>
$(function(){
$('#dowebok').fullpage({
/*设置每一屏的背景颜色*/
sectionsColor:["red","green","blue","pink"],
/*当滚动到某一屏之后调用
* index:当前屏的索引，索引从1开始
* */
afterLoad:function (anchorLink,index) {
$(".section").removeClass("current");
alert(index);
/*加样式， 当滚动到某一屏之后，为元素添加样式 -- 标记*/
$(".section").eq(index-1).addClass("current");
}
});
});
</script>
</body>
</html>
全屏插件下载地址：http://www.dowebok.com/77.html
全屏插件网页中有详细的介绍和案例可以查看，这里就不多介绍了
h5-全屏插件的更多相关文章
- java_eclipse_maven_svn_主题彩色插件_全屏插件
作为一名不算新手的猿猿,还来纠结IDE环境搭建实属不该,不过着实纠结了不少时间. target: eclipse + maven +svn + 设置默认编码+全屏 绕的路就不说了,直奔主题,由于mav ...
- fullpage 全屏插件
fullpage 全屏插件 全屏滚动效果,原生js也很好实现,主要是用 mousewheel 鼠标滚轮滚动事件, 来判断上滚动还是下滚动,之后设置每次滚动的高度为屏幕的高度即可.但是,虽然效果简单, ...
- H5全屏滚动专题页最佳实践
1.slip.js + rem.js 主要插件: slip.js github: https://github.com/binnng/slip.js rem.js 插件为阿里淘宝的 rem 实现的基础 ...
- Eclipse/MyEclipse全屏插件
此插件可以让Eclipse/MyEclipse的界面全屏,隐藏菜单栏和状态栏! MyEclipse 2014/2015中亲测有效! 插件下载: http://files.cnblogs.com/got ...
- 六一广告页H5全屏滚动效果实现
明天就六一儿童了(放假了),在这里提前祝大家周末快乐,每逢节假日公司必然会推出h5活动页的需求,这次六一儿童节也不例外,产品这次倒是没提什么互动效果需求,只不过根据UI妹子给的设计图,图片与图片中颜色 ...
- FullPage.js全屏插件文档及使用方法
简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站 下载地址 下载地址 相关示例:基于fullpage.js实现的360全屏滑动效果 支持功能 支持 ...
- 虚拟机VMWare安装苹果系统MacOS详细教程（联网设置，全屏插件、文件互传）
运行环境: VMware® Workstation 12 Pro(自行安装,或者用这个) 推荐(下面以10.11.6版本做的教程,但是安装时推荐使用此版本安装然后升级到10.11.6):MacOS X ...
- jQuery全屏插件Textarea Fullscreen
插件描述 Textarea Fullscreen是一个jquery插件,可以将textarea设置为全屏模式 使用方法 引用jquery.js,jquery.textareafullscreen.js ...
- gvim 全屏 插件
1.这里下载插件zip解压后,将fullscreen.dll放到gvim.exe同目录下 2.执行 :call libcallnr()//切换全屏模式 3.上面的命令非常麻烦,可以在_vimrc中ma ...
- vue 中使用 screenfull.js 全屏插件
参考网址: https://blog.csdn.net/houyibing930920/article/details/89214200 https://www.jianshu.com/p/cfbb1 ...
随机推荐
- Git闪退问题
打开Git 会一闪而过.并出现一个错误的日志文件.自己尝试安装了几个不同的版本Git还是解决不了问题.后来自己在网上找了一些办法,并进行总结 1. 进入git目录下的bin目录执行rebase -b ...
- (转)如何判断VPS是基于哪种虚拟技术？Xen、OpenVZ、Xen HVM、KVM还是VMware
对于VPS新手来说,怕被无良的奸商给忽悠,下的Xen的却给的OpenVZ的,如何来判断自己买的VPS是那种虚拟技术的,下面VPS侦探整理一些常见的方法. 1.通过系统上的相关目录或文件判断 执行:ls ...
- Java笔记: 初始化块
Java语言提供了很多类初始化的方法,包括构造器.初始化器等.除了这两种方法之外,我们还可以用初始化块(initialization block)来实现初始化功能. 基本语法 初始化块是出现在类声明中 ...
- Android Studio相关
1.下载安装 Android Studio 2.打开已有或是新建工程,gradle编译时候会报错(被墙),可以切换阿里的源 修改build.gradle 的配置: buildscript { repo ...
- android studio 入门坑
安装 android studio,碰到下面这个图片,直接跳过. 安装时候,选择自定义设置,里面可以配置 sdk 的存放位置. 新建工程后,gradle sync 比较慢,可以 修改工程中的 buil ...
- c# 外挂操作（内存操作）（内存读写取窗口句柄移动窗口取模块地址）工具类
来源于网上 参考 https://www.cnblogs.com/fuhua/p/5877781.html 等众多文章 详情取看我第二个例子封装功能较多 https://www.cnblogs.co ...
- JuJu团队12月1号工作汇报
JuJu团队12月1号工作汇报 JuJu Scrum 团队成员 今日工作 剩余任务 困难 于达 修改generator函数 优化代码 不熟悉julia 婷婷 和金华一起调试main.jl 继 ...
- Sass - &引用父选择器
描述: 您可以使用&字符选择父级选择器. 它告诉父选择器应该插入的位置. 例一:&在前 h3 { font-size: 20px margin-bottom: 10px &.s ...
- HTML的文档结构与语法（一）
一.走进Web开发 Web运行的原理: 二.HTML 1.1什么是html HTML是用来描述网页的一种语言 HTML指的是超文本标记语言(Hyper Text Markup Language) 超文 ...
- objectarx 批量倒角
这个插件支持AcDbPolyline的倒角,封闭的和没封闭的都可以.刚开始做的时候,发现倒一个角借助云幽课堂里的代码就可以做,后来做一条从左开始画的非封闭的多段线,发现向上凹和向下凹的角不能同时被倒, ...