<html> <head> <meta charset="utf-8"> <script language = "javascript" type="text/javascript"src="jquery/jquery-3.1.0.js"></script> <style> #content{ display:block; white-space:nowrap; overflow: hidden; width: 480px; height: 142px; } #menu,#menu li{ list-style:none; padding:0; margin:0; color: #ed1c24; text-align: center; } #menu li{ display: inline-block; position: relative; } button,#content{float: left;position: relative;} </style> </head> <body> <button> < </button> <div id="content"> <ul id="menu"></ul> </div> <button> > </button> <script> $(function(){ var id = 0 for(var i=0;i<20;i++){ $('#menu').append("<li><a href='#'><img src='pic2.png'/><h4>这是"+i+"</h4></a></li>") } $('button').css({top:($('#content').height())/2}) var c_width = $('#content').width() var pages = Math.ceil($('li').length/6) var page = 1 $('button').click(function(){ $('body').trigger('pageturn',($("this:contains('>')")?'up':'down')) }) $('body').bind("mousewheel",function(e){ $('body').trigger('pageturn',(e.originalEvent.wheelDelta < 0?'up':'down')) }) $('body').bind('pageturn',function(e,data){ if($('#menu li').is(":animated")) return if(data == 'down'){ page-- if(page<1){ page = pages $('#menu li').animate({left:(-c_width*(pages-1))+'px'},500) }else{ $('#menu li').animate({left:"+="+c_width+'px'},500) } }else{ page++ if(page>pages){ page = 1 $('#menu li').animate({left:'0px'},500) }else{ $('#menu li').animate({left:"-="+c_width+'px'},500) } } }) }) </script> </body> </html>
228
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
