簡單的網站首頁
阿新 • • 發佈：2017-12-30
乒乓球 完成 自動 左移 adding opacity ava tag title
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>網站首頁</title>
<style type="text/css">
body{background:url("images/bg.png") top center no-repeat;font-size:12px;font-family:宋體;color:#999999;}
#main{width:960px;margin:0 auto;}
.wb{width:84px;height:20px;}
header span{margin-left:250px;}
header{margin-top:20px;}
input[type="button"]{color:#999999;border:0px;width:56px;height:20px;}
#content{width:960px;background-color:#FFFFFF;height:680px;margin-top:180px;opactiy:0.5;}
nav{margin-left: 46px;}
nav ul li{list-style:none;float:left;line-height:60px;height:60px;width:92px;font-family:微軟雅黑;font-size:16px;color:#333333;}
h1 span{margin-left:370px;font-family:宋體;font-size:12px;color:#999999;}
h1{font-family:微軟雅黑;font-size:16px;color:#ff6633;margin-left:46px;}
#left{width:530px;float:left;height: 500px}
/*#left ul li{width:500px;list-style:none;font-family:宋體;font-size:13px;color:#333333;line-height:200%;margin-left: 46px;}
.rq{font-family:"宋體";font-size:13px;color:#cccccc;display:block;float:right;}*/
.tp{margin-top:46px;margin-left:45px;}
img[id="img2"]{margin-left:10px;}
#right{float:left;width:380px;height:100px;}
/*#right img{margin-left:50px;margin-top:20px;}*/
#right h4{margin-left:180px;font-family:宋體;font-size:13px;color:#666666;}
/* #right ul{margin-left: 50px;margin-top: 30px;}
#right ul li{list-style:none;font-size:13px;color:#333333;line-height:180%;}*/
footer img{margin-top:20px;width: 100%;position: relative;}
#copy{text-align:center;margin-top: 10px;margin-right:300px;}
a{
text-decoration: none;
display: block;
}
nav ul li ul {
display: none;
}
nav ul li ul li{
float: none;
background-color:#FFFFFF;
}
*{
margin: 0px;
padding: 0px;
}
.slideBox {
/* margin:50px auto;*/
margin-top: 10px;
margin-left: 50px;
width:300px;
height:280px;
box-shadow:2px 2px 10px #C38DD4;
border-radius:20px;
position:relative;
overflow:hidden;
}
.slideBox ul {
position:relative;
width:2000px;}
.slideBox ul li {
float:left;
width:300px;
height:480px;
position:relative;
}
.spanBox {
position:absolute;
width:300px;
height:20px;
bottom:10px;
left:80px;
}
.spanBox span {
width:18px;
height:18px;
margin-left:5px;
background-color:rgba(201,178,207,1.00);
float:left;
line-height:16px;
text-align:center;
text-shadow:2px 2px 2px #C5EBF0;
font-family:cabin-sketch;
font-size:15px;
}
.slideBox .spanBox .active {
background-color:rgba(155,83,244,0.79);
border:solid 1px #BEEBEC;
border-radius:4px;
}
.prev {
position:absolute;
left:0px;
top:320px;
float:left;
border-left:solid 1px rgba(251,245,246,1.00);
opacity:0.5;
}
.next {
width:15px;
height:50px;
position:absolute;
right:0px;
top:320px;
float:right;
border-right:solid 1px rgba(245,237,237,1.00);
opacity:0.5
}
.notice ul li{list-style:none;font-family:宋體;font-size:13px;color:#333333;line-height:100%;margin-left: 50px;margin-top: 10px;}
</style>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
<div id="main">
<header>
<img src="images/logo.png">
<span>班級個人:<input type="text" class="wb" id="name">
密碼：<input type="password" class="wb" id="mima">
<input type="button" value="登陸" id="dl">
<input type="button" value="註冊" id="zc">
</span>
</header>
<div id="content">
<nav>
<ul>
<li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">首頁</a>
<ul>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
</ul>
</li>
<li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">我們</a>
<ul>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
</ul>
</li>
<li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">班級公告</a>
<ul>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
</ul>
</li>
<li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">班級活動</a>
<ul>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
</ul>
</li>
<li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">班級榮譽</a>
<ul>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
</ul>
</li>
<li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">學習交流</a>
<ul>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
</ul>
</li>
<li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">男生區</a>
<ul>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
</ul>
</li>
<li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">女生區</a>
<ul>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
</ul>
</li>
<li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">班級相冊</a>
<ul>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
<li><a href="#">欄目二</a></li>
</ul>
</li>
</ul>
</nav>
<div>
<img src="images/line.png">
</div>
<div id="left">
<h1>班級公告<span>更多>></span></h1>
<div id="load"></div>
<!-- <ul>
<li>機關分工會組織舉辦“教職工冬季健步走”比賽<span class="rq">2017-12-06</span></li>
<li>我校在“全國百強暑期實踐團隊”評選活動中取得佳績<span class="rq">2017-12-06</span></li>
<li>我校“炫彩中醫”短劇曲藝大賽決賽圓滿落幕<span class="rq">2017-12-06</span></li>
<li>我校2017年教職工乒乓球團體賽圓滿落幕<span class="rq">2017-12-07</span></li>
<li>譚備戰教授為我校業余團校暨學生幹部學習十九大培訓班作主題講座<span class="rq">2017-12-07</span></li>
<li>我校在2017年鄭東新區大學生誌願者防艾知識競賽中獲得一等獎<span class="rq">2017-12-08</span></li>
<li>“綠橘子樂隊rock演奏之夜”演唱會熱火校園 <span class="rq">2017-12-08</span></li>
<li>“我校舉辦“校園文化形象大使”選拔大賽 <span class="rq">2017-12-09</span></li>
<li>我校加入全國中醫藥研究生創新發展聯盟<span class="rq">2017-12-09</span></li>
<li>我校82級校友王耀獻榮獲2017年顧氏和平獎 <span class="rq">2017-12-10</span></li>
</ul> -->
<div class="tp">
<img src="images/nan.png">
<img src="images/nv.png" id="img2">
</div>
</div>
<div id="right">
<h1>班級活動</h1>
<div class="slideBox">
<ul>
<li><img src="images/0.png" width="300" height="280"/></li>
<li><img src="images/1.gif" width="300" height="280"/></li>
<li><img src="images/2.png" width="300" height="280"/></li>
</ul>
<div class="spanBox">
<span class="active">1</span>
<span>2</span>
<span>3</span>
</div>
<div class="prev"><img src="images/left_arrow.jpg" width="15" height="50" /></div>
<div class="next"><img src="images/right_arrow.jpg" width="15" height="50" /></div>
</div>
<div class="notice">
<ul>
<li>關於召開三門峽市教育系統信息化建設的通知</li>
<li>關於召開三門峽市教育系統信息化建設</li>
<li>關於召開三門峽市教育系統信息化</li>
<li>關於召開三門峽市教育系統信息化建設的通知</li>
<li>關於召開三門峽市教育建設的通知</li>
<li>關於召開三門峽市教育系統信息化建設的通知</li>
</ul>
</div>
<footer>
<div>
<img src="images/bottom-line.png" width="960">
</div>
<div id="copy">
主辦：河南中醫藥大學2015級信息管理與信息系統班
</div>
</footer>
</div>
</div>
<script type="text/javascript">
function showsubmenu(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="block";
}
function hidesubmenu(li){
var submenu=li.getElementsByTagName("ul")[0];
submenu.style.display="none";
}
</script>
<script type="text/javascript">
$(document).ready(function(){
var slideBox = $(".slideBox");
var ul = slideBox.find("ul");
var oneWidth = slideBox.find("ul li").eq(0).width();
var number = slideBox.find(".spanBox span"); //註意分號 和逗號的用法
var timer = null;
var sw = 0;
//每個span綁定click事件，完成切換顏色和動畫，以及讀取參數值
number.on("click",function (){
$(this).addClass("active").siblings("span").removeClass("active");
sw=$(this).index();
ul.animate({
"right":oneWidth*sw, //ul標簽的動畫為向左移動；
});
});
//左右按鈕的控制效果
$(".next").stop(true,true).click(function (){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
});
$(".prev").stop(true,true).click(function (){
sw--;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
});
//定時器的使用，自動開始
timer = setInterval(function (){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
},2000);
//hover事件完成懸停和，左右圖標的動畫效果
slideBox.hover(function(){
$(".next,.prev").animate({
"opacity":1,
},200);
clearInterval(timer);
},function(){
$(".next,.prev").animate({
"opacity":0.5,
},500);
timer = setInterval(function (){
sw++;
if(sw==number.length){sw=0};
number.eq(sw).trigger("click");
},2000);
})
})
</script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type:"get",
url:"9.xml",
dataType:"xml",
timeout:1000,
cache:false,//禁止緩存
success:function(data){
var frag=$("<ul/>");
$(data).find("notice").each(function(){
var content=$(this).children("content");
var data=$(this).children("data");
content_value=content.text();
data_value=data.text();
frag.append("<li>"+content_value+"<span>"+data_value+"</span></li>");
});
frag.appendTo("#load");
$("#load ul li").css({
"list-style-type":"none",
"width":"500px",
"font-family":"宋體",
"font-size":"13px",
"color":"#333333",
"line-height":"200%",
"margin-left": "46px"
});
$("#load span").css({
"font-family":"宋體",
"font-size":"13px",
"color":"#cccccc",
"float":"right"
});
}
});
})
</script>
</body>
簡單的網站首頁