标签：
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>塔楼办公</title>
<link href="css/swiper.css" rel="stylesheet" type="text/css">
<style type="text/css">
body, html {
width:100%;
/*background:url(../images/bj.jpg) no-repeat center center;*/
background-size:100% 100%;
height:100%;
}
<!--common-->
.current {
height:40px;
width:963px;
margin:123px auto 0;
color:#ffffff;
font-size:14px;
text-align:right;
background:url(images/line.png) repeat-x left center;
}
/*this*/
.gundong {
width:1100px;
margin:0 auto;
position:relative;
height:554px;
overflow:hidden;
}
.gundong .swiper-container{
width:963px;
overflow:hidden;
margin:0 auto;
text-align:center;
height:554px;
position:relative;
background:#cccccc;
}
.gundong .swiper-container .swiper-slide{
position:relative;
overflow:hidden;
}
.gundong .swiper-button-next,.gundong .swiper-button-prev{
top:0;
}
.show{
width:230px;
height:554px;
background:rgba(0,0,0,.1);
position:absolute;
right:-230px;
top:0;
}
.show h2{
height:30px;
color:#ffffff;
font-weight:bold;
background:url(images/line.png) repeat-x left bottom;
width:80%;
margin:30px auto 10px;
}
.show p{
font-size:14px;
color:#ffffff;
line-height:25px;
padding-left:20px;
padding-right:20px;
text-align:left;
}
.close{
top:0px;
right:0px;
width:40px;
z-index:999;
position:absolute;
}
.odiv{
width:150px;
height:300px;
background:#cccccc;
overflow:hidden;
}
</style>
</head>
<body>
<div class="sy-nav" style="display:none"> <img src="images/logo.jpg" class="login">
<div class="sy-right" id="oneul">
<ul>
<li><a href="#">关于PCP</a></li>
<li><a href="#">地理位置</a></li>
<li><a href="#">塔楼办公区</a></li>
<li><a href="#">space8</a></li>
<li><a href="#">绿色办公</a></li>
<li><a href="#">项目配套</a></li>
<li><a href="#">官方视频</a></li>
<li><a href="#">最新动态</a></li>
</ul>
<img src="images/search.png" class="search"> </div>
</div>
<div class="current" style="display:none"> ABUOPCP | 塔楼 </div>
<div class="gundong">
<div class="swiper-button-next"><img src="images/sy/left.png"></div>
<div class="swiper-button-prev"><img src="images/sy/right.png"></div>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">00
<div class="show">
<h2>标题111</h2>
<div class="odiv">
<p>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>
</div>
</div>
<img class="close" src="yingke/images/close21.png">
</div>
<div class="swiper-slide"><img src="images/banner2.jpg">
<div class="show">
<h2>标题2222</h2>
<div class="odiv">
<p>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>
</div>
</div>
</div>
<div class="swiper-slide"><img src="images/banner3.jpg">
<div class="show">
<h2>标题3333</h2>
<div class="odiv">
<p>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>
</div>
</div>
</div>
<div class="swiper-slide"><img src="images/banner4.jpg">
<div class="show">
<h2>标题44444</h2>
<div class="odiv">
<p>说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明说明</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clearH"></div>
<div class="banquan" style="display:none"> Copyright@2015 FFC-ALL RIGHTS Reserved 京ICP备05023483号
<div class="banquan-r"> <a href="#">版权所有</a> | <a href="#">免责声明</a> </div>
</div>
</body>
</html>
<script src="js/jquery.1.9.0.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/swiper.js"></script>
<script type="text/javascript">
$(function(){
slide.bindEvent();
fontFlow.init();
})
var swiper = new Swiper(‘.swiper-container‘, {
nextButton: ‘.swiper-button-next‘,
prevButton: ‘.swiper-button-prev‘,
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
/*autoplay: 2500,*/
/* autoplayDisableOnInteraction:false,*/
loop : true,
});
var slide ={
bindEvent : function(){
//显示图片上的文字
$(".swiper-slide").mousedown(function(){
$(this).find(".show").animate({
right : 0
},{
easing : "easeOutCubic",
duration: 1000,
})
})
$(".close").click(function(){
$(this).parents(".show").animate({
right : -300,
},{
easing : "easeOutCubic",
duration: 1000,
})
})
}
}
//文字点击往上走
var fontFlow = {
//外面的高度
outw : "",
//要展示文字的高度
intw : "",
// 速度初使值
topNum :"",
// 速度
speed : "",
init : function(){
this.outw = $(".odiv").height();
this.intw = $(".odiv").find("p").height();
this.topNum = 0;
this.speed = 30;
var _this = this;
if(this.intw > this.outw){
$("#btn").click(function(){
_this.topNum += _this.speed;
console.log(_this.topNum);
$(".odiv").find("p").animate({
"margin-top": -_this.topNum,
},1000);
})
}
}
};
//导航菜单
var navigation = {
init : function(){
$("#oneul li").hover(
function(){
$(this).find("ul").show();
},
function(){
$(this).find("ul").hide();
}
)
}
};
</script>
标签：
原文地址：http://www.cnblogs.com/yjhua/p/5506306.html
