新增第117个小实例：3层图像的滑动对比效果
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
d7384d8921
commit
78e1a4f5df
|
|
@ -120,4 +120,5 @@
|
|||
113. HTML5+CSS3+JS小实例：圆形剪切图片光标悬停特效
|
||||
114. HTML5+CSS3+JS小实例：Tabbar图标栏动画切换特效
|
||||
115. HTML5+CSS3+JQuery小实例：可爱的熊猫遮眼登录界面
|
||||
116. HTML5+CSS3小实例：社交卡片悬停特效
|
||||
116. HTML5+CSS3小实例：社交卡片悬停特效
|
||||
117. HTML5+CSS3+JS小实例：3层图像的滑动对比效果
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
*{
|
||||
/* 初始化 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
/* 弹性布局 水平+垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #eee;
|
||||
/* 防止选取 */
|
||||
user-select: none;
|
||||
}
|
||||
.container{
|
||||
width: 765px;
|
||||
height: 600px;
|
||||
/* 溢出隐藏 */
|
||||
overflow: hidden;
|
||||
/* 阴影 */
|
||||
box-shadow:
|
||||
0 10px 20px rgba(0,0,0,0.2),
|
||||
0 6px 6px rgba(0,0,0,0.25);
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
}
|
||||
.bottom,
|
||||
.middle,
|
||||
.top{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
/* 设置元素不对指针事件做出反应 */
|
||||
pointer-events: none;
|
||||
}
|
||||
.bottom img,
|
||||
.middle img,
|
||||
.top img{
|
||||
height: 100%;
|
||||
}
|
||||
/* 方便看效果 */
|
||||
.top{
|
||||
width: 175px;
|
||||
}
|
||||
/* 滑块 */
|
||||
.scroller{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #fff;
|
||||
/* 绝对定位 垂直居中 */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 150px;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 50%;
|
||||
/* 阴影 */
|
||||
box-shadow: 3px 0 6px rgba(0,0,0,0.15);
|
||||
cursor: pointer;
|
||||
/* 默认不透明度为0.9 */
|
||||
opacity: 0.9;
|
||||
/* 不透明度变化时的过渡效果 */
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
/* 箭头图标 */
|
||||
.scroller .fa{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
/* 弹性布局 内容居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 25px;
|
||||
}
|
||||
/* 分割线（上下两段） */
|
||||
.scroller::before,
|
||||
.scroller::after{
|
||||
content: "";
|
||||
width: 7px;
|
||||
height: 9999px;
|
||||
/* 绝对定位 水平居中 */
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
/* 顶层 */
|
||||
z-index: 9;
|
||||
box-shadow: 3px 0 6px rgba(0,0,0,0.15);
|
||||
/* 过渡 */
|
||||
transition: 0.2s;
|
||||
}
|
||||
.scroller::before{
|
||||
top: 49px;
|
||||
}
|
||||
.scroller::after{
|
||||
bottom: 49px;
|
||||
}
|
||||
.scroller:hover{
|
||||
opacity: 1;
|
||||
}
|
||||
/* 中间层滑块位置 */
|
||||
.scroller-middle{
|
||||
margin-top: 25px;
|
||||
}
|
||||
/* 最顶层滑块位置 */
|
||||
.scroller-top{
|
||||
margin-top: -25px;
|
||||
}
|
||||
/* 中间层滑块、分割条的颜色 */
|
||||
.scroller-middle .fa{
|
||||
border: 5px solid lightsteelblue;
|
||||
color: lightsteelblue;
|
||||
}
|
||||
.scroller-middle::before,
|
||||
.scroller-middle::after{
|
||||
background-color: lightsteelblue;
|
||||
}
|
||||
/* 最顶层滑块、分割条的颜色 */
|
||||
.scroller-top .fa{
|
||||
border: 5px solid skyblue;
|
||||
color: skyblue;
|
||||
}
|
||||
.scroller-top::before,
|
||||
.scroller-top::after{
|
||||
background-color: skyblue;
|
||||
}
|
||||
/* 滑块滑动时的样式 */
|
||||
.scrolling{
|
||||
pointer-events: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>3层图像的滑动对比效果</title>
|
||||
<!-- 引入字体图标 -->
|
||||
<link rel="stylesheet" href="/fonts/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="117.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="bottom">
|
||||
<img src="images/3.jpg" alt="">
|
||||
</div>
|
||||
<div class="middle">
|
||||
<img src="images/2.jpg" alt="">
|
||||
</div>
|
||||
<div class="scroller scroller-middle">
|
||||
<i class="fa fa-arrows-h"></i>
|
||||
</div>
|
||||
<div class="top">
|
||||
<img src="images/1.jpg" alt="">
|
||||
</div>
|
||||
<div class="scroller scroller-top">
|
||||
<i class="fa fa-arrows-h"></i>
|
||||
</div>
|
||||
</div>
|
||||
<script src="117.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
// 是否激活滑动，默认不激活
|
||||
let active=false;
|
||||
// 中间层滑块
|
||||
let scroller_middle=document.querySelector('.scroller-middle');
|
||||
// 最顶层滑块
|
||||
let scroller_top=document.querySelector('.scroller-top');
|
||||
|
||||
// 绑定中间层的鼠标按下事件
|
||||
scroller_middle.addEventListener('mousedown',function(){
|
||||
// 中间层滑动被激活，并为中间层滑块添加scrolling样式
|
||||
active='middle';
|
||||
scroller_middle.classList.add('scrolling');
|
||||
});
|
||||
// 为body绑定鼠标松开事件
|
||||
document.body.addEventListener('mouseup',function(){
|
||||
// 取消滑动，并移除中间层的scrolling样式
|
||||
active=false;
|
||||
scroller_middle.classList.remove('scrolling');
|
||||
});
|
||||
// 为body绑定鼠标移出事件
|
||||
document.body.addEventListener('mouseleave',function(){
|
||||
// 取消滑动，并移除中间层的scrolling样式
|
||||
active=false;
|
||||
scroller_middle.classList.remove('scrolling');
|
||||
});
|
||||
|
||||
// 绑定最顶层的鼠标按下事件
|
||||
scroller_top.addEventListener('mousedown',function(){
|
||||
// 最顶层滑动被激活，并为最顶层滑块添加scrolling样式
|
||||
active='top';
|
||||
scroller_top.classList.add('scrolling');
|
||||
});
|
||||
// 为body绑定鼠标松开事件
|
||||
document.body.addEventListener('mouseup',function(){
|
||||
// 取消滑动，并移除最顶层的scrolling样式
|
||||
active=false;
|
||||
scroller_top.classList.remove('scrolling');
|
||||
});
|
||||
// 为body绑定鼠标移出事件
|
||||
document.body.addEventListener('mouseleave',function(){
|
||||
// 取消滑动，并移除最顶层的scrolling样式
|
||||
active=false;
|
||||
scroller_top.classList.remove('scrolling');
|
||||
});
|
||||
|
||||
// 为body绑定鼠标移动事件
|
||||
document.body.addEventListener('mousemove',function(e){
|
||||
// 判断激活状态，不激活则直接返回
|
||||
if(!active) return;
|
||||
// 否则
|
||||
// 获取鼠标在页面中的X坐标
|
||||
let x=e.pageX;
|
||||
// 计算要滑动到的位置
|
||||
x-=document.querySelector('.container').getBoundingClientRect().left;
|
||||
// 滑动到计算好的位置
|
||||
scrollIt(x);
|
||||
});
|
||||
|
||||
// 滑动到指定位置
|
||||
function scrollIt(x){
|
||||
// 计算滑动的距离
|
||||
let transform=Math.max(0,(Math.min(x,document.querySelector('.container').offsetWidth)));
|
||||
if(active==='middle'){
|
||||
// 滑动的是中间层
|
||||
// 根据计算好的距离，设置中间层的宽度
|
||||
document.querySelector('.middle').style.width=transform+'px';
|
||||
// 设置中间层滑块的水平位置
|
||||
scroller_middle.style.left=transform-25+'px';
|
||||
// 如果中间层滑块和最顶层滑块相交，根据中间层的滑动距离设置最顶层的滑动距离（一起滑动）
|
||||
if(scroller_top.getBoundingClientRect().left>scroller_middle.getBoundingClientRect().left-5){
|
||||
document.querySelector('.top').style.width=transform-5+'px';
|
||||
scroller_top.style.left=transform-30+'px';
|
||||
}
|
||||
}
|
||||
if(active==='top'){
|
||||
// 滑动的是最顶层
|
||||
// 根据计算好的距离，设置最顶层的宽度
|
||||
document.querySelector('.top').style.width=transform+'px';
|
||||
// 设置最顶层滑块的水平位置
|
||||
scroller_top.style.left=transform-25+'px';
|
||||
// 如果最顶层滑块和中间层滑块相交，根据最顶层的滑动距离设置中间层的滑动距离（一起滑动）
|
||||
if(scroller_top.getBoundingClientRect().left>scroller_middle.getBoundingClientRect().left-5){
|
||||
document.querySelector('.middle').style.width=transform+5+'px';
|
||||
scroller_middle.style.left=transform-20+'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化
|
||||
active='middle';
|
||||
scrollIt(510);
|
||||
active='top';
|
||||
scrollIt(255);
|
||||
active=false;
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 73 KiB |
Loading…
Reference in New Issue