<!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>