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 ...
随机推荐
- ubuntu 新建用户后 不能使用TAB键、上下键，命令行不显示当前路径的解决
因默认ubuntu创建的普通帐号,默认shell为/bin/sh,而这不支持tab等键的,所以将「指定用户」帐号的shell改为/bin/bash就可以了. 1.查看当前的shell:# echo $ ...
- JVM：Java 类的加载机制
虚拟机把描述类的数据从 Class 文件加载到内存,并对数据进行校验,转换,解析和初始化,最终形成可以被虚拟机直接使用的 Java 类型,这就是虚拟机的类加载机制. 类的生命周期 类从被加载到虚拟机内 ...
- 三、深入Vue组件——Vue插槽slot、动态组件
一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...
- python基础数据类型--集合（set）
python基础数据类型--集合(set) 集合是一个数学概念由一个或多个确定的元素所构成的整体叫做集合 集合中的三个特征 1.确定性(元素必须死可hash) 2.互异性(去重) 3.无序性(集合中的 ...
- Golang的运算符-比较运算符
Golang的运算符-比较运算符 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.比较运算符概述 比较运算符也称为关系运算符,比较运算符返回的类型为bool类型,常见的比较运算符 ...
- C语言备忘录——static
对于这个关键字我一直没有弄清楚,今天特地去花了一定的时间去理解这个关键字.在函数或变量声明时,在数据类型前加上 static 后会有以下几个效果 一.用于函数定义时: 1.函数的链接属性会被修改,从e ...
- Linux系统下的/etc/nsswitch.conf文件
一.什么是nsswithch.conf(服务搜索顺序)文件呢? nsswitch.conf(name service switch configuration,名字服务切换配置)文件位于/etc目录下 ...
- 洛谷 三月月赛 B
搞出每一位与前一位的差,然后区间修改只是会影响区间的端点,所以只修改一下端点的值就好. %%%高一神犇线段树 #include<bits/stdc++.h> #define N 10000 ...
- 转载-Logistic回归总结
Logistic回归总结 作者:洞庭之子 微博:洞庭之子-Bing (2013年11月) 1.引言 看了Stanford的Andrew Ng老师的机器学习公开课中关于Logistic Regress ...
- VUE- Cordova打包APP
VUE- Cordova打包APP 现在使用vue开发的项目越来越多,使用vue开发的移动端打包就成了最大的问题.现在前端打包方案有好多种,但是综合来说,我比较喜欢用cordova来进行Android ...