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 ...
随机推荐
- Java集合基于JDK1.8的ArrayList源码分析
本篇分析ArrayList的源码,在分析之前先跟大家谈一谈数组.数组可能是我们最早接触到的数据结构之一,它是在内存中划分出一块连续的地址空间用来进行元素的存储,由于它直接操作内存,所以数组的性能要比集 ...
- JavaScript基于原型的继承
在一个纯粹的原型模式中,我们会摒弃类,转而专注于对象,基于原型的继承相比基于类的继承的概念上更为简单 if( typeof Object.beget !== 'function') { Object. ...
- XE10开发的APP对于苹果IPV6上架要求的处理
1.服务器必须使用域名.不能使用IP地址2.Indy的话,域名加[]3.DataSnap的话,Params.Values['CommunicationIPVersion'] :='IP_IPv6';4 ...
- yolov3.cfg参数解读
对于模型的优化,我们可以通过适当修改网络基本配置信息完成训练上的优化. yolov3.cfg文件: [net]# Testing #测试模式 batch=1 subdivisions=1# Train ...
- NO13 Linux的基础优化-关闭SELinux功能-Linux的7种运行级别-防火墙设置-中文显示设置
壹 安装Linux系统后调优及安全设置: 1 关闭SELinux功能: [root@localhost data]# sed 's#SELINUX=enforcing#SELINUX=disable ...
- BeanUtils使用将一个对象拷贝到另外一个对象
这里的BeanUtils是BeanUtils是org.springframework.beans.BeanUtils,和org.apache.commons.beanutils.BeanUtils是有 ...
- 123-PHP类构造函数
<?php class ren{ //定义人类 private $name; //定义成员属性 public function __construct($name){ //定义构造函数 $thi ...
- 解决对路径bin\roslyn..的访问被拒绝
使用visual studio开发,一重新编译就会报错: 对路径“bin\roslyn\System.Reflection.Metadata.dll”的访问被拒绝 一开始的解决办法就是把bin下的文件 ...
- Node.js NPM 教程
NPM是Node.js的包(或模块)管理器,是Node.js应用程序开发的核心. www.npmjs.com上有海量的Node.js包,供免费下载使用. 当安装Node.js时,NPM程序会被同时安装 ...
- Spring 控制反转容器（Inversion of Control – IOC）
系列教程 Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of Contro ...