Skip to content

Commit

Permalink
new code
Browse files Browse the repository at this point in the history
  • Loading branch information
@puag
puag committed Sep 2, 2014
1 parent 13ad1e5 commit b2810d4
Show file tree
Hide file tree
Showing 20 changed files with 284 additions and 0 deletions.
5 changes: 5 additions & 0 deletions css/main.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 21 additions & 0 deletions css/reset.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
*{ margin:0; padding:0;}
body{font:14px/1.125 Arial,Helvetica,sans-serif;background:#fff;}
table{border-collapse:collapse;border-spacing:0;}
li{list-style:none;}
fieldset,img{border:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
q:before,q:after{content:'';}
a:focus,input,textarea{outline-style:none;}
input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}
textarea{resize:none}
address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;}
legend{color:#000;}
abbr,acronym{border:0;font-variant:normal;}
a{color:#0a8cd2;text-decoration:none;}
a:hover{text-decoration:underline;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
.clearfix{display:block;}
.clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;}
.none{display:none}
.shadow{border:1px solid #e6e6e6;border-radius:5px;box-shadow:0px 2px 3px #ececec;background: #fff;}
27 changes: 27 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" media="all"/>
<link rel="stylesheet" type="text/css" href="css/main.css" media="all"/>
</head>
<body>
<div class="wrap shadow">
<ol id="ol" class="list"></ol>
</div>
<script type="text/javascript">
var str = '',
data = [
{ url : 'slide/bd01.html', title : '百度爱玩 - 图片轮换效果' },
{ url : 'http://www.sohu.com', title : '百度图片轮换效果' },
{ url : 'http://www.sohu.com', title : '百度图片轮换效果' }
];
for(var i = 0; i < data.length; i++){
var items = data[i];
str += '<li><a href="' + items.url + '" target="_blank" title="">' + items.title + '</a></li>';
}
document.getElementById('ol').innerHTML = str;
</script>
</body>
</html>
153 changes: 153 additions & 0 deletions slide/bd01.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>百度爱玩 - 图片轮换效果</title>
<link rel="stylesheet" type="text/css" href="css/slide.css" media="all"/>
</head>
<body>
<div id="mp-banner" class="mp-banner">
<div id="j-banner" class="mp-banner-wrap">
<div class="mp-banner-inner">
<ul class="mp-banner-ct mp-clearfix" id="mp-banner-ct">
<li class="mp-banner-item">
<a href="#" class="mp-banner-link" title="大型3D武侠修仙网页游戏，全视角3D战斗！">开始游戏</a>
<div class="mp-banner-back">
<div class="mp-btn-start">开始游戏</div>
</div>
<div class="mp-banner-front">
<img width="237" height="163" alt="剑宗" src="images/1.jpg" class="mp-banner-img">
<div class="mp-banner-footer2">
<span class="num">1</span>
<h3>剑宗</h3>
<span class="role">角色扮演</span></div>
<p class="mp-banner-intro">大型3D武侠修仙网页游戏，全视角3D战斗！</p>
</div>
</li>
<li class="mp-banner-item">
<a href="#" class="mp-banner-link" title="大型3D武侠修仙网页游戏，全视角3D战斗！">开始游戏</a>
<div class="mp-banner-back">
<div class="mp-btn-start">开始游戏</div>
</div>
<div class="mp-banner-front">
<img width="237" height="163" alt="剑宗" src="images/2.jpg" class="mp-banner-img">
<div class="mp-banner-footer2">
<span class="num">1</span>
<h3>剑宗</h3>
<span class="role">角色扮演</span></div>
<p class="mp-banner-intro">大型3D武侠修仙网页游戏，全视角3D战斗！</p>
</div>
</li>
<li class="mp-banner-item">
<a href="#" class="mp-banner-link" title="大型3D武侠修仙网页游戏，全视角3D战斗！">开始游戏</a>
<div class="mp-banner-back">
<div class="mp-btn-start">开始游戏</div>
</div>
<div class="mp-banner-front">
<img width="237" height="163" alt="剑宗" src="images/3.jpg" class="mp-banner-img">
<div class="mp-banner-footer2">
<span class="num">1</span>
<h3>剑宗</h3>
<span class="role">角色扮演</span></div>
<p class="mp-banner-intro">大型3D武侠修仙网页游戏，全视角3D战斗！</p>
</div>
</li>
<li class="mp-banner-item">
<a href="#" class="mp-banner-link" title="大型3D武侠修仙网页游戏，全视角3D战斗！">开始游戏</a>
<div class="mp-banner-back">
<div class="mp-btn-start">开始游戏</div>
</div>
<div class="mp-banner-front">
<img width="237" height="163" alt="剑宗" src="images/4.jpg" class="mp-banner-img">
<div class="mp-banner-footer2">
<span class="num">1</span>
<h3>剑宗</h3>
<span class="role">角色扮演</span></div>
<p class="mp-banner-intro">大型3D武侠修仙网页游戏，全视角3D战斗！</p>
</div>
</li>
<li class="mp-banner-item">
<a href="#" class="mp-banner-link" title="大型3D武侠修仙网页游戏，全视角3D战斗！">开始游戏</a>
<div class="mp-banner-back">
<div class="mp-btn-start">开始游戏</div>
</div>
<div class="mp-banner-front">
<img width="237" height="163" alt="剑宗" src="images/5.jpg" class="mp-banner-img">
<div class="mp-banner-footer2">
<span class="num">1</span>
<h3>剑宗</h3>
<span class="role">角色扮演</span></div>
<p class="mp-banner-intro">大型3D武侠修仙网页游戏，全视角3D战斗！</p>
</div>
</li>
<li class="mp-banner-item">
<a href="#" class="mp-banner-link" title="大型3D武侠修仙网页游戏，全视角3D战斗！">开始游戏</a>
<div class="mp-banner-back">
<div class="mp-btn-start">开始游戏</div>
</div>
<div class="mp-banner-front">
<img width="237" height="163" alt="剑宗" src="images/6.jpg" class="mp-banner-img">
<div class="mp-banner-footer2">
<span class="num">1</span>
<h3>剑宗</h3>
<span class="role">角色扮演</span></div>
<p class="mp-banner-intro">大型3D武侠修仙网页游戏，全视角3D战斗！</p>
</div>
</li>
</ul>
</div>
<div id="j-banner-side" class="mp-banner-aside">
<h3 class="title">大家都爱玩<i class="mp-icon mp-icon-hot hot"></i></h3>
<ul class="list">
<li class="list-item">
<a target="_blank" href="#">
<img alt="大天使之剑" src="images/s1.jpg" class="pic">
<div class="txt">
<h4 class="name">大天使之剑</h4>
<p class="role">战争策略</p>
<p class="platform">37游戏</p>
</div>
</a>
</li>
<li class="list-item">
<a target="_blank" href="#">
<img alt="大天使之剑" src="images/s2.jpg" class="pic">
<div class="txt">
<h4 class="name">大天使之剑</h4>
<p class="role">战争策略</p>
<p class="platform">37游戏</p>
</div>
</a>
</li>
<li class="list-item">
<a target="_blank" href="#">
<img alt="大天使之剑" src="images/s3.jpg" class="pic">
<div class="txt">
<h4 class="name">大天使之剑</h4>
<p class="role">战争策略</p>
<p class="platform">37游戏</p>
</div>
</a>
</li>
</ul>
</div>
<div class="mp-banner-pager">
<div class="mp-banner-pager-prev OP_LOG_LINK" id="mp-banner-pager-prev">
<i class="arrow-left mp-png"></i>
</div>
<div class="mp-banner-pager-next OP_LOG_LINK" id="mp-banner-pager-next">
<i class="arrow-right mp-png"></i>
</div>
</div>
</div>
<div class="mp-banner-bg">
<ul>
<li class="list-item yeyou"></li>
<li class="list-item wangyou" style="display: none;"></li>
<li class="list-item xiaoyouxi" style="display: none;"></li>
<li class="list-item shouyou" style="display: none;"></li>
</ul>
</div>
</div>
</body>
</html>
78 changes: 78 additions & 0 deletions slide/css/slide.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
/* reset */
*{ margin:0; padding:0;}
body{font:12px/1.125 Arial,Helvetica,sans-serif;background:#fff;}
table{border-collapse:collapse;border-spacing:0;}
li{list-style:none;}
fieldset,img{border:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
q:before,q:after{content:'';}
a:focus,input,textarea{outline-style:none;}
input[type="text"],input[type="password"],textarea{outline-style:none;-webkit-appearance:none;}
textarea{resize:none}
address,caption,cite,code,dfn,em,i,th,var{font-style:normal;font-weight:normal;}
legend{color:#000;}
abbr,acronym{border:0;font-variant:normal;}
a{color:#0a8cd2;text-decoration:none;}
a:hover{text-decoration:underline;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
.clearfix{display:block;}
.clear{clear:both;height:0;font:0/0 Arial;visibility:hidden;}
.none{display:none}
/* main */
.mp-banner{position:relative;height:303px}
.mp-banner-wrap{position:relative;width:980px;margin:0 auto;height:303px;}
.mp-banner-wrap .mp-banner-inner{position:relative;width:757px;height:303px;overflow:hidden}
.mp-banner-ct{position:absolute;top:20px;left:0;width:10000px}
.mp-banner-item{position:relative;float:left;width:237px;height:283px;margin-right:23px}
.mp-banner-item:hover .mp-banner-back{height:283px;z-index:2}
.mp-banner-item .show{z-index:2;height:283px}
.mp-banner-back,.mp-banner-front,.mp-banner-overlay{position:absolute;width:237px;height:283px;top:0;left:0}
.mp-banner-overlay{background:#000;opacity:.7;filter:alpha(opacity=70);z-index:-1}
.mp-banner-front{_overflow:hidden}
.mp-banner-back{color:#fff;z-index:0;height:0;overflow:hidden}
.mp-banner-back .mp-btn-start{position:absolute;top:182px;right:0;width:75px;height:28px;line-height:28px;background:#ff7a01;border:1px solid #d45f00;text-align:center}
.mp-banner-link{position:absolute;top:0;left:0;width:100%;height:234px;border-radius:5px;z-index:9;background:url(../images/transparent.gif);text-indent:-9999px;overflow:hidden;text-align:left;direction:ltr}
.mp-banner-header{position:relative;height:36px;line-height:36px}
.mp-banner-images{display:block;border:0}
.mp-banner-pager{position:relative;width:980px;margin:0 auto;font-size:0}
.mp-banner-pager .arrow-left,.mp-banner-pager .arrow-right{display:block;width:65px;height:65px;background:url(../images/banner-arrow.png) no-repeat}
.mp-banner-pager-next,.mp-banner-pager-prev{position:absolute;top:-233px;width:65px;height:65px;cursor:pointer;z-index:10; display:none;}
.mp-banner-pager-prev{left:0}
.mp-banner-pager-prev .arrow-left{background-position:0 -225px}
.mp-banner-pager-next{right:223px}
.mp-banner-pager-next .arrow-right{background-position:0 -160px}
.hover .mp-banner-pager-next,.hover .mp-banner-pager-prev{visibility:visible}
.mp-banner-name{padding-left:10px;font-size:16px;color:#333}
.mp-banner-type{position:absolute;top:0;right:0;height:36px;line-height:36px;font-size:13px;color:#6c6c6c;padding-right:.75em}
.mp-banner-footer{height:35px;line-height:35px;font-size:13px;color:#6c6c6c;width:237px}
.mp-banner-footer-center{color:#000;text-align:center}
.mp-banner-footer-center em{font-style:normal;color:red}
.mp-banner-bg{position:absolute;top:0;left:0;z-index:-2;height:100%;width:100%}
.mp-banner-bg ul{width:100%;height:100%}
.mp-banner-bg .list-item{display:block;height:100%}
.mp-banner-bg .yeyou{background:url(../images/banner-bg-red.jpg) repeat}
.mp-banner-bg .wangyou{background:url(../images/banner-bg-blue.jpg) repeat}
.mp-banner-bg .shouyou{background:url(../images/banner-bg-purple.jpg) repeat}
.mp-banner-bg .xiaoyouxi{background:url(../images/banner-bg-black.jpg) repeat}
.mp-banner-footer2{position:relative;height:57px;padding-left:42px}
.mp-banner-footer2 .num{position:absolute;top:0;left:0;font-size:52px;color:#fff}
.mp-banner-footer2 h3{padding-top:5px;font-size:18px;height:28px;line-height:28px;color:#fff}
.mp-banner-footer2 .platform,.mp-banner-footer2 .role{height:16px;line-height:16px;font-size:14px}
.mp-banner-footer2 .role{color:#ff7a01;margin-right:6px}
.mp-banner-footer2 .platform{color:#ccc}
.mp-banner-intro{height:16px;line-height:16px;font-size:14px;color:#fff}
.mp-banner-aside{position:absolute;top:20px;right:0;z-index:10;width:200px}
.mp-banner-aside .title{position:relative;height:36px;line-height:36px;color:#fff;font-size:16px;text-align:center;background-image:-webkit-gradient(linear,left top,left bottom,from(#666),to(#4f4f4f));background-image:-webkit-linear-gradient(top,#666,#4f4f4f);background-image:-moz-linear-gradient(top,#666,#4f4f4f);background-image:-o-linear-gradient(top,#666,#4f4f4f);background-image:linear-gradient(to bottom,#666,#4f4f4f);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#ff666666',endColorstr='#ff4f4f4f',GradientType=0)}
.mp-banner-aside .hot{position:absolute;top:0;left:0}
.mp-banner-aside .list-item{position:relative;height:82px;background:#323232;vertical-align:middle}
.mp-banner-aside a{display:block;height:100%}
.mp-banner-aside a:hover{background:#3d3d3d; text-decoration:none;}
.mp-banner-aside .pic{position:absolute;top:9px;left:9px;width:76px;height:64px}
.mp-banner-aside .txt{padding-left:95px}
.mp-banner-aside .txt .name,.mp-banner-aside .txt .platform,.mp-banner-aside .txt .role{height:22px;line-height:22px}
.mp-banner-aside .txt .name{padding-top:9px;color:#fff;font-size:14px}
.mp-banner-aside .txt .platform{color:#ee7116;font-size:13px}
.mp-banner-aside .txt .role{color:#999;font-size:13px}


Binary file added slide/images/1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added slide/images/2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added slide/images/3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added slide/images/4.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added slide/images/5.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added slide/images/6.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added slide/images/banner-arrow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added slide/images/banner-bg-black.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added slide/images/banner-bg-blue.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added slide/images/banner-bg-purple.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added slide/images/banner-bg-red.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added slide/images/s1.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added slide/images/s2.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added slide/images/s3.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added slide/images/transparent.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit b2810d4

Please sign in to comment.