theme: condensed-night-purple highlight: a11y-dark
今日，下暴雨，天黑蒙蒙的。写篇文吧。
先看效果
先来看看效果：👆👆👆 （文章封面）
准备素材
准备一个白底背景图，和黑模式图，和一个中间分隔条。
白色底图：
黑色图：
分隔条：
衷心建议，如果想换成人变装模式，反差越大越精彩。
原理
一个盒子(背景图就是白色的那张），通过range类型的滑块input的拖动，来改变黑底图相对盒子的宽度width，以及分割线相对盒子最左边的距离left。
代码
// html
<div class="box">
<span class="divider" style="left: 44%"></span>
<input id="rangeInput" type="range" min="0" max="100" value="50" />
<div class="blackBg" style="width: 44%"></div>
</div>
// css
.box {
width: 782px;
height: 452px;
position: relative;
top: 0;
background-image: url('白色底图')
}
.divider {
width: 58px;
height: 486px;
position: absolute;
z-index: 2;
background-image: url('分隔线图')
}
.blackBg {
width: 0;
height: 100%;
background-image: url('黑色图'),
background-size: 782px 452px;
background-positon: left top;
background-repeat: no-repeat;
}
// type='range'的input
#rangeInput {
width: 100%；
position: absolute;
z-index: 3;
top: calc(50% + 10px);
opacity: 0;
cursor: ew-resize;
}
js 部分
<script type="text/javascript">
function setPosition(e) {
$(".divider").css({ left: e + "%" }), // 动 分隔条 相对盒子最左边的 距离 -> left
$(".blackBg").css({ width: e + "%" }); // 动 黑图 的 宽度 -> width
}
$("#rangeInput").bind("input", function() {
const e = $(this).val(); // 0 - 100
setPosition(e);
});
</script>
另外一种写法
实现方式: 就两张图做背景图片，然后控制布局位置，控制容器的宽高就行了。
<style>
* {
margin: 0px;
padding: 0px;
user-select: none;
}
.div {
border: 1px solid lightgray;
width: 400px;
height: 200px;
margin: 10px;
float: left;
position: relative;
}
.img1 {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 50%;
}
.img2 {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
right: 0;
}
.img1,
.img2 {
background-position: center center;
background-size: 400px 200px;
background-repeat: no-repeat;
}
.img1 {
background-position-x: 0;
}
.img2 {
background-position-x: 100%;
}
.bar {
position: absolute;
top: 0;
bottom: 0;
right: -4px;
width: 8px;
background-color: #037FFF;
cursor: ew-resize;
}
.stop {
pointer-events: none;
}
</style>
</head>
<body>
<div class="div">
<div class="img1" style="background-image: url(./image/black-bg.png);">
<div class="bar" data-flag="0"></div>
</div>
<div
class="img2"
style="background-image: url(./image/box-bg.png);"
></div>
</div>
</body>
<script>
$(document).ready(function() {
$(".bar").mousedown(function() {
$(this)
.parent()
.addClass("stop");
$(this)
.parent()
.next()
.addClass("stop");
$(this).attr("data-flag", "1");
});
$(".div").mousemove(function(e) {
const temp = $(this)
.find(".bar")
.attr("data-flag");
if (temp == "1") {
const w = $(this).width();
const x = e.offsetX;
const p = parseFloat((x / w).toFixed(2)) * 100;
$(this)
.children(".img1")
.css("width", p + "%");
$(this)
.children(".img2")
.css("left", p + "%");
}
});
$(document).mouseup(function() {
$(".img1,.img2").removeClass("stop");
$(".bar").attr("data-flag", "0");
});
});
</script>
效果如下:
好了，就这样，最后来个变身吧。下一篇。
层叠图片拖动对比
层叠图片拖动对比,实现原图和经过处理的图片进行对比，拖动中间的分割线来进行两张图片的细节对比。
结语
假设你是我的智囊团，团内有五个不同的董事做我的教练。五个董事分别是乔布斯、埃隆·马斯克、马云、柏拉图、雷·达利奥、他们每个人都有自己的个性，世界观，价值观，对问题有不同的看法，建议和意见。我会在这里说出我的处境和我的决策，请分别以他们的视角来审视我的决策，给出评判和建议。
问
: 人生遇到瓶颈，该如何继续向前？请你给出详细的三点建议。
答
Jobs: 第一,找到你最折腾的愿望,就是你最热爱的事情。第二,做出选择,专注其中一项。第三,勇于冒险,别让他们说你不能。只要去行动,结果就会来找你。
Elon Musk: 第一,提出一个更大的宏愿和目标。第二,将任务细分为一系列可行的里程碑。第三,硬下来做,不要因为遇到难关就停止前进。进步就是不断超越自己。
Ma Yun: 第一,冷静下来,审慎评估情况。第二,找出瓶颈的根本原因,是思维方式的问题还是外在条件的限制。第三,根据原因,采取调整思维或主动改变环境的对策。进步幅度控制在可持续的范围内。
Plato: 第一,通过理性思考,寻找决策的合理性和美善。第二,从更宽和深层的视角来审视问题,寻找隐性的启示。第三,以智慧和洞察作为引导,而不是情感或本能。在合理和美善中觅找到进步的方向。
Ray Dalio: 第一,冷静分析每个选择及其潜在结果各有何利弊。第二,权衡各种因素,对每种选择进行精细评估得分,以找出最佳方案。第三,做出选择后,继续审慎监控,评估最新信息,以确保方案继续较为 optimal,在必要时进行调整。适当的分析和决策过程就是提升的关键。
本文正在参加「金石计划」
