很不错的同学代码-慕课网

很不错的同学代码

来源：6-10 卸载事件（onunload）

像颗糖好诱惑

2015-11-18 20:47

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

*{margin:0; padding:0; text-decoration:none; border:0;}

body{background-image:url(http://image.tianjimedia.com/uploadImages/2012/273/SYJ43SG47PC8_NatGeo04.jpg); background-size:cover; transition:2s;}

#box{width:70%; height:200px; margin:20px auto; box-shadow:0 0 20px #000 inset; transition:0.2s;}

#box:hover{background-color:#000; opacity: 0.7;}

#box p{line-height:200px; text-align:center; font-size:72px; color:#000;}

#box a:hover p{color:#fff;}

#vice-box{width:70%; margin:20px auto; transition:0.2s;}

#limit{width:100%; overflow:hidden;}

#site{width:24%; height:150px; float:left; margin-left:0.5%; margin-right:0.5%; margin-top:5px; margin-bottom:5px; box-shadow:0 0 20px #000 inset; transition:1s;}

#site:hover{background-color:#000; opacity: 0.7;}

#site p{line-height:150px; text-align:center; font-size:36px; color:#000;}

#site a:hover p{color:#fff;}

#author{width:70%; height:50px; margin:0 auto;}

#name{display:block; width:30%; line-height:50px; margin:0 auto; text-align:center; color:#000; font:15px; transition:2s; cursor:pointer;}

#name:hover{color:#fff;}

#MrH{position:relative; top:5px; width:70%; margin:0 auto; z-index:1;}

#MrH img{position:relative; width:100%; height:0; z-index:1;}

#MrH p{position:absolute; display:inline-block; background-color:#000; opacity:0.8; width:50px; height:25px; line-height:25px; text-align:center; bottom:5px; right:5px; z-index:10; color:#fff; cursor:pointer; transition:1s;}

#MrH p:hover{opacity:1;}

#button{display:inline-block; width:100px; height:50px; position:fixed; right:50px; top:20px; opacity:0.7;color:#fff; cursor:pointer;}

#next{position:relative; float:right; width:50px; text-align:center; line-height:50px; font-size:25px; right:0; background-color:#000;}

#next:hover{opacity:0.9;}

#prev{position:relative; float:left; width:50px; text-align:center; line-height:50px; font-size:25px; left:0; background-color:#000;}

#prev:hover{opacity:0.9;}

</style>

var BGI=9;

window.onload=function anonymous(){

var name=document.getElementById("name");

var hiden=document.getElementById("hiden");

var next=document.getElementById("next");

var prev=document.getElementById("prev");

var page=document.getElementById("page");

var box=document.getElementById("box");

var Vbox=document.getElementById("vice-box");

var button=document.getElementById("button");

var name=document.getElementById("name");

var maxImage=19;

var height=0;

name.onclick=function drop(){

if(height<450){

height+=1;

document.getElementById("photo").style.height=height+"px";

}

setTimeout(drop,1);

}

hiden.onclick=function cover(){

if(height>=0){

height-=1;

document.getElementById("photo").style.height=height+"px";

}

setTimeout(cover,1);

}

prev.onclick=function(){

alert("抱歉，此页面暂时无法更换背景图。");

}

next.onclick=function(){

BGI++;

if(BGI>maxImage){

BGI=1;

}

alert("抱歉，此页面暂时无法更换背景图。");

}

function width(){

if(document.body.offsetWidth<971){

box.style.width="970px";

Vbox.style.width="970px";

button.style.right="0px";

name.style.width="290px";

}else{

box.style.width="70%";

Vbox.style.width="70%";

button.style.right="50px";

name.style.width="30%";

}

setInterval(width,500);

}

</script>

</head>

<p id="hiden">hiden</p>

</div>

</div>

<a href="http://www.baidu.com/" target="_new"><p>Baidu</p></a>

</div>

<a href="http://www.youku.com/" target="_blank"><p>Youku</p></a>

</div>

<a href="http://www.taobao.com/" target="_blank"><p>Taobao</p></a>

</div>

</div>

<a href="http://www.tiexue.net/" target="_blank"><p>Tiexue</p></a>

</div>

<a href="http://www.iqiyi.com/" target="_blank"><p>Iqiyi</p></a>

</div>

</div>

<a href="http://www.gamersky.com/" target="_blank"><p>Gamersky</p></a>

</div>

<a href="http://www.imooc.com/" target="_blank"><p>Imooc</p></a>

</div>

<a href="http://www.google.com/" target="_blank"><p>Google</p></a>

</div>

<a href="http://www.youtube.com/" target="_blank"><p>Youtube</p></a>

</div>

<a href="http://www.twitter.com/" target="_blank"><p>Twitter</p></a>

</div>

<a href="http://www.facebook.com/" target="_blank"><p>Facebook</p></a>

</div>

</div>

</body>

</html>

写回答关注

1回答

qq_星宇冰辰_0

2015-11-19 16:55:45

id都重复使用了...........

1 0

侠客岛的含笑

应该用class吧

2016-04-25 13:00:27

共 1 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468868 学习 · 22582 问题

查看课程

相似问题

同学代码看不了

回答 2

看不了同学代码

回答 3

同学代码2

回答 2

同学代码里的是错误的没法指正？

回答 1

同学代码任务三

回答 2

打开慕课网App查看更多内容