上下左右滾動插件

<div class="container">
	<div class="row">
		<div class="col-md-4 tb">
			<ul class="box list-unstyled">
				<li>
					<a href="#">新聞</a>
				</li>
				<li>
					<a href="#">體育</a>
				</li>
				<li>
					<a href="#">歌曲</a>
				</li>
				<li>
					<a href="#">文藝</a>
				</li>
			</ul>
		</div>
		<div class="col-md-8 lr">
			<ul class="box1 list-unstyled list-inline">
				<li>
					<a href="#">新聞</a>
				</li>
				<li>
					<a href="#">體育</a>
				</li>
				<li>
					<a href="#">歌曲</a>
				</li>
				<li>
					<a href="#">文藝</a>
				</li>
			</ul>
		</div>
	</div>
</div>
<style>
.tb {
	height: 30px;
	overflow: hidden;
}

.tb ul li {
	height: 30px;
	line-height: 30px;
	background: #999;
	text-align: center;
	font-size: 14px;
}

.lr {
	padding: 0;
}

.lr ul li {
	padding: 0;
	font-size: 14px;
	line-height: 30px;
	background: #999;
	text-align: center;
}
</style>
<script>
	;
	(function($, window, docuemnt, undefined) {
		$.fn.autoScroll = function(config) {
			/*config*/
			config = $.extend({}, $.fn.autoScroll.defaults, config);
			/*this*/
			var $ele = this;
			$ele.css({
				"font-size" : "0"
			}).parent().css({
				"overflow" : "hidden"
			});
			if (config.direction == 2) {
				$ele.width($ele.parent().width() * $ele.children().size());
				$ele.children().width($ele.parent().width());
			}
			/*function*/
			function run() {
				$ele.children().eq(0).click(
						function() {
							console.info(this);
							var m_d = "";
							var m_d_d = 0;
							switch (config.direction) {
							case 1:
								m_d = "marginTop";
								m_d_d = $(this).height();
								break;
							case 2:
								m_d = "marginLeft";
								m_d_d = $(this).width();
								break;
							default:
								m_d = "marginTop";
								m_d_d = $(this).height();
								break;
							}

							var animateConfig = $.parseJSON('{\"' + m_d
									+ '\":\"-' + m_d_d + 'px\"}');
							var cssConfig = $.parseJSON('{\"' + m_d + '\":0}');

							$(this).stop().animate(animateConfig, config.speed,
									function() {
										var appendEle = $(this).css(cssConfig);
										$(this).remove();
										$ele.append(appendEle);

									});

						}).click();
			}
			/*自動運行*/
			var autoRun = setInterval(run, config.delay);
			/*hover*/
			$ele.hover(function() {
				clearInterval(autoRun);
			}, function() {
				autoRun = setInterval(run, config.delay);
			});

		};
		$.fn.autoScroll.defaults = {
			"delay" : 5000,
			"speed" : 800,
			"direction" : 1//1向上,2向左
		};
	})(jQuery, window, document);

	$(function() {
		$(".box").autoScroll();
		$(".box1").autoScroll({
			"direction" : 2
		});

	});
</script>
相關文章
相關標籤/搜索