H5 JQUERY 滚动代码

最新推荐文章于 2023-03-28 19:59:54 发布

原创最新推荐文章于 2023-03-28 19:59:54 发布 · 897 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用HTML、CSS及jQuery实现的滚动菜单效果。该菜单包含20个条目，通过按钮点击或鼠标滚轮操作可以平滑地在这些条目之间切换。文章详细介绍了如何设置页面布局，并利用jQuery进行事件监听和动画效果实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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