educoder头歌Web实训 太原理工web课——综合应用案例：拼图页面的制作【全网更新最快】_玛卡巴卡的博客-CSDN博客
第1关：动态焦点图页面的样式设计
任务描述
本关任务： 完成动态焦点图页面的样式设计。
相关知识
为了完成本关任务，你需要掌握：1.盒模型样式设置，2.元素定位 3.特殊字符大于和小于，4.透明度的设置，5.行内元素转换为行块元素，6.z轴属性z-index，7.圆角边框
透明度设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态焦点图页面</title>
<!-- ********* Begin ********* -->
<style type="text/css">
* {margin:0; padding:0; border:0; list-style:none;}
div{
width:860px;
height:540px;
border:2px black solid;
margin:0px auto;
position:absolute;
left:0px;
top:0px;
}
span{
width:40px;
height:80px;
display:inline-block;
background-color:#666;
opacity:0.5;
font-size:50px;
color:white;
z-index:1;
}
#leftbtn{
position:absolute;
left:5px;
top:228px;
}
#rightbtn{
position:absolute;
left:820px;
top:228px;
}
ul{
position:absolute;
left:360px;
bottom:20Px;
z-index:1;
}
ul li{cursor:pointer;
float:left;
width:20px;
height:20px;
margin-right:12px;
opacity:0.5;
border-radius:50%;
}
</style>
<!-- ********* End ********* -->
</head>
<body>
<div id="div1">
<span id="leftbtn"><</span>
<span id="rightbtn">></span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>第2关：动态焦点图页面的脚本设计
任务描述
本关任务： 完成动态焦点图页面的脚本设计。
相关知识
为了完成本关任务，你需要掌握：1.JavaScript的编程基础，2.数组对象及操作，3.函数的定义，4.文档对象的访问，5.事件
数组
数组对象是一个有序的数据集合，使用单独的变量名来存储一系列的数据。在JavaScript中，定义数组时不需要指定数组的数据类型，而且可以将不同类型的数据存放到一个数组中。 对数组的访问可以使用索引号，例如： 数组变量[i]
选择结构
双分支结构的程序格式如下：
if（执行条件）{ 执行语句1
} else{ 执行语句2 }
循环结构
for循环结构的程序格式如下：
for（初始化表达式; 循环条件; 操作表达式） { 循环体语句; }
window对象的方法onload
window对象的onload方法可让浏览器就在页面加载完成后执行脚本指定的函数。例如： window.onload = function () { 函数体 }
文档对象属性的设置
如类名为div1的背景图设置为图像数组imgs中索引号为i的图像，可以用下面的代码编写。 document.getElementById("div1").style.backgroundImage = "url(" + imgs[i] + ")"
编程要求
根据提示，在右侧编辑器补充脚本代码。 1.设置索引号为i的objdrop的背景色为"#ff0"i 2.将标签<li>的元素定义为对象objdrop 3.将第一个objdrop对象的背景色设置为"#f00" 4.将当前对象bjdrop对象的背景色设置为"#f00" 5.将divPic对象中的背景图设置为当前索引号对应的图像
6.使用if语句设置满足向右的按键到第四张图时，下一个图的索引号为0 7.设置满足向左的按键到第一张图时，下一个图的索引号为imgs.length-1 最终实现的效果图如下所示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态焦点图页面</title>
<link type="text/css" rel="stylesheet" href="https://www.educoder.net/api/attachments/2423157" />
<script type="text/javascript">
function set(objdrop) {
for (i = 0; i < objdrop.length; i++) {
/* *********** Begin *********** */
//请设置索引号为i的objdrop的背景色为黄色
objdrop[i].style.backgroundColor = "#ff0";
/* ************* end ************* */
}
}
window.onload = function () {
/* *********** Begin *********** */
//请将标签为li的元素定义为对象objdrop
var objdrop = document.getElementsByTagName("li");
/* ************* end ************* */
for (i = 0; i < objdrop.length; i++) {
/* *********** Begin *********** */
//请定义第一个对象objdrop的背景色为红色
objdrop[0].style.backgroundColor = "#f00";
/* ************* end ************* */
objdrop[1].style.backgroundColor = "#ff0";
objdrop[2].style.backgroundColor = "#ff0";
objdrop[3].style.backgroundColor = "#ff0";
objdrop[i].index = i;
objdrop[i].onmouseover = function () {
set(objdrop);
/* *********** Begin *********** */
//请将当前对象objdrop的背景色设置为红色
this.style.backgroundColor = "#f00";
/* ************* end ************* */
var divPic = document.getElementById("div1");
var imgs = ["https://www.educoder.net/api/attachments/2423182", "https://www.educoder.net/api/attachments/2423183", "https://www.educoder.net/api/attachments/2423184", "https://www.educoder.net/api/attachments/2423185"];
/* *********** Begin *********** */
//将divPic对象中的背景图设置为当前索引号对应的图像
divPic.style.backgroundImage = "url(" + imgs[this.index] + ")";
/* ************* end ************* */
}
}
document.getElementById("div1").index = 0;
var imgs = ["https://www.educoder.net/api/attachments/2423182", "https://www.educoder.net/api/attachments/2423183", "https://www.educoder.net/api/attachments/2423184", "https://www.educoder.net/api/attachments/2423185"];
document.getElementById("div1").style.backgroundImage = "url(" + imgs[0] + ")";
var objrightbtn = document.getElementById("rightbtn");
objrightbtn.onclick = function () {
var picIndex = document.getElementById("div1").index;
/* *********** Begin *********** */
//设置满足向右的按键到第四张图时，下一个图的索引号为0
if (picIndex == imgs.length-1) {
picIndex = 0;
}
/* ************* end ************* */
else {
picIndex++;
}
document.getElementById("div1").index = picIndex;
document.getElementById("div1").style.backgroundImage = "url(" + imgs[picIndex] + ")";
set(objdrop);
objdrop[picIndex].style.backgroundColor = "#f00";
}
var objleftbtn = document.getElementById("leftbtn");
objleftbtn.onclick = function () {
var picIndex = document.getElementById("div1").index;
/* *********** Begin *********** */
//设置满足向左的按键到第一张图时，下一个图的索引号为imgs.length-1
if (picIndex == 0) {
picIndex = imgs.length-1;
}
/* ************* end ************* */
else {
picIndex--;
}
document.getElementById("div1").index = picIndex;
document.getElementById("div1").style.backgroundImage = "url(" + imgs[picIndex] + ")";
set(objdrop);
objdrop[picIndex].style.backgroundColor = "#f00";
}
}
</script>
</head>
<body>
<div id="div1">
<span id="leftbtn"><</span>
<span id="rightbtn">></span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
602
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
