东师《Web前端综合案例开发》期末

时间:2022-07-04 16:25:10 浏览量:

 下载文档获取完整

  要求:在本文档中的题目下作答,在所写的代码下面粘贴运行后的网页截图,提交本word 文档即可。

 小 A 是大四的学生,还有半年就要毕业了,就要跟她暗恋了三年的女神分开了。马上就是女神的生日,他想送给女神一个礼物,能让女神开心并记住他的特别礼物。他想到了电子相册,一个漂亮的网页版电子相册,因为他可以从班级网上找到女神的靓照。

 第二次制作的网页女神收到礼物后跟小 A 说很开心,小 A 也非常高兴,觉得还应该在网页上增加一些小细节,来让女神感受到自己的心意。

 这一次,小 A 想要经常更新女神的图片,但每次更新都要修改 html 什么的太麻烦且不方便,小 A 想到了新的解决方法,并顺便给每张图片配上一段说明文字:

 1.写一个配置文件,以后更新女神照片和照片的说明就只需要更新这个配置文件就可以了,会比直接改动页面要方便管理。

 2.把配置文件放到服务器上,在相册文件里通过接口接收配置信息并渲染到页面上,这样每次更新的时候就不需要都发给女神新的文件了,总要接收文件女神一定会很烦的吧。我们只要发给女神一次文件,以后更新图片的时候都直接在服务器上修改配置文件就可以了。

 题一答案: <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; list-style: none; } body { background:url(images/bg.ipg); background-size:100%auto; } .auto { overflow: hidden; } .silderbox{ width: 800px; height:400px; position: absolute; top:50%; margin-top:-200px; margin-left:-400px: border-radius: 10px; } .sildetbox ul{

 position: relative; } .silderbox ul li{ width: 800px: height:400px; overflow: hidden; display: none; position: absolute; top:0; left:0; } #img1{ display: block; } .silderbox ul li img{ width: 800px; height: auto; } .silderbox ul li p{ position: absolute; bottom: 10px; left:0; background: rgba(0,0,0,.5); color: #fff; line-height:40px; width:100%; text-align:center; } #time{ display: block; width: 20px; height:20px; background: #fff; text-align: center; line-height:20px; font-size:14px; color #dd00ff; position: absolute; right:20px; top:20px; border-radius: 20px; } #timeline{ width:0%; height: 10px: border-radius: 10px; background: #1499f8; position: absolute; left:0; bottom:0; } @keyframes myfirst { from {width:0%;} to {width:100%;}

 @-webkit-keyfames myfist{ from {width:0%;} to {width:100%;) } .ani-time-line{ animation: myfirst 5s linear; -webkit-animation: myfirst 5s linear;

 } </style> <script src="https://code.jquery.com/jquery-3.4.1js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> </head> <body>

 <div class="silderbox auto"> <ul id="imglist"> </ul> <span id="time">5</span> <span id="timeline"></span> </div> <script src="images.js"></script> <script> for (var i =0;i<data.length;i++){ $("#imglist").append("<li id="img" + ( i + 1 )

 + "><img src=" + data[i]["img"]+ ""alt=""><p>"+data[i]["desc"]+"</p></li>")

 } var n=1; var initTime=5; var time=5; function changelmg(x){ for (var i =1;i<5;i++){ if(x==i){ $(#img"+i).fadeIn() }else{ $("#img"+i).fadeOut() } } $("#timeline").removeClass("ani-time-line") setTimeout(function(){ $("#timeline").addClass("ani-time-line") },10) } $("#timeline").addClass("ani-time-line") setInterval(function (){ time-- if (time===-1){ time=initTime n++ if(n===5){ n=1 } changeImg(n)

 } $("#time").html(time) },1000)

 </script> </body> </html>

  题二答案: 2. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; list-style: none; } body{ background: url(images/bg.ipg); background-size: 100%auto; } .auto{ overflow: hidden; } sidcbox{ width:800px; height:400px; position: absolute; top:50%; left:50%: margin-top:-200px; margin-lef:-400px: } .silderbox ul{ position: relative; } .silderbox ul li{ width: 800px; height: 400px; overflow: hidden; display: none; position: absolute; top:0: left:0; } .silderbox ul li p { position:absolute; bottom:10px; left:0;

 backfground:rgba(0,0,0,5); color:#fff; line-height:40px; width:100%;

 text-align:center; } #img1{ display: block; } .silderbox ul li img{ width: 800px; height: auto; } #time { display: block; width: 20px; height: 20px: background: #ffp: text-align: center; line-height: 20px; font-size:14px; color: #dd00ff; position: absolute: right:20px; top:20px; border-radius: 20px; } #timeline{ width:0%; height: 10px; border-radius: 10px; background: #1499f8; position: absolute; left:0; bottom:0; } @keyfames myfinst{ from {width: 0%;} to {width:100%;} } @-webkit-keyframes myfirst { from {width:0%;} to {width:100%;} } .ani-time-line{ animation: myfirst 5s linear; -webkit-animation myfirst 5s linear; } </style> <script src="https://code.jquery.com/jquery-3.4.1js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script> </head>

 <body>

 <div class="silderbox auto"> <ul id="imglist"> </ul> <span id="time">5</span> <span id="timeline"></span> </div> <script src="images.js"></script> <script> //由于安全原因浏览器不允许跨域访问,安全机制认为加载本地其他文件是跨域行为。

 谷歌浏览器会跨域失败,是因为浏览器安全机制不允许,而火狐为了方便允许跨域(虽然这 样很不安全)。而且在其他浏览器中,出现跨域问题也是这个原因,就是浏览器安全机制的 原因。

 //使用本地服务器,会自动为你的文件开一个端口服务 //function ajax _get(){ //

  $.ajax({ //

 url: "images.json", //

 type: "GET", //

 dataType: "json", //

 succes: function(data){ //

  for (var i =0;i< data.list.length;i++){ //

  $("#imglist").append("<li id-"img" +(i+1)+""><img src="" + data.list[i]["img"]+"" alt=""><p>"+data.list[i]["desc"]+"</p></li>") //

  } //

  } //

 }) // } //ajax _get(); var n=1; var initTime=5; var time=5; function changelmg(x){ for (var i =1;i<5;i++){ if(x==i){ $(#img"+i).fadeIn() }else{ $("#img"+i).fadeOut() } } $("#timeline").removeClass("ani-time-line") setTimeout(function(){ $("#timeline").addClass("ani-time-line") },10) } $("#timeline").addClass("ani-time-line") setInterval(function (){ time-- if (time===-1){ time=initTime n++ if(n===5){ n=1 }

 changeImg(n) } $("#time").html(time) },1000)

 </script> </body> </html>

相关热词搜索: 期末 案例 开发