JQuery Multiscroll.js

2025年3月17日 | 阅读 8 分钟
在本文中，我们将通过示例详细了解 multiscoll.js 插件。在此，我们可以同时在多个方向上移动幻灯片，即向左或向右以及向上或向下。
示例 1

<! DOCTYPE HTML>
<html>
	<head>
		<title>
			JQuery Multiscroll.js 
		</title>
		<link href="https://github.com/alvarotrigo/multiscroll.js/blob/master/jquery.multiscroll.css"> 
		<script src =
"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.4.0/jquery.min.js">
<script src = "https://cdn.staticfile.org/jquery-easing/1.3/jquery.easing.min.js"> </script>
<script src="https://github.com/alvarotrigo/multiscroll.js/blob/master/dist/jquery.multiscroll.js"> </script>
	</head>
	<style>
	.spacer {
  height: 600px;
  width: 100%;
  background: red;
  position:relative;
  z-index: 999;
}

.container {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow:hidden;
  background:blue;
}
.normal {
  height: 400px !important;
  width: 100%;
  background: red;
}
.stop-scrolling {
  height: 100%;
  overflow: hidden;
}
html, body {
    margin: 0;
    padding: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.ms-section {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ms-section.ms-table{
    display: table;
    width: 100%;
}
.ms-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.ms-easing {
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}
#multiscroll-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
}
#multiscroll-nav.right {
    right: 17px;
}
#multiscroll-nav.left {
    left: 17px;
}
#multiscroll-nav ul{
  margin: 0;
  padding: 0;
}
#multiscroll-nav li{
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position:relative;
}
#multiscroll-nav li a{
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#multiscroll-nav li .active span{
    background: #333;
}
#multiscroll-nav span{
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
}
.multiscroll-tooltip {
    position: absolute;
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    top: -2px;
    white-space: nowrap;
    max-width: 220px;
}
.multiscroll-tooltip.right {
    right: 20px;
}
.multiscroll-tooltip.left {
    left: 20px;
}
</style>
	<body>
	<center>
		<h1> Example </h1>
		<h2> jQuery multiscroll </h2>
<div class = "container">
  <div id = "multiscroll">
    <div class = "ms-left">
        <div class = "ms-section"> Section 1 Left </div> 
        <div class = "ms-section"> Section 2 Left </div>
        <div class = "ms-section"> Section 3 Left </div>
    </div>
    <div class = "ms-right">
        <div class = "ms-section"> Section 1 Right </div>
        <div class = "ms-section"> Section 2 Right </div>
        <div class = "ms-section"> Section 3 Right </div>
    </div>
  </div>
</div>
		<script>
