<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrap {
position: absolute;
top: 100px;
left: 50%;
margin-left: -150px;
width: 295px;
height: 400px;
border: 1px #ccc solid;
border-radius: 10px;
overflow: hidden;
}
#middle {
position: absolute;
padding: 10px 20px 10px 10px;
font-size: 16px;
line-height: 20px;
}
#sliderWrap {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 20px;
background: #ccc;
border-radius: 10px;
}
#slider {
position: absolute;
width: 20px;
background: #7B68EE;
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="wrap">
<p id="middle">隨着數字革命逐漸滲透到人們日常生活中方方面面，它也開始滲入到我們的語言以及我們對事物工作機制最基本的看法里。科技做的就是這樣的事情。在啟蒙運動時期，牛頓和笛卡爾鼓勵人們將宇宙想象成一個精美的鍾表。到了工業時代，激起人們新認知的是帶活塞的機器。到了今天，計算機開始從根本上改變人的認知。如果世界是一台計算機，那么這個世界就是可以被編程的。<br/>代碼具有邏輯的，代碼是可以被控制的，代碼就是命運。這些理念是數字時代生活的核心原則。隨着軟件逐漸吞噬着整個世界，就好比著名的風險資本家 Marc Andreessen 之前說過的那樣，我們現在正生活在機器的海洋里，機器將我們的行為、想法和情緒轉變成了數據，數據則是用來給工程師進行編碼操控的原材料。我們現在已經將生活看成了一種被一系列指令控制的有規則的東西，這些指令可以被發現、利用、優化甚至重寫。公司用代碼來理解我們最密切的聯系，Facebook 的 Mark Zuckerberg甚至猜想在人類關系里可能存在一種基本的數學定律，這個定律控制着我們所關心的人和事的平衡。2013年，著名的基因科學家 Craig Venter 曾宣稱，在人類基因組解碼的 10年后，他就已經開始編寫能夠讓他創造合成生物的代碼了。“在這個星球上，我們知道的所有活細胞都是 DNA 軟件驅動的生物機器。”甚至一些自助文學也闡明這樣了這樣一個觀點，即你是可以控制自己的源代碼的，你可以對你的戀愛生活、睡眠習慣和消費習慣重新進行編程。<br/>在如今的這個世界上，編程的能力已不僅僅是一個理想的技能，它已經成為了一種語言。懂得這門語言，意味着你就獲得了權利杠桿。未來學家 Marc Goodman 曾這樣說過：“如果你控制了代碼，你就控制了整個世界。” 相比之下，Paul Ford 的用詞稍微委婉一些：“即使控制代碼的人沒能控制世界，他們也控制了可以控制世界的東西。”在如今的這個世界上，編程的能力已不僅僅是一個理想的技能，它已經成為了一種語言。懂得這門語言，意味着你就獲得了權利杠桿。未來學家 Marc Goodman 曾這樣說過：“如果你控制了代碼，你就控制了整個世界。” 相比之下，Paul Ford 的用詞稍微委婉一些：“即使控制代碼的人沒能控制世界，他們也控制了可以控制世界的東西。”在如今的這個世界上，編程的能力已不僅僅是一個理想的技能，它已經成為了一種語言。懂得這門語言，意味着你就獲得了權利杠桿。未來學家 Marc Goodman 曾這樣說過：“如果你控制了代碼，你就控制了整個世界。” 相比之下，Paul Ford 的用詞稍微委婉一些：“即使控制代碼的人沒能控制世界，他們也控制了可以控制世界的東西。”在如今的這個世界上，編程的能力已不僅僅是一個理想的技能，它已經成為了一種語言。懂得這門語言，意味着你就獲得了權利杠桿。未來學家 Marc Goodman 曾這樣說過：“如果你控制了代碼，你就控制了整個世界。” 相比之下，Paul Ford 的用詞稍微委婉一些：“即使控制代碼的人沒能控制世界，他們也控制了可以控制世界的東西。”在如今的這個世界上，編程的能力已不僅僅是一個理想的技能，它已經成為了一種語言。懂得這門語言，意味着你就獲得了權利杠桿。未來學家 Marc Goodman 曾這樣說過：“如果你控制了代碼，你就控制了整個世界。” 相比之下，Paul Ford 的用詞稍微委婉一些：“即使控制代碼的人沒能控制世界，他們也控制了可以控制世界的東西。”在如今的這個世界上，編程的能力已不僅僅是一個理想的技能，它已經成為了一種語言。懂得這門語言，意味着你就獲得了權利杠桿。未來學家 Marc Goodman 曾這樣說過：“如果你控制了代碼，你就控制了整個世界。” 相比之下，Paul Ford 的用詞稍微委婉一些：“即使控制代碼的人沒能控制世界，他們也控制了可以控制世界的東西。”在如今的這個世界上，編程的能力已不僅僅是一個理想的技能，它已經成為了一種語言。懂得這門語言，意味着你就獲得了權利杠桿。未來學家 Marc Goodman 曾這樣說過：“如果你控制了代碼，你就控制了整個世界。” 相比之下，Paul Ford 的用詞稍微委婉一些：“即使控制代碼的人沒能控制世界，他們也控制了可以控制世界的東西。”在如今的這個世界上，編程的能力已不僅僅是一個理想的技能，它已經成為了一種語言。懂得這門語言，意味着你就獲得了權利杠桿。未來學家 Marc Goodman 曾這樣說過：“如果你控制了代碼，你就控制了整個世界。” 相比之下，Paul Ford 的用詞稍微委婉一些：“即使控制代碼的人沒能控制世界，他們也控制了可以控制世界的東西。”在如今的這個世界上，編程的能力已不僅僅是一個理想的技能，它已經成為了一種語言。懂得這門語言，意味着你就獲得了權利杠桿。未來學家 Marc Goodman 曾這樣說過：“如果你控制了代碼，你就控制了整個世界。” 相比之下，Paul Ford 的用詞稍微委婉一些：“即使控制代碼的人沒能控制世界，他們也控制了可以控制世界的東西。”在如今的這個世界上，編程的能力已不僅僅是一個理想的技能，它已經成為了一種語言。懂得這門語言，意味着你就獲得了權利杠桿。未來學家 Marc Goodman 曾這樣說過：“如果你控制了代碼，你就控制了整個世界。” 相比之下，Paul Ford 的用詞稍微委婉一些：“即使控制代碼的人沒能控制世界，他們也控制了可以控制世界的東西。”</p>
<div id="sliderWrap">
<div id="slider"></div>
</div>
</div>
</body>
<script type="text/javascript" src="js/mouse.js">
</script>
<script>
var wrap = document.getElementById("wrap");
var middle = document.getElementById("middle");
var sliderWrap = document.getElementById("sliderWrap");
var slider = document.getElementById("slider");
//代表slider的偏移量
var y = 0;
//第一步 指定滾動條的高度
function sliderHeight() {
var scale = wrap.clientHeight / middle.clientHeight;
var height = sliderWrap.clientHeight * scale;
slider.style.height = height + "px";
}
sliderHeight();
//獲取slider的最大偏移量
var maxSliderHeight = sliderWrap.clientHeight - slider.clientHeight;
//獲取文本的最大偏移量
var maxMiddleHeight = middle.clientHeight - wrap.clientHeight;
//封裝一個移動方法
function move() {
if(y <= 0) {
y = 0;
}
if(y >= maxSliderHeight) {
y = maxSliderHeight
}
var scaleY = y / maxSliderHeight;
slider.style.top = y + "px";
middle.style.top = -(scaleY * maxMiddleHeight) + "px";
}
//滑動
slider.onmousedown = function(event) {
var ev = event || window.event;
var disY = ev.clientY - slider.offsetTop;
document.onmousemove = function(event) {
var ev = event || window.event;
y = ev.clientY - disY;
move();
}
document.onmouseup = function() {
document.onmousemove = null;
}
return false;
}
//鍵盤事件，上下鍵控制slider的移動
document.onkeydown = function(event) {
var ev = event || window.event;
//根據鍵盤的鍵位，決定到底是往下走還是往上走
switch (ev.keyCode){
case 38:
y -= 5;
break;
case 40:
y += 5;
break;
default:
break;
}
move();
}
//為sliderWrap賦點擊事件
sliderWrap.onmousedown = function(event) {
var ev = event || window.event;
//y 等於 多少呢？
//當前點擊的縱向位置 - wrap的top值 - slider自身高度的一半
y = ev.clientY - wrap.offsetTop - slider.clientHeight / 2;
move();
}
//滾輪控制滾動條的滾動
function sliderMove(event, down) {
if (down) {
y += 5;
} else {
y -= 5;
}
move();
}
mouseWheel(wrap, sliderMove);
</script>
</html>
mouse.js部分
function mouseWheel(obj, fn) {
//嗅探
var ff = navigator.userAgent.indexOf("Firefox");
if(ff != -1) {
obj.addEventListener("DOMMouseScroll", wheel, false);
} else {
obj.onmousewheel = wheel;
}
function wheel(event) {
var ev = event || window.event;
//滾輪往下滾是true
var down = true;
if(ev.detail) {
down = ev.detail > 0
} else {
down = ev.wheelDelta < 0;
}
//通過down來執行相應的代碼
//讓fn執行，並且讓ev和down作為參數傳進去
fn(ev, down); //函數調用
}
}