您的位置：首页 > 其它
lunbo

2016-05-17 20:24 239 查看
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>测试一下</title>
</head>
<style type="text/css">
.odiv{
width:150px;
height:300px;
background:#cccccc;
overflow:hidden;

}
.nav ul{margin:0; padding:0;}
.nav ul li{
float:left;
list-style:none;
width:100px; position:relative; cursor:pointer;

}
.nav ul li ul{
clear:both;
width:100px;
background:#CCC;
position:absolute;
left:0;
top:20px;
}
.nav ul li ul li{
background:#cccccc;
line-height:20px;

}
</style>
<body>

<div class="nav">
<ul id="oneul">
<li>首页
<ul class="twoul">
<li>了文字</li>
<li>了文字</li>
<li>了文字</li>
<li>了文字</li>
<li>了文字</li>
</ul>
</li>
<li>二级
<ul>
<li>了文字</li>
<li>了文字</li>
<li>了文字</li>
<li>了文字</li>
<li>了文字</li>
</ul>
</li>
<li>这件文
<ul>
<li>了文字</li>
<li>了文字</li>
<li>了文字</li>
<li>了文字</li>
<li>了文字</li>
</ul>
</li>
<li>依前僭伪
<ul>
<li>了文字</li>
<li>了文字</li>
<li>了文字</li>
<li>了文字</li>
<li>了文字</li>
</ul>
</li>
<li>诸将皆亡
<ul>
<li>了文字</li>
<li>了文字</li>
<li>了文字</li>
<li>了文字</li>
<li>了文字</li>
</ul>

</li>
</ul>
</div>
<div style="clear:both; height:200px;"></div>
<div class="odiv" style="clear:both; margin-top:100px; display:none;">
<p>
宋·范仲淹《耀州谢上表》：“今后贼界差人齎到文字，如依前僭伪，立便发遣出界，不得收接。”《宣和遗事》前集：“有那押司宋江接了文字看了，星夜走去石碣村，报与晁盖几个。”《秦并六国平话》卷上：“各路州县接得文字，得知韩王被虏，诸将皆亡，未免具降书投降。”《古今小说·简帖僧巧骗皇甫妻》：“钱大尹看罢，即时教押下一箇所属去处，叫将山前行山定来。当时山定承了这件文字。”
</p>
</div>
<div id="btn">点击往下</div>
<style>
*{
margin:0;
padding:0;
}
.luobo-out{
width:800px;
position:relative;
margin:0 auto;
}
.luobo-out .button-left,.luobo-out .button-right{
position:absolute;
top:0;
width:80px;
height:360px;
background:#09C;
z-index:999;
}
.luobo-out .button-left{
left:-20px;
}
.luobo-out .button-right{
right:-20px;
}

.luobo{
width:600px;
height:360px;
background:#cccccc;
position:relative;
margin:0 auto;
overflow:hidden;
}
.luobo-int{
position:absolute;
}
.luobo-int ul li{
float:left;
padding:0;
margin:0;

}

</style>
<div class="luobo-out">
<div class="button-left"></div>
<div class="button-right"></div>
<div class="luobo">
<div class="luobo-int">
<ul>
<li>111 </li>
<li>222 </li>
<li>333 </li>
<li>5444 </li>
</ul>
</div>
</div>
</div>
<div id="oDiv">fsdfs</div>
</body>
</html>
<script src="yingke/js/jquery.1.9.0.min.js"></script>
<script src="yingke/js/jquery.easing.min.js"></script>

<script type="text/javascript">

$(function(){
fontFlow.init();
navigation.init();
slider.init();

})
//轮播
var slider = {
//轮播的个数
liNum : "",
//轮播的宽度
outW :"",
thisIndex :"",

init : function(){
$(".luobo-int li:last-child").after($(".luobo-int li:first-child").clone());

this.liNum = $(".luobo-int").find("li").length;
this.outW = $(".luobo").width();
this.thisIndex = 0;

console.log(this.liNum +"li");

$(".luobo-int").width(this.liNum*this.outW);
$(".luobo-int").find("li").css({"width":this.outW});

this.clickEvent();
this.playPage();

},
clickEvent : function(){
var _this = this;
$(".button-left").click(function(){
_this.thisIndex++;
_this.bian(_this.thisIndex);

});

$(".button-right").click(function(){
_this.thisIndex--;
console.log(_this.thisIndex);
_this.bian(_this.thisIndex);
})

},

playPage : function(addNum){
$(".luobo-int").animate({
left : this.outW*addNum
},{
easing : "easeOutCubic",
duration: 1000,
})

},
//左边的边缘的处理
bian : function(index){
console.log(index);
if(index==1){
this.thisIndex=0;
return false;

} else if(index == (-4) ){//右边最后一张时处理
this.thisIndex=-1;
$(".luobo-int").css({
left: 0,

})

}else{
this.playPage(this.thisIndex);
}

},

};

//导航菜单
var navigation = {
init : function(){
$("#oneul li").hover(
function(){
$(this).find("ul").show();
},
function(){
$(this).find("ul").hide();
}
)

}
};

//文字点击往上走
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);

})
}
}
};

</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航