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公钥报错：unknown key type -rsa
配置 git公钥的时候出现:ssh-keygen unknown key type -rsa 一个解决办法是去本地寻找.ssh文件,参考路径(C:\Users\Administrator.ssh),把 ...
- UVA - 10635 Prince and Princess（LCS，可转化为LIS）
题意:有两个长度分别为p+1和q+1的序列,每个序列中的各个元素互不相同,且都是1~n2的整数.两个序列的第一个元素均为1.求出A和B的最长公共子序列长度. 分析: A = {1,7,5,4,8,3, ...
- Arduino 的读串口与写串口
//准备一下 while(Serial.available()>0) WifiSerial.write(Serial.read()); wh ...
- R apply()函数
创建一个列表变量,它的第一个元素包含所有从0到9的平方数,第二个元素为10到19之内的所有平方数,依此类推,最后一个元素为90到99之内的平方数.没有平方数的元素也应该被包含在内! 学习网友的解题思路 ...
- 爬虫(十七)：Scrapy框架(四) 对接selenium爬取京东商品数据
1. Scrapy对接Selenium Scrapy抓取页面的方式和requests库类似,都是直接模拟HTTP请求,而Scrapy也不能抓取JavaScript动态谊染的页面.在前面的博客中抓取Ja ...
- 竟然把Ruoyi在我自己的Eclipse编译成功，并能跑通了。。。。服了我自己了
前几天,下载最新ECLISPSE2019压缩包,解压缩成功,没提示不是免费:eclipse-jee-2019-12-R-win32-x86_64.zip然后我配置好了maven于是我1月2日晚一时兴起 ...
- 070-PHP数组相加
<?php $arr1=array('a','b','c'); //定义一个数组 echo '数组$arr1的信息:<br />'; print_r($arr1); //输出数组信息 ...
- 《新标准C++程序设计》4.1（C++学习笔记12）
运算符重载的概念和原理 一.运算符重载的需求 C++预定义的“+.-. * ./.%. ^ .&.~.!.|. = .<< >>.!= ”等运算符,只能用于基本数据类型 ...
- IISHelper操作iis
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- Elasticsearch 批处理
章节 Elasticsearch 基本概念 Elasticsearch 安装 Elasticsearch 使用集群 Elasticsearch 健康检查 Elasticsearch 列出索引 Elas ...