事实证明是每天坚持编程是特别困难的，看看自己昨天立下的flag真的。。可能又是无法做到。
那个鼠标切换背景的代码可能就不去研究了，起码是今天不研究了。
今天是把鼠标拖动盒子的代码稍微对比了下，就暂时放在这儿吧，晚上要赶火车，必须要早点睡了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#drag{
width: 100px;
height: 100px;
background-color: #abcdef;
cursor: pointer;
position: absolute;
}
</style>
</head>
<body>
<div id="drag"></div>
<script>
window.onload = function(){
var target = document.getElementById("drag");
target.onmousedown = function(e){
var offsetX = e.offsetX;
var offsetY = e.offsetY;
document.body.onmousemove = function(e){
target.style.left = (e.pageX-offsetX)+"px";
target.style.top = (e.pageY-offsetY)+"px";
}
document.body.onmouseup = function(){
document.body.onmousemove = null;
document.body.onmouseup = null;
}
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>homework4</title>
<style>
html, body{
margin: 0;
padding: 0;
width: 100%;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.bg {
height: 100vh;
width: 100%;
display: none;
}
</style>
</head>
<body>
<!--
/**
*
* @author: xiaoliu
* @type: NO.17-homework4
* @data: 2018-01-27
* @finished: 2018-01-29
* @optimized: 2018-01-31
*/
-->
<ul id="main">
<li class="bg" id="one"></li>
<li class="bg" id="two"></li>
<li class="bg" id="three"></li>
<li class="bg" id="four"></li>
<li class="bg" id="five"></li>
<li class="bg" id="six"></li>
<li class="bg" id="seven"></li>
</ul>
<script>
window.onload = function () {
// count用来存放当前显示的li标签
var count = 0;
var bg = document.getElementsByTagName("li");
// 初始化bgColor
bg[0].style.backgroundColor = "red";
bg[1].style.backgroundColor = "orange";
bg[2].style.backgroundColor = "yellow";
bg[3].style.backgroundColor = "green";
bg[4].style.backgroundColor = "cyan";
bg[5].style.backgroundColor = "blue";
bg[6].style.backgroundColor = "purple";
// 显示默认标签
// propertypropertyproperty property
bg[count].style.display = "block";
window.onmousewheel = function (event) {
if (event.wheelDelta < 0 && count < bg.length-1) {
// 如果滚轮的值为-120，就把标志往后移1位
count++;
// console.log("count :" + count)
} else if (event.wheelDelta > 0 &&count > 0) {
// 如果滚轮的值为120，就把标志往前移1位
count--;
}
bg[count].style.display = "block";
for (var i = 0; i < bg.length; i++) {
//跳过当前count标志位，不让其none掉
//而且i不能超过7，i∈[0, 6]
if (i === count) {
i++;
// console.log("i :" + i)
}
// 等于7的时候前0~6总共的7个背景已经
if (i!= bg.length) {
bg[i].style.display = "none";
}
}
}
}
</script>
</body>
</html>
前面是老师写的代码，后面是自己写的代码。。。
果然技术菜是有原因的，很多东西不会主动地去查证、或是去实验。。。。
晚上12点还得起来赶火车，溜了溜了。
大家晚安，千万要坚持学习，别像我一样o(╥﹏╥)o
原文地址：https://www.cnblogs.com/xiaoliutongxue/p/8439678.html
时间： 2024-10-08 00:11:36