验证中...
私信发送成功
语言: HTML
分类: jQuery 插件
最后更新于 2017-12-07 20:21
片段 1 片段 2 片段 3
index.html
原始数据 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/Game.css" />
<title></title>
</head>
<body>
<!--头部-->
<div id="heander">
<div id="head_right">LOGO</div>
<!--右边logo-->
<div id="head_left">
<div id="searchBg">
<input placeholder="搜索" type="text" id="search"><img id="searchImg" src="img/MagniGlass.png" </input>
</div>
<div id="loginRegistBg">
<a href="#" id="login" class="aAct">&nbsp;登录</a>
/
<a href="#" id="regist">&nbsp;注册</a>
</div>
</div>
<!--左边搜索和登录-->
</div>
<div id="main">
<!--導航-->
<div id="hendGameImg">
<img src="img/game2.png"/>
<div id="content">
<div id="navBg">
<ul class="navInfo" id="hotGameInfo"><h2>电竞热闻</h2></ul>
<ul id="navlist" class="navInfo">
<li class="activ"><a href="#">全部</a></li>
<li><a href="http://www.baidu.com">赛事</a></li>
<li><a href="#">战队</a></li>
<li><a href="#">选手</a></li>
<li><a href="#">解说</a></li>
<li><a href="#">视频</a></li>
</ul>
<ul id="moreInfo" class="navInfo">更多资讯&nbsp;>></ul>
</div>
<!--內容 mainHead-->
<div id="mainHead">
<div class="main_pre" id="left">
<div id="picMaskBg">
<div id="mask"><p>i am mask</p></div><!--蒙版 -----------------------mask-->
</div>
<!--带有蒙版的游戏图下面的三列框-->
<div class="BottomThree" id="l"></div>
<div class="BottomThree" id="c">
<ul id="bgUL">
<ul>
<li>
<p>WE离职,谁能带上我一起杀出冰峰之巅</p>
</li>
<li>
<p>根据WE官方显示,发生大幅度发生大幅度发的说法是的发送到······</p>
</li>
</ul>
<ul >
<li></li>
<li>23</li>
<li></li>
<li>452</li>
</ul>
</ul>
</div>
<div class="BottomThree" id="r">
<p>大吉大利,一起吃鸡</p>
</div>
</div>
<div class="main_pre" id="right">
<div class="rightlist" id="first">
<ul id="bgUL">
<ul>
<li>
<p>WE离职,谁能带上我一起杀出冰峰之巅</p>
</li>
<li>
<p id="l">根据WE官方显示,发生大幅度发生大幅度发的说法是的发送到······</p>
</li>
</ul>
<ul >
<li></li>
<li>23</li>
<li></li>
<li>452</li>
</ul>
</ul>
<div id="imgDv">
<img src="img/game2.png"/>
</div>
<!--鼠标移上去的时候出现的 蒙版---------------------mask------------------>
<div class="maskDiv"></div>
</div>
<div class="rightlist" id="second">
<ul id="bgUL">
<ul>
<li>
<p>WE离职,谁能带上我一起杀出冰峰之巅</p>
</li>
<li>
<p id="l">根据WE官方显示,发生大幅度发生大幅度发的说法是的发送到······</p>
</li>
</ul>
<ul >
<li></li>
<li>23</li>
<li></li>
<li>452</li>
</ul>
</ul>
<div id="imgDv">
<img src="img/game2.png"/>
</div>
<!--mask-->
<div class="maskDiv"></div>
</div>
<div class="rightlist" id="third">
<ul id="bgUL">
<ul>
<li>
<p>WE离职,谁能带上我一起杀出冰峰之巅</p>
</li>
<li>
<p id="l">根据WE官方显示,发生大幅度发生大幅度发的说法是的发送到······</p>
</li>
</ul>
<ul >
<li></li>
<li>23</li>
<li></li>
<li>452</li>
</ul>
</ul>
<div id="imgDv">
<img src="img/game2.png"/>
</div>
<!--mask-->
<div class="maskDiv"></div>
</div>
<div class="rightlist" id="fourth">
<ul id="bgUL">
<ul>
<li>
<p>WE离职,谁能带上我一起杀出冰峰之巅</p>
</li>
<li>
<p id="l">根据WE官方显示,发生大幅度发生大幅度发的说法是的发送到······</p>
</li>
</ul>
<ul >
<li></li>
<li>23</li>
<li></li>
<li>452</li>
</ul>
</ul>
<div id="imgDv">
<img src="img/game2.png"/>
</div>
<!--mask-->
<div class="maskDiv"></div>
</div>
</div>
</div>
<!-mainCenter-俱乐部----start---->
<div id="mainCenter">
<div id="mainCenterNav">
<ul>
<li><a href="#">俱乐部</a></li>
<li ><a href="#" class="clubAct ali">全部</a></li>
<li ><a href="#" class="ali">国内</a></li>
<li ><a href="#" class="ali">国外</a></li>
</ul>
</div>
<div id="mainCenterContent">
<div class="listDiv" id="mainCfirst">
<div class="mainCtopImg">
<img src="img/game2.png"/>
</div>
<ul>
<li>IG电竞俱乐部</li>
<li>设计项目:DFSF,SDF,FG,ERE,QAW</li>
</ul>
</div>
<div class="listDiv" id="mainCsecond">
<div class="mainCtopImg">
<img src="img/game2.png"/>
</div>
<ul>
<li>IG电竞俱乐部</li>
<li>设计项目:DFSF,SDF,FG,ERE,QAW</li>
</ul>
</div>
<div class="listDiv" id="mainCthrid">
<div class="mainCtopImg">
<img src="img/game2.png"/>
</div>
<ul>
<li>IG电竞俱乐部</li>
<li>设计项目:DFSF,SDF,FG,ERE,QAW</li>
</ul>
</div>
<div class="listDiv" id="mainCforth">
<div class="mainCtopImg">
<img src="img/game2.png"/>
</div>
<ul>
<li>IG电竞俱乐部</li>
<li>设计项目:DFSF,SDF,FG,ERE,QAW</li>
</ul>
</div>
</div>
</div>
<!-mainCenter-俱乐部----end---->
</div>
</div>
</div>
<!--導入js文件-->
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/Game.js" ></script>
</body>
</html>
Game.js
原始数据 复制代码
$(function(){
//----------------------------------------------------------------------登錄 註冊
var Oa = $("#loginRegistBg a");
for (var i = 0; i < Oa.length; i++) {
Oa[i].index = i;
Oa[i].onmouseover = function(){
for (var i = 0; i < Oa.length; i++) {
Oa[i].className = "";
}
this.className = "aAct";
};
}
//-------------------------------------------------------------------電競熱聞 導航
var oLi = $("#navBg #navlist li");
for (var i = 0; i < oLi.length; i++) {
//當鼠標移到任意選項的時候
oLi[i].onmouseover = function(){
for (var i = 0; i < oLi.length; i++) {
oLi[i].className = "";
}
this.className = "activ";
};
//當鼠標點擊任意選項的時候
oLi[i].onclick = function(){
alert('我是:'+this.innerText);
};
}
//更多資訊
$("#moreInfo").click(function(){
alert("我是更多資訊");
});
//-------------------------------------------------------------------右边游戏列表当鼠标移上去出现的蒙板 mask
var oRightlist = $("#right .rightlist");
var oMask = $("#right .rightlist .maskDiv");
for (var i = 0; i < oRightlist.length; i++) {
oRightlist[i].index = i;
oRightlist[i].onmouseover = function()
{
for (var i = 0; i < oMask.length; i++) {
oMask[i].className = "maskDiv"; /*让所有都影藏*/
}
oMask[this.index].className = "show"; /*让点击当前index显示*/
oMask.css({
"position":"absolute", /*使其不继承父元素*/
"width": "32.18%", /*宽度*/
"height": "120px",
"background-color": "#FD685B",
"-moz-opacity":"0.5", /*透明度*/
"opacity": "0.5"
});
}
oRightlist[i].onmouseout = function(){
for (var i = 0; i < oMask.length; i++) {
oMask[i].className = "maskDiv";
}
}
}
//-------------------------------------------------------------------俱樂部
var clubLi = $("#mainCenter #mainCenterNav ul li a.ali");
for (var i = 0; i < clubLi.length; i++) {
clubLi[i].onmouseover = function(){
for (var i = 0; i < clubLi.length; i++) {
clubLi[i].className = "";
}
this.className = "clubAct";
};
//點擊時間
clubLi[i].onclick = function(){
alert("我是:"+this.innerHTML);
};
}
});
Game.css
原始数据 复制代码
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613
* {
margin: 0;
padding: 0;
}
/*注:凡直接涉及屏幕宽高,百分比皆以屏宽为1920px,高为975px作基准的,*/
/*头部heander start*/
#heander {
margin: 0;
width: 100%;
height: 100px;
background-color: lightgrey;
}
/*header 左右 */
#head_right,#head_left{
margin-top: 35px;
}
/*logo*/
#head_right {
padding-top: 2px;
text-align: center;
font-size: 40px;
color: white;
width: 5.5%;
height: 70%;
float: left;
/*background: #FD685B;*/
margin-left: 17.34375%;
}
#head_left {
float: right;
/*width: 19.1625%;*/
width: 368px;
height: auto;
margin-right: 17.17875%;
}
/*搜索框*/
#head_left #searchBg{
float: left;
width: 68%;
height: 32%;
solid:1px;
/*border-radius: 6px;*/
background: white;
margin-top: 15px;
border-radius: 6px;
}
#head_left #searchBg #search{
float: left;
width: 88%;
height: 28px;
margin-top: 1px;
margin-bottom: 1px;
margin-left: 2px;
border: 0;
outline: none;
background: transparent;
}
/*搜索小图标*/
#searchImg{
margin-top: 6px;
float: right;
margin-right: 2px;
}
/*注册登录框*/
#head_left #loginRegistBg{
width: 30%;
height: 26px;
float: right;
text-align: center;
margin-top: 14px;/*设置和左边搜索底部一样*/
/*color: white;*/
background: white;
border-radius: 6px;
padding-top: 5px;
font-size: 14px;
}
/*注册登录框*/
#head_left #loginRegistBg a{
color: darkgrey;
text-decoration: none;
}
#head_left #loginRegistBg a.aAct{
color: #FD6858;
}
#head_left #loginRegistBg #login #regist{
width: 30%;
float: right;
margin-left: 15px;
margin-top: 15px;
font-size: 1em;
color: #FD685B;
/*background: brown;*/
}
/*头部heander end*/
/*導航下面的遊戲圖*/
#hendGameImg{
width: 100%;
height: 500px;
background-color: #A9A9A9;
margin-top: 1px;
}
#hendGameImg img{
width: 100%;
height: 500px;
}
/*-------------------------------------main start -----------------*/
/*空背景*/
#main{
width: 100%;
height: 1710px;
background-color: #f2f2f2;
}
/*空背景上浮动的内容*/
#content{
margin-left: 17.17875%;
margin-right: 17.17875%;
background-color: darkgoldenrod;
height: auto;
}
/*導航bg---------------------------------------------------------------------電競熱聞 start---------------------*/
#navBg{
width: 100%;
height: 65px;
background-color:#f2f2f2;
}
ul.navInfo{
float: left;
}
/*電競熱聞*/
ul#hotGameInfo{
margin-left: 4%;
margin-right:2px;
margin-top: 14px;
}
ul#navlist{
display: flex;
background-color: transparent;
margin-top: 25px;
}
ul#navlist li{
list-style: none;
margin-left: 20px;
}
ul#navlist li a{
text-decoration: none;
color: #2f2f2f;
}
/*電競 導航 activ 樣式*/
ul#navlist li.activ a{
border-bottom: solid;
border-bottom-width:thin ;
border-bottom-color: #FD685B;
color: #FD685B;
/*獲取焦點和變換時間 ,與hover一起用*/
cursor: pointer;
transition: all 0.3s;
}
/*當鼠標移動到任意選項的時候*/
ul#navlist li.activ a:hover{
transform: scale(1.2);
color: #FD685B;
border-bottom-color: #FD685B;
}
/*更多資訊*/
#moreInfo{
float: right;
margin-right: 4%;
margin-top: 25px;
}
#moreInfo:hover{
color: #FD685B;
}
/*內容的*/
#mainHead{
width: 100%;
height: 517px;
background-color: lightgray;
display: flex;
}
#mainHead #left,#mainHead #right{
width: 49%;
height: 517px;
}
#mainHead #left{
margin-right: 2%;
background-color: lightgrey;
}
#mainHead #right{
background-color: lightgrey;
}
/*#left img*/
#left #picMaskBg /*img*/{
width: 100%;
height: 351px;
background-image: url(../img/game2.png);
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/*蒙版 mask----样式--------------------------------------------左 游戏图上 蒙版--start-----------------------------*/
#left #picMaskBg #mask{
width: 100%;
height: 52px;
background-color: #14161d;
filter:alpha(Opacity=80);
-moz-opacity:0.5;
opacity: 0.5;
font-size: 23px;
text-align: center;
position: absolute;
margin:auto;
padding-top: 23px;/*让文字垂直居中*/
top: 1;bottom: 0;left: 0;right: 0;/*top:1;很神奇*/
}
/*蒙版表明的字体*/
#mask p{
position: relative;
color: #FFFFFF;
}
/*蒙版 样式*/
/*蒙版下面的三列 框#left BottomThree ------------------------------------start-------*/
.BottomThree{
float: left;
width: 33.333%;
height: 153px;
margin-top: 10px;
}
/*左边框*/
#left #l{
background-image: url(../img/game2.png);
background-repeat: no-repeat;
background-size: cover
}
#left #c{
background-color: #FFFAF0;
padding-top: 10px;
height: 143px;
}
/*左边 中 li的样式*/
#left #c #bgUL li{
list-style: none;
background-color: transparent;
}
/*中间框 上行子颜色*/
#left #c #bgUL ul:first-child li:first-child{
color: #132434;
margin-left: 5px;
margin-right: 5px;
font-size: 15px;
font-weight: bold;
}
/*中间框 下行子颜色 大小*/
#left #c #bgUL ul:first-child li:last-child{
color: #867e7e;
font-size: 10px;
margin-top: 5px;
background-color: transparent;
margin-left: 5px;
margin-right: 5px;
}
#left #c #bgUL ul:last-child li:nth-child(1),#left #c #bgUL ul:last-child li:nth-child(3){
width: 20px;
height: 18px;
background-repeat: no-repeat;
background-image: url(../img/eye.png);
background-size: contain;
float: left;
}
/*浏览量 等四个 margin-left */
#left #c #bgUL ul:last-child{
margin-left: 30%;
}
/*浏览量 等四个 左浮动 margin-top 字体大小*/
#left #c #bgUL ul:last-child li{
float: left;
/*margin-top: 2px;*/
font-size: 10px;
}
/*右边框*/
#left #r{
background-image: url(../img/game2.png);
background-repeat: no-repeat;
background-size: cover;
/*filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;*/
}
/*右边 蒙版 */
/*顶部文字背景透明*/
#left #r p {
position: absolute;/*是其不继承父级元素*/
padding-left: 1px;
margin-top: 70px;
opacity: 1;
font-family: "librebaskerville-bold", serif;
font-size: 0.5em;
line-height: 1.5;
color: rgba(221, 221, 221, 0.96);
font-size: 0.5em;
line-height: 1.35;
letter-spacing: 0.1px;/*字间距*/
font-weight: bold;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
#left #r p:hover {
color: #FFA500;
}
/*蒙版下面的三列 框#left BottomThree ------------------------------------end-------*/
/*#right .rightlist---------------------------右边游戏列表-------start----------------------*/
#right .rightlist{
width: 100%;
height: 23.1%;
margin-bottom: 12px;
}
/*左边四组背景*/
#first,#second,#third,#fourth{
background-color: rgb(255, 255, 255);;
}
/*右边列表 里面 rightlist */
.rightlist{
display: flex;
}
.rightlist #imgDv{
width: 40%;
height: 77px;
}
.rightlist #imgDv img{
height:119px;
}
.rightlist #bgUL ul li{
list-style: none;
margin-left: 17px;
}
.rightlist #bgUL ul:first-child li{
width: 90%;
height: 40px;
}
.rightlist #bgUL ul:first-child li:first-child{
padding-top: 8px;
font-weight: inherit;
font-family: "agency fb";
/*color: #525050;*/
font-size: 15px;
font-weight: bold;
}
.rightlist #bgUL ul:first-child li:last-child{
margin-top: 10px;
color: grey;
}
.rightlist #bgUL ul:first-child li:last-child{
font-size: 10px;
}
/*浏览 详情 量位置 ***********/
.rightlist #bgUL ul:last-child{
margin-left: 65%;
}
/*浏览 详情 量 图标样式 ***********/
.rightlist #bgUL ul:last-child li:first-child{
width: 20px;
height: 18px;
background-repeat: no-repeat;
background-image: url(../img/eye.png);
background-size: contain;
float: left;
margin-top: 1px;
}
/*浏览 详情 量 样式 ****--------------------------*******/
.rightlist #bgUL ul:last-child li{
width: 18px;
height: 32px;
font-size: 10px;
float: left;
margin: 1px;
}
.rightlist #bgUL ul:last-child li:nth-child(3){
width: 18px;
height: 15px;
background-repeat: no-repeat;
background-image: url(../img/detail.png);
background-size: contain;
float: left;
margin-top: 1px;
}
/*鼠标移上去的时候出现的 蒙版*/
#right .rightlist .maskDiv{
width: 32.18%;
height: 120px;
background-color: #FD685B;
filter:alpha(Opacity=80);
-moz-opacity:0.5;
opacity: 0.5;
font-size: 23px;
text-align: center;
position: absolute;
display: none;
}
.show{
display: block;
}
/*#right .rightlist-----------------------右边游戏列表----end----------------------*/
/*mianCenterContenr--------------------------------------start--------------------*/
/*俱乐部 导航 ---------start---*/
#mainCenterNav{
width: 100%;
height: 65px;
background-color: #f2f2f2;
}
#mainCenterNav ul li{
float: left;
list-style: none;
margin-left: 20px;
margin-top: 28px;
}
/*俱乐部--------------------------------------------------------------C-L-U-B------------------*/
#mainCenterNav ul li a{
text-decoration: none;
color: #2f2f2f;
}
#mainCenterNav ul li:first-child{
margin-left: 4%;
margin-right:27px;
margin-top: 14px;
font-size: 35px;
font-weight: bold;
}
/*默認 .clubAct 的樣式*/
#mainCenterNav ul li a.clubAct{
color: #FD6858;
border-bottom:solid;
border-bottom-width: thin;
border-bottom-color: #FD6858;
}
/*隨機選 俱樂部 選項的時候*/
#mainCenterNav ul li a:hover{
color: #fd6858;
border-bottom:solid;
border-bottom-width: thin;
border-bottom-color: #FD6858;
transform:scale(1.1);
}
#mainCenterNav ul li a{
cursor: pointer;
transition: all 0.3s;
}
/*俱乐部 导航 ----------------end---*/
/*俱乐部 内容 -----------start------*/
#mainCenter #mainCenterContent .listDiv{
float: left;
width: 23.76%;
height: 412px;
background-color:white;
}
#mainCforth,#mainCsecond,#mainCthrid{
margin-left: 12px;
}
/*图片底部DIV 样式*/
#mainCenterContent .listDiv .mainCtopImg{
width: 100%;
height: 204px;
background-color: yellowgreen;
}
/*图片样式*/
#mainCenterContent .listDiv .mainCtopImg img{
width: 100%;
height: 204px;
}
/* .listDiv 让上行文字 下移 margin-top 等样式*/
#mainCenterContent .listDiv ul li:first-child{
font-size: 20px;
font-weight: bold;
list-style: none;
text-align: center;
margin-top: 35px;
}
/* .listDiv 让上行文字 下移 margin-top 等样式*/
#mainCenterContent .listDiv ul li:last-child{
font-size: 14px;
list-style: none;
text-align: center;
margin-top: 29px;
color: #909090;
}
#mainCfirst{
}
#mainCsecond{
}
#mainCthrid{
}
#mainCforth{
}
/*俱乐部 内容 -----------end------*/
/* ***********共享部分******--------------------start-------------------------******** */
/*当屏幕宽度小于768px的时候重置#searchBg,#heander,#main 以滚动条浏览 */
@media only screen and (max-width: 768px) {
#searchBg,#heander,#main{
width: 786px;
}
}
/*当屏幕宽度小于865px的时候重置#content 以滚动条浏览*/
@media only screen and (max-width: 865px) {
#content{
width: 560px;
}
}
/* ***********共享部分******--------------------end-------------------------******** */
/*=======test=======*/
#outer{
background: red;
/*padding-left: 100px;
padding-right: 100px*/;
}
.dv1{
float: left;
}
.main{
background-color:green;
width: 100%;
height: 16px;
}
.inner{
margin-left: 150px;
margin-right: 210px;
background: blue;
}
.left{
width: 150px;
height:16px;
background:yellow;
text-align: center;
margin-left: -100%;
/*position: relative;
left: -150px;*/
}
.right{
background: orange;
float: left;
width: 200px;
height: 16px;
margin-left: -200px;
/*position: relative;
right: -200px;*/
}

评论列表( 0 )

你可以在登录后,对此项目发表评论

4_float_left_people 4_float_left_close