# 专题页面常用布局
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>城市页面</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/bootstrap-theme.min.css">
<link rel="stylesheet" href="./css/iconfont.css">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.swiper_container {
overflow: hidden;
width: 100%;
height: 100%;
}
.slide {
width: 100%;
}
.swiper_show {
width: 100%;
height: 100%;
position: relative;
top: 0;
left: 0;
}
.part1 {
background-image: url('./image/qb.png');
background-size: 100% 100%;
}
.part2 {
background: #fff;
}
.part3 {
background: yellow;
}
.part4 {
background: red;
}
.part5 {
background: blue;
}
.part6 {
background: green;
}
.part7 {
background: bisque;
}
.swiper_list {
position: fixed;
top: 50%;
left: 30px;
transform: translateY(-50%);
}
.swiper_dot {
display: block;
width: 15px;
height: 15px;
line-height: 15px;
text-align: center;
margin-bottom: 5px;
}
.swiper_dot span {
display: inline-block;
width: 8px;
height: 8px;
background-color: #000;
border-radius: 50%;
transition: all ease 0.5s;
}
.swiper_dot span:hover {
width: 10px;
height: 10px;
}
.swiper_dot.active span {
width: 12px;
height: 12px;
background-color: #fff;
}
.button_group {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.button .l-icon {
display: block;
width: 48px;
height: 48px;
text-align: center;
text-decoration: none;
line-height: 48px;
background-color: #909399;
font-size: 30px;
color: #fff;
}
.button {
margin: 2px 0;
position: relative;
display: block;
}
.button:hover {
text-decoration: none;
}
.button.active {
background-color: #000;
}
.l-qrcode {
position: absolute;
right: 48px;
bottom: 0;
}
.l-qrcode img {
width: 0;
height: 0;
transform-origin: right bottom;
transform: scale(0);
transition: all ease 0.5s;
}
.button[animate="show"]:hover .l-qrcode img {
width: 120px;
height: 120px;
transform: scale(1);
}
.l-info {
width: 74px;
position: absolute;
right: 58px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
text-align: center;
}
.l-info span {
display: block;
background-color: rgba(0,0,0, 0.6);
padding: 5px;
color: #fff;
border-radius: 5px;
visibility: hidden;
opacity: 0;
transition: all ease 0.5s;
position: relative;
}
.l-info span[trangle]::before {
content: '';
display: block;
position: absolute;
top: 50%;
right: -16px;
width: 0;
height: 0;
transform: translateY(-50%);
border-top: 8px solid transparent;
border-right: 8px solid transparent;
border-left: 8px solid rgba(0,0,0,0.6);
border-bottom: 8px solid transparent;
}
.button[animate="show"]:hover .l-info span{
opacity: 1;
visibility: visible;
}
.button[animate="top"] {
opacity: 0;
visibility: hidden;
}
</style>
</head>
<body>
<section class="swiper_container">
<div class="swiper_show">
<div class="slide part1"></div>
<div class="slide part2"></div>
<div class="slide part3"></div>
<div class="slide part4"></div>
<div class="slide part5"></div>
<div class="slide part6"></div>
<div class="slide part7"></div>
</div>
<!--轮播点-->
<div class="swiper_list">
<div data-index='0' class="swiper_dot"><span></span></div>
<div data-index="1" class="swiper_dot"><span></span></div>
<div data-index="2" class="swiper_dot"><span></span></div>
<div data-index="3" class="swiper_dot"><span></span></div>
<div data-index="4" class="swiper_dot"><span></span></div>
<div data-index="5" class="swiper_dot"><span></span></div>
<div data-index="6" class="swiper_dot"><span></span></div>
</div>
</section>
<div class="button_group">
<div animate="top" class="button">
<i class="l-icon iconfont icon-xiangshangjiantou"></i>
</div>
<a animate="show" class="button">
<i class="l-icon iconfont icon-liaotian"></i>
<div class="l-info">
<span trangle>免费咨询</span>
</div>
</a>
<div animate="show" class="button">
<i class="l-icon iconfont icon-erweima"></i>
<div class="l-qrcode">
<img src="./image/qrcode.jpg" alt="">
</div>
</div>
</div>
</body>
<script>
let FullPage = function () {
// 初始化参数变量
let $height = this.$height = $('.swiper_container').height()
let slide= $('.slide')
slide.css({'height': $height})
let len = slide.length
$('.swiper_show').css({"height": len * 974})
// 内置对象
let Scroll = function () {
}
// 页面翻滚函数
Scroll.prototype.start = function ($index, $height) {
let offset = -$index * $height
$(".swiper_show").queue('scroll', function (next) {
$(this).animate({"top": offset+"px"}, 500, function () {
FullPage.$tottle = true
})
next()
})
$('.swiper_show').dequeue('scroll')
}
// 检测$index函数
Scroll.prototype.isRightIndex = function ($index) {
if($index < FullPage.$min) {
return FullPage.$min;
}
if ($index > FullPage.$max) {
return FullPage.$max;
}
// 记录$index
FullPage.$index = $index
return $index
}
// 回到顶部
Scroll.prototype.scrollTop = function (scroll, flag) {
if (flag === 0) {
FullPage.$index = 0
scroll.start(0, $height)
console.log($('[animate="top"]'))
$('[animate="top"]').queue('scrollTop',function (next) {
$(this).animate({'opacity': 0}, {
complete: function () {
$(this).css({'visibility': 'hidden'})
}
})
next()
}).dequeue('scrollTop')
} else {
$('[animate="top"]').queue('scrollTop',function (next) {
$(this).css({'visibility': 'visible'}).animate({'opacity': 1})
next()
}).dequeue('scrollTop')
}
}
// 轮播点图动画效果
Scroll.prototype.dotChange = function ($index) {
$('.swiper_dot').removeClass('active')
$($('.swiper_dot')[$index]).addClass('active')
}
let scroll = new Scroll()
$('[animate="top"]').on('click', function () {
scroll.scrollTop(scroll, 0)
})
// 绑定轮播事件
this.init = function () {
$('.swiper_show').mousewheel(function (event, delta) {
let $index = FullPage.$index
if(FullPage.$tottle) {
FullPage.$tottle = false
if(delta< 0) {
// 向下翻滚
$index++
$index = scroll.isRightIndex($index)
scroll.start($index, $height)
scroll.scrollTop(scroll, $index)
scroll.dotChange($index)
}
if(delta > 0) {
// 向上翻滚
$index--
$index = scroll.isRightIndex($index)
scroll.start($index, $height)
scroll.scrollTop(scroll, $index)
scroll.dotChange($index)
}
}
})
}
this.init()
}
// 对象全局变量
FullPage.$index = 0
FullPage.$tottle = true
FullPage.$max = 6
FullPage.$min = 0
new FullPage()
</script>
</html>
~~~
- 前端
- pc端
- 京东无延时菜单效果
- datapicker组件的编写
- cursor禁止默认样式
- 移动端
- web在真机调试
- 有关vue的上拉加载
- 下拉刷新
- vue获取dom节点
- worker技术
- h5页面唤醒手机拨号，发短信功能
- 弹出层唤醒挤压css背景图片
- 23模式
- 基础模式
- SMD同步模块
- canvas
- 点的均匀分布
- 线条绘画
- canvas常见的全局属性
- 判断点在某个区间内
- 保证动画效果的流畅性
- arc函数学习
- cookies
- 本地服务搭建
- Mint UI框架的学习
- 第一天
- Swiper组件的解析
- loadmore组件
- 二维码的生成
- 前端优化
- 浏览器缓存
- indexdb本地数据库的使用
- 浅谈前端优化
- css渐变属性
- 前端常用组件学习
- picker组件
- vue
- 模块下的state访问
- vue的进阶
- npm包的发布
- 淘宝移动端适配问题
- vue的生命周期的理解
- vue的路由学习
- vue自带的动画效果
- vue 项目里，img标签报错，添加默认图片
- axios 实现loading加载提示
- qs库
- vue的v-for指令无法使用在tr、td中
- vue打包之后，npm run dev 空白
- vue 单页面百度统计
- unix时间转化
- UI组件的实现
- picker
- upload组件
- js动画效果
- canvas甜甜圈的编写
- 瀑布流实现
- 适配问题
- 图片加载
- js基础知识
- js数组合并
- 响应布局总结
- 组件开发
- grid组件
- 专题页面常用布局页面
- scroll滚动问题
- 项目整理经验收集
- 画图工具应用实现记录
- 参考线实现
- JCode
- 多条件筛选不用ajax的原因分析
- node
- koa路由下的分块
- 连接数据库mysql
- 初步搭建数据库模型
- java
- spring框架的学习
- maven 搭建web项目
- 建站
- 关联github
- 杂文
- 后端常用成熟系统
- node实战练习
- 编写邮箱通知
- 微信小程序
- 模板之坑
- 模板坑之数据传入
- 小程序组件化之一
- 有关this的绑定
- 小程序组件化之二
- 小程序分包加载
- tab切换，页面状态不更新
- 小程序请求组件（草稿）
- php学习之路
- 文件上传
- 有关数据库时间类型的插入
- Ubuntu下的php开启扩展模块
- windows系统下的hosts文件位置
- 腾讯云的cos
- thinkPHP
- 模块设计
- 模型的使用
- ajax的请求异常总结
- apache服务器
- 虚拟主机的建立
- ssh的使用
- ftp服务器配置
- Lamp的搭建
- ftp从零开始配置
- https的配置
- git hooks实现简单的自动部署
- ubuntu系统登录远程ubuntu服务器
- ubuntu
- 新建用户需要使用sudo
- sftp的文件上传问题
- 配置apache部分问题总结
- git服务器的搭建
- githook的学习
- ubuntu 虚拟主机搭建
- ubunut的服务器的防火墙的关闭
- 宝塔部署laravel
- 关于宝塔phpmyadmin无法访问的问题
- 解决码云每次提交输入密码的问题
- mysql
- phpmyadmin的安装
- 远程登陆数据库
- git的使用
- 拉去分支的代码
- git remote指令
- 学习临时笔记
- ios兼容性问题
- 苹果获取屏幕宽度问题
- toDataURL无法导出图片
- 苹果触屏滚动，下拉刷新问题
- jquery动画
- jquery的animate无法使用transform
- jquery队列queue
- css重学之路
- 规范一
- css3的matrix属性
- 淘宝适配方案
- Yii框架学习
- gd库的支持安装
- larval框架学习
- 中间件
- 指令
- 自定义指令生成token
- 微信登录后端篇
- 宝塔apache配置ssl
- SVN
- PS
- 快捷键
- Redis
- Redis在Unbtun下的配置
- 微信公众号开发
- 测试号配置