12_大鱼海棠.zip资源-CSDN文库

共31个文件

jpg：19个

html：8个

mp3：1个

需积分: 9 189 浏览量 2022-11-30 15:11:58 上传评论收藏 5.9MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

12_大鱼海棠.zip （31个子文件）

files

css

纯音乐 - 我是特种兵.mp3 3.76MB

common.css 838B

jquery-1.12.4.min.js 130KB

img

b9.jpg 60KB

m2.jpg 108KB

banner.jpg 25KB

b2.jpg 29KB

b7.jpg 107KB

b1.jpg 143KB

b6.jpg 27KB

p3.jpg 735KB

b8.jpg 40KB

bg.png 214KB

b5.jpg 105KB

p2.jpg 45KB

r3.jpg 65KB

p1.jpg 141KB

b4.jpg 14KB

r1.jpg 108KB

m1.jpg 185KB

r4.jpg 106KB

b3.jpg 38KB

r2.jpg 70KB

html

page5.html 3KB

page8.html 5KB

page6.html 3KB

page3.html 2KB

index.html 4KB

page4.html 4KB

page10.html 3KB

page2.html 3KB

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="../css/common.css"> <style> /*设置通配符消除浏览器的默认margin和padding*/ * { margin: 0; padding: 0; } /*这里面主要是设置背景的宽高,设置class属性为bg的样式*/ html,body,.bg { height: 100%; width: 100%; } /*给每一个背景图片设置图片路径,并让他不平铺,而且居中自适应显示*/ /*首先将所有背景图片隐藏*/ .bg { display: none; } /*设置一个激活样式,当背景图片含有这个class属性的时候就会激活背景图片,以达到切换的效果*/ .bg-active { display: block; opacity: .8; } /*这里是设置中间导航栏的位置,这里是特殊的设置水平垂直居中的方式,只有在页面元素为100%的时候才能够这样设置*/ .main { position: absolute; width: 1000px; height: 400px; /*background: pink;*/ left: 0; top: 0; right: 0; bottom: 0; margin: auto; } /*取消ul的小圆点*/ .main ul { list-style: none; } /*让他们浮动起来,设置固定宽高,并且加一个CSS3过渡效果的样式*/ .main ul li { float: left; width: 100px; height: 400px; transition: all 1s; } /*设置一个li的激活样式,当他激活的时候,宽度加宽,高度不变,背景图片变化*/ .main ul li.li-active { width: 700px; height: 400px; background: #666666; } /*设置li标签里面的背景图片,这里面的背景图片需要和上面的全局背景图片对应上*/ .main ul li:nth-child(1) { background: url("../img/m1.jpg") no-repeat center/cover; } .main ul li:nth-child(2) { background: url("../img/p1.jpg") no-repeat center/cover; } .main ul li:nth-child(3) { background: url("../img/m2.jpg") no-repeat center/cover; } .main ul li:nth-child(4) { background: url("../img/r2.jpg") no-repeat center/cover; } /*设置li里面的div的宽高,这个是一个背景的效果,设置透明度*/ .main ul li div { height: 400px; width: 100px; background: black; opacity: .5; } /*设置div里面的p标签,让他居中显示,并且让他竖着显示出来*/ .main ul li div p{ color: white; width: 14px; padding: 100px 40px; } </style> </head> <body> <header> <ul> <li><a href="index.html">剧情简介</a></li> <li><a href="page2.html">角色介绍</a></li> <li><a href="page3.html">动画制作</a></li> <li><a href="page4.html">制作相关</a></li> <li><a href="page5.html">动画音乐</a></li> <li><a href="page6.html">放映信息</a></li> <li><a href="page8.html">作品评价</a></li> <li><a href="page10.html">手机壁纸</a></li> </ul> </header> <main>  <div class="bg bg-active"></div> <div class="bg"></div> <div class="bg"></div> <div class="bg"></div>  <div class="main">  <ul> <li class="li-active"><div><p></p></div></li> <li><div><p></p></div></li> <li><div><p></p></div></li> <li><div><p></p></div></li> </ul> </div> </body> <script> window.onload = function () { /*获取所有的li*/ let lis = document.querySelectorAll('.main li'); /*获取所有的bg*/ let bgs = document.querySelectorAll('.bg'); /*遍历所有li标签,这里使用的是forEach循环*/ /*里面的item是lis里面的值,index是下标*/ /*这里面还有一个箭头函数,箭头函数的作用就是能够让this自动指向的问题*/ lis.forEach((item,index)=>{ /*给每个li绑定鼠标悬浮事件*/ item.onmouseover = () => { /*清除所有样式,为了让点击之后的li样式跟随*/ lis.forEach((el,i) => { el.className = ''; bgs[i].classList.remove('bg-active'); }); /*给激活之后的li赋予激活的样式*/ item.className = 'li-active'; /*激活背景图片*/ bgs[index].classList.add('bg-active'); } }); } </script> </html>

评论收藏

内容反馈