css3单页滚动右侧圆点索引效果|纵向滚屏翻页2077
点右边的按钮,底部的按钮,滚动鼠标滚轮,按下键盘方向上下键查看效果
$(function(){
		var btn_index=0;
		/*右边按钮点击*/
		$('.section-btn li').each(function(index) {
			$(this).click(function(){
				btn_index=index;
				scroller();
			})
		});
		/*翻页按钮点击*/
		$('.go-btn').one('click',btn_go);
		function btn_go(){
			go_up();scroller();	
			setTimeout(function(){$('.go-btn').one('click',btn_go)},1000)
		};
		/*响应鼠标*/
		$('.section-wrap').one('mousewheel',mouse_);
		function mouse_(event){
			if (event.deltaY<0) {go_up()}
			else{go_down()}
			scroller();
			setTimeout(function(){$('.section-wrap').one('mousewheel',mouse_)},1000)
		};
		
		/*当前页面赋值*/
		function go_up(){btn_index++;if(btn_index==$('.section-btn li').length){btn_index=$('.section-btn li').length-1};}
		function go_down(){btn_index--;if(btn_index<0){btn_index=0};}
		
		/*页面滑动*/
		function scroller(){
			$('.section-btn li').eq(btn_index).addClass('cur').siblings().removeClass('cur');	
			$('.section-wrap').attr("class","section-wrap").addClass(function() {
					return "put-section-"+btn_index;
			 }).find('.section').eq(btn_index).find('.title').addClass('active');
		};
		
		/*响应键盘上下键*/
		$(document).one('keydown',keyaction);
		function keyaction(event){
			var e=event||window.event;
			var key=e.keyCode||e.which||e.charCode;
			switch(key)	{
				case 38: go_down();scroller();	
				break;
				case 40: go_up();scroller();	
				break;
			};
			setTimeout(function(){$(document).one('keydown',keyaction)},1000)
		}
		
		
	})
      立即下载 ( 文件大小:0.00 M)

    浏览器兼容性

    1. IE 8
    2. IE 9
    3. Mozilla Firefox
    4. Google Chrome
    5. Oper
    6. Safari

    技术讨论区(由于垃圾评论太多,已关闭评论功能)

    1. wimiliu1

      wimiliu

      我前段时间做了跟这个差不多的页面

      2015-8-7 16:42:32| 回复

    键盘快捷键: 上一个 下一个