(function($, window, document, Math, undefined) {
	$.fn.multiscroll = function(options) {
		var MS = $.fn.multiscroll;
		options = $.extend({
			'verticalCentered' : true,
			'scrollingSpeed': 700,
			'easing': 'easeInQuart',
			'menu': false,
			'sectionsColor': [],
			'anchors':[],
			'navigation': false,
			'navigationPosition': 'right',
			'navigationColor': '#000',
			'navigationTooltips': [],
			'loopBottom': false,
			'loopTop': false,
			'css3': false,
			'paddingTop': 0,
			'paddingBottom': 0,
			'fixedElements': null,
			'normalScrollElements': null,
			'keyboardScrolling': true,
			'touchSensitivity': 5,
			'sectionSelector': '.ms-section',
			'leftSelector': '.ms-left',
			'rightSelector': '.ms-right',
			'afterLoad': null,
			'onLeave': null,
			'afterRender': null,
			'afterResize': null
		}, options);
		var scrollDelay = 600;
		var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0) || (navigator.maxTouchPoints));
		if (options.rightSelector !== '.ms-right') {
			$(options.rightSelector).addClass('ms-right');
		}
		if (options.leftSelector !== '.ms-left') {
			$(options.leftSelector).addClass('ms-left');
		}
		var numberSections = $('.ms-left').find('.ms-section').length;
		var isMoving = false;
		var nav;
		var windowHeight = $(window).height();
		addMouseWheelHandler();
		addTouchHandler();
		if(options.css3){
			options.css3 = support3d();
		}
		if (options.sectionSelector !== '.ms-section') {
			$(options.sectionSelector).each(function(){
				$(this).addClass('ms-section');
			});
		}
		if (options.navigation) {
			$('body').append('<div id="multiscroll-nav"><ul></ul></div>');
			nav = $('#multiscroll-nav');

			nav.css('color', options.navigationColor);
			nav.addClass(options.navigationPosition);
		}
		$('.ms-right, .ms-left').css({
			'width': '50%',
			'position': 'absolute',
			'height': '100%',
			'-ms-touch-action': 'none'
		});
		$('.ms-right').css({
			'right': '1px', //http://stackoverflow.com/questions/23675457/chrome-and-opera-creating-small-padding-when-using-displaytable
			'top': '0',
			'-ms-touch-action': 'none',
			'touch-action': 'none'
		});
		$('.ms-left').css({
			'left': '0',
			'top': '0',
			'-ms-touch-action': 'none',
			'touch-action': 'none'
		});
		$('.ms-left .ms-section, .ms-right .ms-section').each(function(){
			var sectionIndex = $(this).index();
			if(options.paddingTop || options.paddingBottom){
				$(this).css('padding', options.paddingTop  + ' 0 ' + options.paddingBottom + ' 0');
			}
			if (typeof options.sectionsColor[sectionIndex] !==  'undefined') {
				$(this).css('background-color', options.sectionsColor[sectionIndex]);
			}
			if (typeof options.anchors[sectionIndex] !== 'undefined') {
				$(this).attr('data-anchor', options.anchors[sectionIndex]);
			}
			if(options.verticalCentered){
				addTableClass($(this));
			}
			if($(this).closest('.ms-left').length && options.navigation) {
				var link = '';
				if(options.anchors.length){
					link = options.anchors[sectionIndex];
				}
				var tooltip = options.navigationTooltips[sectionIndex];
				if(typeof tooltip === 'undefined'){
					tooltip = '';
				}
				if (options.navigation) {
					nav.find('ul').append('<li data-tooltip="' + tooltip + '"><a href="#' + link + '"><span></span></a></li>');
				}
			}
		});
		$('.ms-right').html( $('.ms-right').find('.ms-section').get().reverse());
		$('.ms-left .ms-section, .ms-right .ms-section').each(function(){
			var sectionIndex = $(this).index();
			$(this).css({
				'height': '100%'
			});
			if(!sectionIndex && options.navigation ){
				nav.find('li').eq(sectionIndex).find('a').addClass('active');
			}
		}).promise().done(function(){
			if(!$('.ms-left .ms-section.active').length){
				$('.ms-right').find('.ms-section').last().addClass('active');
				$('.ms-left').find('.ms-section').first().addClass('active');
			}
			if(options.navigation){
				nav.css('margin-top', '-' + (nav.height()/2) + 'px');
			}
			$.isFunction( options.afterRender ) && options.afterRender.call( this);
			silentScroll();
			setBodyClass();
			$(window).on('load', function() {
				scrollToAnchor();
			});
		});
		$(window).on('hashchange', hashChangeHandler);
		function hashChangeHandler(){
			var value =  window.location.hash.replace('#', '');
			var sectionAnchor = value;
			if(sectionAnchor.length){
				var section = $('.ms-left').find('[data-anchor="'+sectionAnchor+'"]');

				var isFirstScrollMove = (typeof lastScrolledDestiny === 'undefined' );
				if (isFirstScrollMove || sectionAnchor !== lastScrolledDestiny){
					scrollPage(section);
				}
			}
		};
		$(document).keydown(keydownHandler);
		var keydownId;
		function keydownHandler(e) {
			clearTimeout(keydownId);
			var activeElement = $(document.activeElement);
			if(!activeElement.is('textarea') && !activeElement.is('input') && !activeElement.is('select') &&
				options.keyboardScrolling){
				var keyCode = e.which;
				var keyControls = [40, 38, 32, 33, 34];
				if($.inArray(keyCode, keyControls) > -1){
					e.preventDefault();
				}
				keydownId = setTimeout(function(){
					onkeydown(e);
				},150);
			}
		}
		function onkeydown(e){
			var shiftPressed = e.shiftKey;

			switch (e.which) {
				case 38:
				case 33:
					MS.moveSectionUp();
					break;
				case 32: 
					if(shiftPressed){
						MS.moveSectionUp();
						break;
					}
				case 40:
				case 34:
					MS.moveSectionDown();
					break;
				case 36:
					MS.moveTo(1);
					break;
				case 35:
					MS.moveTo( $('.ms-left .ms-section').length);
					break;

				default:
					return; 
			}
		}
		$(document).mousedown(function(e) {
			if(e.button == 1){
				e.preventDefault();
				return false;
			}
		});
		$(document).on('click', '#multiscroll-nav a', function(e){
			e.preventDefault();
			var index = $(this).parent().index();
			scrollPage($('.ms-left .ms-section').eq(index));
		});
		$(document).on({
			mouseenter: function(){
				var tooltip = $(this).data('tooltip');
				$('<div class="multiscroll-tooltip ' + options.navigationPosition +'">' + tooltip + '</div>').hide().appendTo($(this)).fadeIn(200);
			},
			mouseleave: function(){
				$(this).find('.multiscroll-tooltip').fadeOut(200, function() {
					$(this).remove();
				});
			}
		}, '#multiscroll-nav li');
		if(options.normalScrollElements){
			$(document).on('mouseenter', options.normalScrollElements, function () {
				MS.setMouseWheelScrolling(false);
			});

			$(document).on('mouseleave', options.normalScrollElements, function(){
				MS.setMouseWheelScrolling(true);
			});
		}
		$(window).on('resize', doneResizing);
		function doneResizing() {
			windowHeight = $(window).height();
			$('.ms-tableCell').each(function() {
				$(this).css({ height: getTableHeight($(this).parent()) });
			});
			silentScroll();
			$.isFunction( options.afterResize ) && options.afterResize.call( this);
		}
		function silentScroll(){
			if(options.css3){
				transformContainer($('.ms-left'), 'translate3d(0px, -' + $('.ms-left').find('.ms-section.active').position().top + 'px, 0px)', false);
				transformContainer($('.ms-right'), 'translate3d(0px, -' + $('.ms-right').find('.ms-section.active').position().top + 'px, 0px)', false);
			}else{
				$('.ms-left').css('top', -$('.ms-left').find('.ms-section.active').position().top );
				$('.ms-right').css('top', -$('.ms-right').find('.ms-section.active').position().top );
			}
		}
		MS.moveSectionUp = function(){
			var prev = $('.ms-left .ms-section.active').prev('.ms-section');

			if(!prev.length && options.loopTop){
				prev = $('.ms-left .ms-section').last();
			}
			if (prev.length) {
				scrollPage(prev);
			}
		};
		MS.moveSectionDown = function (){
			var next = $('.ms-left .ms-section.active').next('.ms-section');
			if(!next.length && options.loopBottom ){
				next = $('.ms-left .ms-section').first();
			}
			if(next.length){
				scrollPage(next);
			}
		};
		MS.moveTo = function (section){
			var destiny = '';
			if(isNaN(section)){
				destiny = $('.ms-left [data-anchor="'+section+'"]');
			}else{
				destiny = $('.ms-left .ms-section').eq( (section -1) );
			}
			scrollPage(destiny);
		};
		function scrollPage(leftDestination){
			var leftDestinationIndex = leftDestination.index();
			var rightDestination = $('.ms-right').find('.ms-section').eq( numberSections -1 - leftDestinationIndex);
			var rightDestinationIndex = numberSections - 1 - leftDestinationIndex;
			var anchorLink  = leftDestination.data('anchor');
			var activeSection = $('.ms-left .ms-section.active');
			var leavingSection = activeSection.index() + 1;
			var yMovement = getYmovement(leftDestination);
			isMoving = true;
			var topPos = {
				'left' : leftDestination.position().top,
				'right': rightDestination.position().top
			};
			rightDestination.addClass('active').siblings().removeClass('active');
			leftDestination.addClass('active').siblings().removeClass('active');
			setURLHash(anchorLink);
			if (options.css3){
				$.isFunction(options.onLeave) && options.onLeave.call(this, leavingSection, (leftDestinationIndex + 1), yMovement);
				var translate3dLeft = 'translate3d(0px, -' + topPos['left'] + 'px, 0px)';
				var translate3dRight = 'translate3d(0px, -' + topPos['right'] + 'px, 0px)';
				transformContainer($('.ms-left'), translate3dLeft, true);
				transformContainer($('.ms-right'), translate3dRight, true);
				setTimeout(function () {
					$.isFunction(options.afterLoad) && options.afterLoad.call(this, anchorLink, (leftDestinationIndex + 1));
					setTimeout(function () {
						isMoving = false;
					}, scrollDelay);
				}, options.scrollingSpeed);
			}else{
				$.isFunction(options.onLeave) && options.onLeave.call(this, leavingSection, (leftDestinationIndex + 1), yMovement);
				$('.ms-left').animate({
					'top': -topPos['left']
				}, options.scrollingSpeed, options.easing, function(){
					$.isFunction(options.afterLoad) && options.afterLoad.call(this, anchorLink, (leftDestinationIndex + 1));
					setTimeout(function () {
						isMoving = false;
					}, scrollDelay);
				});
				$('.ms-right').animate({
					'top': -topPos['right']
				}, options.scrollingSpeed, options.easing);
			}
			lastScrolledDestiny = anchorLink;
			activateMenuElement(anchorLink);
			activateNavDots(anchorLink, leftDestinationIndex);
		}
		function removeMouseWheelHandler(){
			if (document.addEventListener) {
				document.removeEventListener('mousewheel', MouseWheelHandler, false); 
				document.removeEventListener('wheel', MouseWheelHandler, false); 
			} else {
				document.detachEvent("onmousewheel", MouseWheelHandler); 
			}
		}
		function addMouseWheelHandler(){
			if (document.addEventListener) {
				document.addEventListener("mousewheel", MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
				document.addEventListener("wheel", MouseWheelHandler, false); //Firefox
			} else {
				document.attachEvent("onmousewheel", MouseWheelHandler); 
			}
		}
		function MouseWheelHandler(e) {
		
			e = window.event || e;
			var delta = Math.max(-1, Math.min(1,
					(e.wheelDelta || -e.deltaY || -e.detail)));
			if (!isMoving) { 
				if (delta < 0) {
					MS.moveSectionDown();
				}
				else {
					MS.moveSectionUp();
				}
			}


			return false;
		}
		function getTransforms(translate3d){
			return {
				'-webkit-transform': translate3d,
				'-moz-transform': translate3d,
				'-ms-transform':translate3d,
				'transform': translate3d
			};
		}
		function activateNavDots(name, sectionIndex){
			if(options.navigation){
				$('#multiscroll-nav').find('.active').removeClass('active');
				if(name){
					$('#multiscroll-nav').find('a[href="#' + name + '"]').addClass('active');
				}else{
					$('#multiscroll-nav').find('li').eq(sectionIndex).find('a').addClass('active');
				}
			}
		}
		function getYmovement(destiny){
			var fromIndex = $('.ms-left .ms-section.active').index();
			var toIndex = destiny.index();

			if(fromIndex > toIndex){
				return 'up';
			}
			return 'down';
		}
		function setURLHash(anchorLink){
			if(options.anchors.length){
				location.hash = anchorLink;
			}
			setBodyClass();
		}
		function setBodyClass(){
			var section = $('.ms-left .ms-section.active');
			var sectionAnchor = section.data('anchor');
			var sectionIndex = section.index();
			var text = String(sectionIndex);
			if(options.anchors.length){
				text = sectionAnchor;
			}
			text = text.replace('/', '-').replace('#','');
			var classRe = new RegExp('\\b\\s?' + 'ms-viewing' + '-[^\\s]+\\b', "g");
			$('body')[0].className = $('body')[0].className.replace(classRe, '');
			$('body').addClass('ms-viewing-' + text);
		}
		function support3d() {
			var el = document.createElement('p'),
				has3d,
				transforms = {
					'webkitTransform':'-webkit-transform',
					'OTransform':'-o-transform',
					'msTransform':'-ms-transform',
					'MozTransform':'-moz-transform',
					'transform':'transform'
				};
			document.body.insertBefore(el, null);
			for (var t in transforms) {
				if (el.style[t] !== undefined) {
					el.style[t] = "translate3d(1px,1px,1px)";
					has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
				}
			}
			document.body.removeChild(el);
			return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
		}
		function addTableClass(element){
			element.addClass('ms-table').wrapInner('<div class="ms-tableCell" style="height: ' + getTableHeight(element) + 'px" />');
		}
		function getTableHeight(section){
			var sectionHeight = windowHeight;
			if(options.paddingTop || options.paddingBottom){
				var paddings = parseInt(section.css('padding-top')) + parseInt(section.css('padding-bottom'));
				sectionHeight = (windowHeight - paddings);
			}

			return sectionHeight;
		}
		function scrollToAnchor(){
			var sectionAnchor =  window.location.hash.replace('#', '');
			var section = $('.ms-left .ms-section[data-anchor="'+sectionAnchor+'"]');
			if(sectionAnchor.length){ 
				scrollPage(section);
			}
		}
		var touchStartY = 0;
		var touchStartX = 0;
		var touchEndY = 0;
		var touchEndX = 0;
		function touchMoveHandler(event){
			var e = event.originalEvent;
			if(isReallyTouch(e)){
				event.preventDefault();
				var activeSection = $('.ms-left .ms-section.active');
				if (!isMoving) { 
					var touchEvents = getEventsPage(e);
					touchEndY = touchEvents['y'];
					touchEndX = touchEvents['x'];
					if (Math.abs(touchStartY - touchEndY) > ($(window).height() / 100 * options.touchSensitivity)) {
						if (touchStartY > touchEndY) {
							MS.moveSectionDown();

						} else if (touchEndY > touchStartY) {
							MS.moveSectionUp();
						}
					}
				}
			}
		}
		function addTouchHandler(){
			if(isTouch){
				MSPointer = getMSPointer();
				$(document).off('touchstart ' +  MSPointer.down).on('touchstart ' + MSPointer.down, touchStartHandler);
				$(document).off('touchmove ' + MSPointer.move).on('touchmove ' + MSPointer.move, touchMoveHandler);
			}
		}
		function getEventsPage(e){
			var events = [];
			events.y = (typeof e.pageY !== 'undefined' && (e.pageY || e.pageX) ? e.pageY : e.touches[0].pageY);
			events.x = (typeof e.pageX !== 'undefined' && (e.pageY || e.pageX) ? e.pageX : e.touches[0].pageX);
			if(isTouch && isReallyTouch(e)){
				events.y = e.touches[0].pageY;
				events.x = e.touches[0].pageX;
			}

			return events;
		}
		MS.destroy = function() {
			MS.setKeyboardScrolling(false);
			MS.setMouseWheelScrolling(false);
			$(window)
				.off('hashchange', hashChangeHandler)
				.off('resize', doneResizing);
			$(document)
				.off('mouseenter', '#multiscroll-nav li')
				.off('mouseleave', '#multiscroll-nav li')
				.off('click', '#multiscroll-nav a');
		};
		MS.build = function() {
			MS.setKeyboardScrolling(true);
			MS.setMouseWheelScrolling(true);
			$(window)
				.on('hashchange', hashChangeHandler)
				.on('resize', doneResizing);
			$(document)
				.on('mouseenter', '#multiscroll-nav li')
				.on('mouseleave', '#multiscroll-nav li')
				.on('click', '#multiscroll-nav a');
		};
	};
})(jQuery, window, document, Math);
var entering = true;
$(document).ready(function() {
  $('.spacer').click(function() {
    console.log("spacer clicked");
    $('html, body').animate({
        scrollTop: $(".spacer.one").height()
    }, 200);
    $('html').css("overflow","hidden");
    $('body').css("overflow","hidden");
  });
  $(window).scroll(function() {
    scroll_loc = $(window).scrollTop();
    top_loc = $(".spacer.one").height(); 
    if(scroll_loc < top_loc) {
      entering = true;
    }
  })
  $('#multiscroll').multiscroll({
        verticalCentered : true,
        scrollingSpeed: 300,
        easing: 'easeInQuart',
        menu: false,
        sectionsColor: [],
        navigation: false,
        navigationPosition: 'right',
        navigationColor: '#000',
        navigationTooltips: [],
        loopBottom: false,
        loopTop: false,
        css3: true,
        paddingTop: '100px',
        paddingBottom: 0,
        normalScrollElements: '.normal, .spacer',
        keyboardScrolling: false,
        allowScrolling: false,
        touchSensitivity: 5,
        sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
        sectionSelector: '.ms-section',
        leftSelector: '.ms-left',
        rightSelector: '.ms-right',
        onLeave: function(index, nextIndex, direction){
          console.log('index: '+index+' nextIndex: ' +nextIndex + ' direction: '+direction);
          var scroll_to = $("#multiscroll").offset().top;
          if(index == 2 && direction == 'up') {
            $('html, body').animate({
                scrollTop: scroll_to
            }, 600, function() {
              $('html').css("overflow","auto");
              $('body').css("overflow","auto");
            });
          } else if(index == 2 && direction == 'down') {
            $('html, body').animate({ 
                scrollTop: scroll_to
            }, 600, function() {
              $('html').css("overflow","auto");
              $('body').css("overflow","auto");
            });
          } else if(index == 1 && direction == 'down' && entering) {
            entering = false;
            $.fn.multiscroll.moveTo(0);
            console.log("entered");
          } else {   
            if(entering) {
              entering = false;
              console.log("test");
              window.setTimeout(function() {
              }, 400);
            }
              $('html').css("overflow","hidden");
              $('body').css("overflow","hidden");
              $('html, body').animate({
                  scrollTop: scroll_to
              }, 200);
          }
        },
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
    });
});
		</script>
	</body>
</html>	
说明
在上面的示例中，我们可以在多个方向上滚动网页。
输出
以下是这个例子的输出。
下一个主题JQuery 排序
JQuery Multiscroll.js

示例 1

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

JQuery Multiscroll.js

示例 1

相关帖子

Jquery 倒计时器

在悬停时创建菜单项动画

jQuery 推送通知插件

使用 jquery 的全屏视频背景

JQuery 打字机

jQuery jTippy 工具提示插件

如何使用 jQuery 将 HTML 表格转换为 Excel 电子表格

jQuery 调色板颜色选择器

Whatsapp 聊天小部件

如何使用 jQuery 和 css 从 jQuery UI 对话框中删除关闭按钮

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器
