尽量让界面简洁（马尔斯绿为主题颜色），将视线专注于短语。
操作更方便，除了点击翻页，鼠标覆盖在翻译按钮上显示翻译外，按下←→键、空格或者↓键也可以翻页、显示翻译（之所以增加↓键显示翻译，是因为操作更方便，一只手就能操作所有功能，方便背诵，快速浏览）。
按下空格或者↓键显示翻译
用ul来装填短语，因为没有调用数据库，所以只能复制粘贴短语
div盒子装英语，p标签里面装中文翻译
<ul>
<li class="look">
<div>Nothing has altered and the deadline still stands.</div>
<p>什么也没有更改，最后期限依然有效。</p>
</li>
<li>
<div>The driver lost control when a tire burst.</div>
<p>一只轮胎爆裂时司机失去了控制。</p>
</li>
<li>
<div>Obviously we ask all our customers to dispose of litter responsibly. </div>
<p>显然，我们要求所有的顾客负责任地处理垃圾。</p>
</li>
<li>
<div>250 people were killed in the blast.</div>
<p>250人在这次大爆炸中丧生。</p>
</li>
<li>
<div> Martha would consume nearly a pound of cheese per day.</div>
<p>玛莎那时每天吃将近一磅奶酪。</p>
</li>
<li>
<div>In a severe gale the ship split in two.</div>
<p>在一次强劲的大风中那艘船断成了两半。</p>
</li>
<li>
<div>A trickle of spit collected at the corner of her mouth.</div>
<p>一小股口水积聚在了她的嘴角。</p>
</li>
<li>
<div>He always spilled the drinks.</div>
<p>他总是不小心把饮料给洒了。</p>
</li>
<li>
<div>He had slipped on an icy pavement.</div>
<p>他在结冰的人行道上滑倒了。</p>
</li>
<li>
<div>She slid the door open.</div>
<p>她把门滑开了。</p>
</li>
<li>
<div>The bacteria are harmless to humans. </div>
<p>这些细菌对人无害。</p>
</li>
</ul>头部标题（只是为了和下部翻译做一个对称，整体看着不失衡）
<span>英语短句学习</span>最下面的翻译板块：
<div class="translate">译</div>对应的CSS装饰：
.translate {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: rgb(100, 140, 140);
line-height: 50px;
color: #f1f1f1;
transition: all 0.5s;
cursor: pointer;
}
左右翻页板块
<button class="left">👈</button>
<button class="right">👉</button>对应的CSS装饰：
.left {
position: fixed;
left: 50px;
bottom: 50%;
}
.right {
position: fixed;
right: 50px;
bottom: 50%;
}主要功能还是在script里面：（注释足够详细，但是代码质量应该比较堪忧）
<script>
var lis = document.querySelectorAll('li');
var btnL = document.querySelector('.left');
var btnR = document.querySelector('.right');
var translate = document.querySelector('.translate');
var ps = document.querySelectorAll('p');
var page = 0;
var buttons = document.querySelectorAll('button');
// 禁止选取文段
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
})
// 禁止右键菜单
document.addEventListener('selectstart', function (e) {
e.preventDefault();
})
// 鼠标覆盖翻译板块，出现中文翻译，板块变色
translate.onmouseover = function () {
this.style.backgroundColor = 'rgb(0,140,140)';
for (var i = 0; i < ps.length; i++) {
ps[i].style.color = 'black';
}
}
// 鼠标离开翻译板块，中文翻译消失，板块颜色复原
translate.onmouseout = function () {
this.style.backgroundColor = 'rgb(100,140,140)';
for (var i = 0; i < ps.length; i++) {
ps[i].style.color = '#f1f1f1';
}
}
// 鼠标覆盖/移开按钮改变背景色
for (var i = 0; i < buttons.length; i++) {
buttons[i].onmouseover = function () {
this.style.backgroundColor = 'rgba(34, 34, 38, .05)';
}
buttons[i].onmouseout = function () {
this.style.backgroundColor = 'rgba(34, 34, 38, 0)';
}
}
// 点击左右按钮切换短语
btnL.addEventListener('click', function (e) {
if (page > 0) {
page--;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = 'none';
}
lis[page].style.display = 'block';
})
btnR.addEventListener('click', function (e) {
if (page < lis.length - 1) {
page++;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = 'none';
}
lis[page].style.display = 'block';
})
// 按下空格或下键显示翻译
// 按下左右键切换短语，改变左右指示板块背景色
document.addEventListener('keydown', function (e) {
if (e.keyCode === 40 || e.keyCode === 32) {
for (var i = 0; i < ps.length; i++) {
ps[i].style.color = 'black';
}
translate.style.backgroundColor = 'rgb(0, 140, 140)';
} else if (e.keyCode === 37) { // 左键判定
btnL.style.backgroundColor = 'rgba(34, 34, 38, .05)';// 按下左键改变颜色
if (page > 0) {
page--;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = 'none';
}
lis[page].style.display = 'block';
} else if (e.keyCode === 39) { // 右键判定
btnR.style.backgroundColor = 'rgba(34, 34, 38, .05)';// 按下右键改变颜色
if (page < lis.length - 1) {
page++;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = 'none';
}
lis[page].style.display = 'block';
}
})
// 松开空格或下键关闭翻译（存在bug，先点击翻页后，再按下松开空格，会自动翻页）
// 松开左右键改变左右指示板块背景色
document.addEventListener('keyup', function (e) {
if (e.keyCode === 40 || e.keyCode === 32) {
for (var i = 0; i < ps.length; i++) {
ps[i].style.color = '#f1f1f1';
}
translate.style.backgroundColor = 'rgb(100, 140, 140)';
} else if (e.keyCode === 37) {
btnL.style.backgroundColor = 'rgba(34, 34, 38, 0)';// 松开左键恢复颜色
} else if (e.keyCode === 39) {
btnR.style.backgroundColor = 'rgba(34, 34, 38, 0)';// 松开右键恢复颜色
}
})
</script>源代码：（iconfont用起来流程太复杂了而且要分文件夹，左右指示用的emoji，所以整个网页可以直接复制粘贴完整运行。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 250px auto;
/* padding: 0px 50px; */
background-color: #f1f1f1;
text-align: center;
font-size: 28px;
}
p {
display: inline-block;
margin: 20px 300px;
padding: 0px 15px;
font-size: 18px;
color: #f1f1f1;
line-height: 28px;
transition: all 0.5s;
cursor: default;
}
button {
display: inline-block;
width: 50px;
height: 50px;
line-height: 28px;
padding: 0 8px;
margin: 0 10px 10px 0;
color: #222226;
font-size: 20px;
border-radius: 2px;
border: none;
outline: none;
cursor: pointer;
}
.left {
position: fixed;
left: 50px;
bottom: 50%;
}
.right {
position: fixed;
right: 50px;
bottom: 50%;
}
li {
list-style-type: none;
display: none;
padding: 40px 0 0 0;
height: 200px;
}
.look {
display: block;
}
.translate {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
background-color: rgb(100, 140, 140);
line-height: 50px;
color: #f1f1f1;
transition: all 0.5s;
cursor: pointer;
}
span {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 50px;
line-height: 50px;
color: #333;
}
</style>
</head>
<body>
<span>英语短句学习</span>
<div class="translate">译</div>
<button class="left">👈</button>
<button class="right">👉</button>
<ul>
<li class="look">
<div>Nothing has altered and the deadline still stands.</div>
<p>什么也没有更改，最后期限依然有效。</p>
</li>
<li>
<div>The driver lost control when a tire burst.</div>
<p>一只轮胎爆裂时司机失去了控制。</p>
</li>
<li>
<div>Obviously we ask all our customers to dispose of litter responsibly. </div>
<p>显然，我们要求所有的顾客负责任地处理垃圾。</p>
</li>
<li>
<div>250 people were killed in the blast.</div>
<p>250人在这次大爆炸中丧生。</p>
</li>
<li>
<div> Martha would consume nearly a pound of cheese per day.</div>
<p>玛莎那时每天吃将近一磅奶酪。</p>
</li>
<li>
<div>In a severe gale the ship split in two.</div>
<p>在一次强劲的大风中那艘船断成了两半。</p>
</li>
<li>
<div>A trickle of spit collected at the corner of her mouth.</div>
<p>一小股口水积聚在了她的嘴角。</p>
</li>
<li>
<div>He always spilled the drinks.</div>
<p>他总是不小心把饮料给洒了。</p>
</li>
<li>
<div>He had slipped on an icy pavement.</div>
<p>他在结冰的人行道上滑倒了。</p>
</li>
<li>
<div>She slid the door open.</div>
<p>她把门滑开了。</p>
</li>
<li>
<div>The bacteria are harmless to humans. </div>
<p>这些细菌对人无害。</p>
</li>
</ul>
<script>
var lis = document.querySelectorAll('li');
var btnL = document.querySelector('.left');
var btnR = document.querySelector('.right');
var translate = document.querySelector('.translate');
var ps = document.querySelectorAll('p');
var page = 0;
var buttons = document.querySelectorAll('button');
// 禁止选取文段
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
})
// 禁止右键菜单
document.addEventListener('selectstart', function (e) {
e.preventDefault();
})
// 鼠标覆盖翻译板块，出现中文翻译，板块变色
translate.onmouseover = function () {
this.style.backgroundColor = 'rgb(0,140,140)';
for (var i = 0; i < ps.length; i++) {
ps[i].style.color = 'black';
}
}
// 鼠标离开翻译板块，中文翻译消失，板块颜色复原
translate.onmouseout = function () {
this.style.backgroundColor = 'rgb(100,140,140)';
for (var i = 0; i < ps.length; i++) {
ps[i].style.color = '#f1f1f1';
}
}
// 鼠标覆盖/移开按钮改变背景色
for (var i = 0; i < buttons.length; i++) {
buttons[i].onmouseover = function () {
this.style.backgroundColor = 'rgba(34, 34, 38, .05)';
}
buttons[i].onmouseout = function () {
this.style.backgroundColor = 'rgba(34, 34, 38, 0)';
}
}
// 点击左右按钮切换短语
btnL.addEventListener('click', function (e) {
if (page > 0) {
page--;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = 'none';
}
lis[page].style.display = 'block';
})
btnR.addEventListener('click', function (e) {
if (page < lis.length - 1) {
page++;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = 'none';
}
lis[page].style.display = 'block';
})
// 按下空格或下键显示翻译
// 按下左右键切换短语，改变左右指示板块背景色
document.addEventListener('keydown', function (e) {
if (e.keyCode === 40 || e.keyCode === 32) {
for (var i = 0; i < ps.length; i++) {
ps[i].style.color = 'black';
}
translate.style.backgroundColor = 'rgb(0, 140, 140)';
} else if (e.keyCode === 37) { // 左键判定
btnL.style.backgroundColor = 'rgba(34, 34, 38, .05)';// 按下左键改变颜色
if (page > 0) {
page--;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = 'none';
}
lis[page].style.display = 'block';
} else if (e.keyCode === 39) { // 右键判定
btnR.style.backgroundColor = 'rgba(34, 34, 38, .05)';// 按下右键改变颜色
if (page < lis.length - 1) {
page++;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.display = 'none';
}
lis[page].style.display = 'block';
}
})
// 松开空格或下键关闭翻译（存在bug，先点击翻页后，再按下松开空格，会自动翻页）
// 松开左右键改变左右指示板块背景色
document.addEventListener('keyup', function (e) {
if (e.keyCode === 40 || e.keyCode === 32) {
for (var i = 0; i < ps.length; i++) {
ps[i].style.color = '#f1f1f1';
}
translate.style.backgroundColor = 'rgb(100, 140, 140)';
} else if (e.keyCode === 37) {
btnL.style.backgroundColor = 'rgba(34, 34, 38, 0)';// 松开左键恢复颜色
} else if (e.keyCode === 39) {
btnR.style.backgroundColor = 'rgba(34, 34, 38, 0)';// 松开右键恢复颜色
}
})
</script>
</body>
</html>但是目前有个bug就是先点击翻页再按下空格翻页，后面每次按空格弹起后就会自动翻页。有知道原因的可以指正。谢谢。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
