图文滚动jQuery跑马灯代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是图文滚动jQuery跑马灯代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图文滚动jQuery跑马灯代码</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/liMarquee.css">
<style type="text/css">
.str_wrap{
	padding-left: 3em;
	padding-right: 3em;
	background: #fefefe;
	height: 3em;
	line-height: 3em;
	font-size: 1.2em;
}
</style>

</head>
<body>
<div class="htmleaf-container">
	<header class="htmleaf-header">
		<h1>支持任何DOM元素的实用jQuery跑马灯插件 <span>A jQuery MARQUEE Plugin</span></h1>
		<div class="htmleaf-demo center">
		  <a href="index.html" class="current">Default</a>
		  <a href="index2.html">垂　直</a>
		  <a href="index3.html">图片和HTML元素</a>
		  <a href="index4.html">从XML中获取数据</a>
		</div>
	</header>
	<div class="htmleaf-content">
		<h3>Default</h3>
		<div class="str1 str_wrap">
			Javascript是一种通用的脚本编程语言，也是一种基于（Object）和事件驱动并具有安全性能的脚本语言。 
		</div>
		<h3>从左到右显示</h3>
		<div class="str2 str_wrap">
			Javascript代码嵌入在HTML页面中，它把静态页面转变为支持用户交互并响应事件的活页面。
		</div>
		<h3>修改速度</h3>
		<div class="str3 str_wrap">
			Javascript最早称作LiveScript，由Netscape Communications 和 Sun Microsystems联合开发。
		</div>
		<section class="htmleaf-demo">
			<a class="speedChange" data-scrollamount="30" href="#">慢速 (30px/sec)</a>
			<a class="speedChange" data-scrollamount="90" href="#">中等速度 (90px/sec)</a>
			<a class="speedChange" data-scrollamount="250" href="#">快速 (250px/sec)</a>
		</section>
		<h3>禁止使用鼠标拖动文本</h3>
		<div class="str4 str_wrap">
			上面的跑马灯文本可以使用鼠标来拖动，这里的被禁止了！
		</div>
		<h3>禁用鼠标滑过时暂停文本动画</h3>
		<div class="str5 str_wrap">
		   这里的跑马灯文字在鼠标滑过或悬停时不会暂停。。。
		</div>
		<h3>暂停和播放功能</h3>
		<div class="str6 str_wrap">
			Javascript和HTML关系密切，它们都由浏览器来处理。
		</div>
		<section  class="htmleaf-demo">
			<button class="btnPause">暂　停</button>
			<button class="btnPlay">播　放</button>
		</section>
	</div>
</div>

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/jquery.liMarquee.js"></script>
<script>
$(window).load(function(){
	$('.str1').liMarquee();
	$('.str2').liMarquee({
		direction: 'right'	
	});
	var stringEl = $('.str3').liMarquee();
	$('.speedChange').on('click',function(){
		var speedChange = $(this);
		var dataSpeed = speedChange.data('scrollamount');

		stringEl.trigger('mouseenter');
		stringEl.data({scrollamount:dataSpeed});
		stringEl.trigger('mouseleave');
		
		return false;	
	});
	$('.str4').liMarquee({
		drag: false	
	});
	$('.str5').liMarquee({	
		hoverstop: false
	});
	$('.str6').liMarquee();
	$('.btnPause').on('click',function(){
		$('.str6').liMarquee('pause');
	});
	$('.btnPlay').on('click',function(){
		$('.str6').liMarquee('play');
	})
	});
</script>
</body>
</html>

HTML代码(index2.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery跑马灯插件</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="css/liMarquee.css">
<style type="text/css">
	.str_wrap{
		padding-left: 3em;
		padding-right: 3em;
		background: #fefefe;
		height: 10em;
		line-height: 2em;
		font-size: 1.2em;
	}
</style>
</head>
<body>
<div class="htmleaf-container">
	<header class="htmleaf-header">
		<h1>支持任何DOM元素的实用jQuery跑马灯插件 <span>A jQuery MARQUEE Plugin</span></h1></h1>
		<div class="htmleaf-demo center">
		  <a href="index.html">Default</a>
		  <a href="index2.html" class="current">垂　直</a>
		  <a href="index3.html">图片和HTML元素</a>
		  <a href="index4.html">从XML中获取数据</a>
		</div>
	</header>
	<div class="htmleaf-content">
		<h3>从下到上滚动</h3>
		<div class="str1 str_wrap" style="height:200px;">
			<p>Javascript是一种通用的脚本编程语言，也是一种基于（Object）和事件驱动并具有安全性能的脚本语言。</p>
			<p>Javascript代码嵌入在HTML页面中，它把静态页面转变为支持用户交互并响应事件的活页面。</p>
			<p>Javascript最早称作LiveScript，由Netscape Communications 和 Sun Microsystems联合开发。</p>
			<p>Javascript和HTML关系密切，它们都由浏览器来处理。</p>
			<p>Javascript</p>
		</div>
		<h3>从上到下滚动</h3>
		<div class="str2 str_wrap" style="height:200px;">
			<p>Javascript是一种通用的脚本编程语言，也是一种基于（Object）和事件驱动并具有安全性能的脚本语言。</p>
			<p>Javascript代码嵌入在HTML页面中，它把静态页面转变为支持用户交互并响应事件的活页面。</p>
			<p>Javascript最早称作LiveScript，由Netscape Communications 和 Sun Microsystems联合开发。</p>
			<p>Javascript和HTML关系密切，它们都由浏览器来处理。</p>
			<p>Javascript</p>
		</div>
	</div>
</div>

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.liMarquee.js"></script>
<script>
$(window).load(function(){
	$('.str1').liMarquee({
		direction: 'up'	
	});
	$('.str2').liMarquee({
		direction: 'down'	
	});
});

</script>
</body>
</html>

JS代码(jquery.liMarquee.js):

/* * jQuery liMarquee v 4.6 * * Copyright 2013,Linnik Yura | LI MASS CODE | http://masscode.ru * http://masscode.ru/index.php/k2/item/44-limarquee * Free to use * * Last Update 20.11.2014 */
(function ($){
	var methods ={
	init:function (options){
	var p ={
	direction:'left',//Указывает направление движения содержимого контейнера (left | right | up | down)loop:-1,//Задает,сколько раз будет прокручиваться содержимое. "-1" для бесконечного воспроизведения движенияscrolldelay:0,//Величина задержки в миллисекундах между движениямиscrollamount:50,//Скорость движения контента (px/sec)circular:true,//Если "true" - строка непрерывнаяdrag:true,//Если "true" - включено перетаскивание строкиrunshort:true,//Если "true" - короткая строка тоже "бегает","false" - стоит на местеhoverstop:true,//true - строка останавливается при наведении курсора мыши,false - строка не останавливаетсяinverthover:false,//false - стандартное поведение. Если "true" - строка начинает движение только при наведении курсораxml:false //Путь к xml файлу с нужным текстом}
;
	if (options){
	$.extend(p,options);
}
return this.each(function (){
	var enterEvent = 'mouseenter';
	var leaveEvent = 'mouseleave';
	if(p.inverthover){
	enterEvent = 'mouseleave';
	leaveEvent = 'mouseenter';
}
varloop = p.loop,strWrap = $(this).addClass('str_wrap').data({
	scrollamount:p.scrollamount}
),fMove = false;
	var strWrapStyle = strWrap.attr('style');
	if(strWrapStyle){
	var wrapStyleArr = strWrapStyle.split(';
	');
	var startHeight = false;
	for(var i=0;
	i < wrapStyleArr.length;
	i++){
	var str = $.trim(wrapStyleArr[i]);
	var tested = str.search(/^height/g);
	if(tested != -1){
	startHeight = parseFloat(strWrap.css('height'));
}
}
}
var code = function (){
	strWrap.off('mouseleave');
	strWrap.off('mouseenter');
	strWrap.off('mousemove');
	strWrap.off('mousedown');
	strWrap.off('mouseup');
	if(!$('.str_move',strWrap).length){
	strWrap.wrapInner($('<div>').addClass('str_move'));
}
varstrMove = $('.str_move',strWrap).addClass('str_origin'),strMoveClone = strMove.clone().removeClass('str_origin').addClass('str_move_clone'),time = 0;
	if (!p.hoverstop){
	strWrap.addClass('noStop');
}
var circCloneHor = function(){
	strMoveClone.clone().css({
	left:'100%',right:'auto',width:strMove.width()}
).appendTo(strMove);
	strMoveClone.css({
	right:'100%',left:'auto',width:strMove.width()}
).appendTo(strMove);
}
var circCloneVert = function(){
	strMoveClone.clone().css({
	top:'100%',bottom:'auto',height:strMove.height()}
).appendTo(strMove);
	strMoveClone.css({
	bottom:'100%',top:'auto',height:strMove.height()}
).appendTo(strMove);
}
if (p.direction == 'left'){
	strWrap.height(strMove.outerHeight())if (strMove.width() > strWrap.width()){
	var leftPos = -strMove.width();
	if (p.circular){
	if (!p.xml){
	circCloneHor()leftPos = -(strMove.width() + (strMove.width() - strWrap.width()));
}
}
if (p.xml){
	strMove.css({
	left:strWrap.width()}
)}
varstrMoveLeft = strWrap.width(),k1 = 0,timeFunc1 = function (){
	varfullS = Math.abs(leftPos),time = (fullS / strWrap.data('scrollamount')) * 1000;
	if (parseFloat(strMove.css('left')) != 0){
	fullS = (fullS + strWrap.width());
	time = (fullS - (strWrap.width() - parseFloat(strMove.css('left')))) / strWrap.data('scrollamount') * 1000;
}
return time;
}
,moveFuncId1 = false,moveFunc1 = function (){
	if (loop != 0){
	strMove.stop(true).animate({
	left:leftPos}
,timeFunc1(),'linear',function (){
	$(this).css({
	left:strWrap.width()}
);
	if (loop == -1){
	moveFuncId1 = setTimeout(moveFunc1,p.scrolldelay);
}
else{
	loop--;
	moveFuncId1 = setTimeout(moveFunc1,p.scrolldelay);
}
}
);
}
}
;
	strWrap.data({
	moveId:moveFuncId1,moveF:moveFunc1}
)if(!p.inverthover){
	moveFunc1();
}
if (p.hoverstop){
	strWrap.on(enterEvent,function (){
	$(this).addClass('str_active');
	clearTimeout(moveFuncId1);
	strMove.stop(true);
}
).on(leaveEvent,function (){
	$(this).removeClass('str_active');
	$(this).off('mousemove');
	moveFunc1();
}
);
	if (p.drag){
	strWrap.on('mousedown',function (e){
	if(p.inverthover){
	strMove.stop(true);
}
//dragvar dragLeft;
	var dir = 1;
	var newX;
	var oldX = e.clientX;
	//dragstrMoveLeft = strMove.position().left;
	k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
	$(this).on('mousemove',function (e){
	fMove = true;
	//dragnewX = e.clientX;
	if(newX > oldX){
	dir = 1}
else{
	dir = -1}
oldX = newXdragLeft = k1 + (e.clientX - strWrap.offset().left);
	if (!p.circular){
	if(dragLeft < -strMove.width() && dir < 0){
	dragLeft = strWrap.width();
	strMoveLeft = strMove.position().left;
	k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
}
if(dragLeft > strWrap.width() && dir > 0){
	dragLeft = -strMove.width();
	strMoveLeft = strMove.position().left;
	k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
}
}
else{
	if(dragLeft < -strMove.width() && dir < 0){
	dragLeft = 0;
	strMoveLeft = strMove.position().left;
	k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
}
if(dragLeft > 0 && dir > 0){
	dragLeft = -strMove.width();
	strMoveLeft = strMove.position().left;
	k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
}
}
strMove.stop(true).css({
	left:dragLeft}
);
	//drag}
).on('mouseup',function (){
	$(this).off('mousemove');
	if(p.inverthover){
	strMove.trigger('mouseenter')}
setTimeout(function (){
	fMove = false}
,50)}
);
	return false;
}
).on('click',function (){
	if (fMove){
	return false}
}
);
}
else{
	strWrap.addClass('no_drag');
}
;
}
}
else{
	if (p.runshort){
	strMove.css({
	left:strWrap.width()}
);
	varstrMoveLeft = strWrap.width(),k1 = 0,timeFunc = function (){
	time = (strMove.width() + strMove.position().left) / strWrap.data('scrollamount') * 1000;
	return time;
}
;
	var moveFunc = function (){
	var leftPos = -strMove.width();
	strMove.animate({
	left:leftPos}
,timeFunc(),'linear',function (){
	$(this).css({
	left:strWrap.width()}
);
	if (loop == -1){
	setTimeout(moveFunc,p.scrolldelay);
}
else{
	loop--;
	setTimeout(moveFunc,p.scrolldelay);
}
}
);
}
;
	strWrap.data({
	moveF:moveFunc}
)if(!p.inverthover){
	moveFunc();
}
if (p.hoverstop){
	strWrap.on(enterEvent,function (){
	$(this).addClass('str_active');
	strMove.stop(true);
}
).on(leaveEvent,function (){
	$(this).removeClass('str_active');
	$(this).off('mousemove');
	moveFunc();
}
);
	if (p.drag){
	strWrap.on('mousedown',function (e){
	if(p.inverthover){
	strMove.stop(true);
}
//dragvar dragLeft;
	var dir = 1;
	var newX;
	var oldX = e.clientX;
	//dragstrMoveLeft = strMove.position().left;
	k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
	$(this).on('mousemove',function (e){
	fMove = true;
	//dragnewX = e.clientX;
	if(newX > oldX){
	dir = 1}
else{
	dir = -1}
oldX = newXdragLeft = k1 + (e.clientX - strWrap.offset().left);
	if(dragLeft < -strMove.width() && dir < 0){
	dragLeft = strWrap.width();
	strMoveLeft = strMove.position().left;
	k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
}
if(dragLeft > strWrap.width() && dir > 0){
	dragLeft = -strMove.width();
	strMoveLeft = strMove.position().left;
	k1 = strMoveLeft - (e.clientX - strWrap.offset().left);
}
strMove.stop(true).css({
	left:dragLeft}
);
}
).on('mouseup',function (){
	if(p.inverthover){
	strMove.trigger('mouseenter')}
$(this).off('mousemove');
	setTimeout(function (){
	fMove = false}
,50)}
);
	return false;
}
).on('click',function (){
	if (fMove){
	return false}
}
);
}
else{
	strWrap.addClass('no_drag');
}
;
}
}
else{
	strWrap.addClass('str_static');
}
}
;
}
;
	if (p.direction == 'right'){
	strWrap.height(strMove.outerHeight())strWrap.addClass('str_right');
	strMove.css({
	left:-strMove.width(),right:'auto'}
)if (strMove.width() > strWrap.width()){
	var leftPos = strWrap.width();
	strMove.css({
	left:0}
)if (p.circular){
	if (!p.xml){
	circCloneHor()//Определяем крайнюю точкуleftPos = strMove.width();
}
}
vark2 = 0;
	timeFunc = function (){
	varfullS = strWrap.width(),//крайняя точкаtime = (fullS / strWrap.data('scrollamount')) * 1000;
	//времяif (parseFloat(strMove.css('left')) != 0){
	fullS = (strMove.width() + strWrap.width());
	time = (fullS - (strMove.width() + parseFloat(strMove.css('left')))) / strWrap.data('scrollamount') * 1000;
}
return time;
}
;
	var moveFunc = function (){
	if (loop != 0){
	strMove.animate({
	left:leftPos}
,timeFunc(),'linear',function (){
	$(this).css({
	left:-strMove.width()}
);
	if (loop == -1){
	setTimeout(moveFunc,p.scrolldelay);
}
else{
	loop--;
	setTimeout(moveFunc,p.scrolldelay);
}
;
}
);
}
;
}
;
	strWrap.data({
	moveF:moveFunc}
)if(!p.inverthover){
	moveFunc();
}
if (p.hoverstop){
	strWrap.on(enterEvent,function (){
	$(this).addClass('str_active');
	strMove.stop(true);
}
).on(leaveEvent,function (){
	$(this).removeClass('str_active');
	$(this).off('mousemove');
	moveFunc();
}
);
	if (p.drag){
	strWrap.on('mousedown',function (e){
	if(p.inverthover){
	strMove.stop(true);
}
//dragvar dragLeft;
	var dir = 1;
	var newX;
	var oldX = e.clientX;
	//dragstrMoveLeft = strMove.position().left;
	k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
	$(this).on('mousemove',function (e){
	fMove = true;
	//dragnewX = e.clientX;
	if(newX > oldX){
	dir = 1}
else{
	dir = -1}
oldX = newXdragLeft = k2 + (e.clientX - strWrap.offset().left);
	if (!p.circular){
	if(dragLeft < -strMove.width() && dir < 0){
	dragLeft = strWrap.width();
	strMoveLeft = strMove.position().left;
	k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
}
if(dragLeft > strWrap.width() && dir > 0){
	dragLeft = -strMove.width();
	strMoveLeft = strMove.position().left;
	k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
}
}
else{
	if(dragLeft < -strMove.width() && dir < 0){
	dragLeft = 0;
	strMoveLeft = strMove.position().left;
	k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
}
if(dragLeft > 0 && dir > 0){
	dragLeft = -strMove.width();
	strMoveLeft = strMove.position().left;
	k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
}
}
strMove.stop(true).css({
	left:dragLeft}
);
}
).on('mouseup',function (){
	if(p.inverthover){
	strMove.trigger('mouseenter')}
$(this).off('mousemove');
	setTimeout(function (){
	fMove = false}
,50)}
);
	return false;
}
).on('click',function (){
	if (fMove){
	return false}
}
);
}
else{
	strWrap.addClass('no_drag');
}
;
}
}
else{
	if (p.runshort){
	var k2 = 0;
	var timeFunc = function (){
	time = (strWrap.width() - strMove.position().left) / strWrap.data('scrollamount') * 1000;
	return time;
}
;
	var moveFunc = function (){
	var leftPos = strWrap.width();
	strMove.animate({
	left:leftPos}
,timeFunc(),'linear',function (){
	$(this).css({
	left:-strMove.width()}
);
	if (loop == -1){
	setTimeout(moveFunc,p.scrolldelay);
}
else{
	loop--;
	setTimeout(moveFunc,p.scrolldelay);
}
;
}
);
}
;
	strWrap.data({
	moveF:moveFunc}
)if(!p.inverthover){
	moveFunc();
}
if (p.hoverstop){
	strWrap.on(enterEvent,function (){
	$(this).addClass('str_active');
	strMove.stop(true);
}
).on(leaveEvent,function (){
	$(this).removeClass('str_active');
	$(this).off('mousemove');
	moveFunc();
}
);
	if (p.drag){
	strWrap.on('mousedown',function (e){
	if(p.inverthover){
	strMove.stop(true);
}
//dragvar dragLeft;
	var dir = 1;
	var newX;
	var oldX = e.clientX;
	//dragstrMoveLeft = strMove.position().left;
	k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
	$(this).on('mousemove',function (e){
	fMove = true;
	//dragnewX = e.clientX;
	if(newX > oldX){
	dir = 1}
else{
	dir = -1}
oldX = newXdragLeft = k2 + (e.clientX - strWrap.offset().left);
	if(dragLeft < -strMove.width() && dir < 0){
	dragLeft = strWrap.width();
	strMoveLeft = strMove.position().left;
	k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
}
if(dragLeft > strWrap.width() && dir > 0){
	dragLeft = -strMove.width();
	strMoveLeft = strMove.position().left;
	k2 = strMoveLeft - (e.clientX - strWrap.offset().left);
}
strMove.stop(true).css({
	left:dragLeft}
);
}
).on('mouseup',function (){
	if(p.inverthover){
	strMove.trigger('mouseenter')}
$(this).off('mousemove');
	setTimeout(function (){
	fMove = false}
,50)}
);
	return false;
}
).on('click',function (){
	if (fMove){
	return false}
}
);
}
else{
	strWrap.addClass('no_drag');
}
;
}
}
else{
	strWrap.addClass('str_static');
}
}
;
}
;
	if (p.direction == 'up'){
	strWrap.addClass('str_vertical');
	if (strMove.height() > strWrap.height()){
	var topPos = -strMove.height();
	if (p.circular){
	if (!p.xml){
	circCloneVert();
	topPos = -(strMove.height() + (strMove.height() - strWrap.height()));
}
}
if (p.xml){
	strMove.css({
	top:strWrap.height()}
)}
vark2 = 0;
	timeFunc = function (){
	varfullS = Math.abs(topPos),time = (fullS / strWrap.data('scrollamount')) * 1000;
	if (parseFloat(strMove.css('top')) != 0){
	fullS = (fullS + strWrap.height());
	time = (fullS - (strWrap.height() - parseFloat(strMove.css('top')))) / strWrap.data('scrollamount') * 1000;
}
return time;
}
;
	var moveFunc = function (){
	if (loop != 0){
	strMove.animate({
	top:topPos}
,timeFunc(),'linear',function (){
	$(this).css({
	top:strWrap.height()}
);
	if (loop == -1){
	setTimeout(moveFunc,p.scrolldelay);
}
else{
	loop--;
	setTimeout(moveFunc,p.scrolldelay);
}
;
}
);
}
;
}
;
	strWrap.data({
	moveF:moveFunc}
)if(!p.inverthover){
	moveFunc();
}
if (p.hoverstop){
	strWrap.on(enterEvent,function (){
	$(this).addClass('str_active');
	strMove.stop(true);
}
).on(leaveEvent,function (){
	$(this).removeClass('str_active');
	$(this).off('mousemove');
	moveFunc();
}
);
	if (p.drag){
	strWrap.on('mousedown',function (e){
	if(p.inverthover){
	strMove.stop(true);
}
//dragvar dragTop;
	var dir = 1;
	var newY;
	var oldY = e.clientY;
	//dragstrMoveTop = strMove.position().top;
	k2 = strMoveTop - (e.clientY - strWrap.offset().top);
	$(this).on('mousemove',function (e){
	fMove = true;
	//dragnewY = e.clientY;
	if(newY > oldY){
	dir = 1}
else{
	if(newY < oldY){
	dir = -1}
}
oldY = newYdragTop = k2 + e.clientY - strWrap.offset().top;
	if (!p.circular){
	if(dragTop < -strMove.height() && dir < 0){
	dragTop = strWrap.height();
	strMoveTop = strMove.position().top;
	k2 = strMoveTop - (e.clientY - strWrap.offset().top);
}
if(dragTop > strWrap.height() && dir > 0){
	dragTop = -strMove.height();
	strMoveTop = strMove.position().top;
	k2 = strMoveTop - (e.clientY - strWrap.offset().top);
}
}
else{
	if(dragTop < -strMove.height() && dir < 0){
	dragTop = 0;
	strMoveTop = strMove.position().top;
	k2 = strMoveTop - (e.clientY - strWrap.offset().top);
}
if(dragTop > 0 && dir > 0){
	dragTop = -strMove.height();
	strMoveTop = strMove.position().top;
	k2 = strMoveTop - (e.clientY - strWrap.offset().top);
}
}
strMove.stop(true).css({
	top:dragTop}
);
	//drag}
).on('mouseup',function (){
	if(p.inverthover){
	strMove.trigger('mouseenter')}
$(this).off('mousemove');
	setTimeout(function (){
	fMove = false}
,50)}
);
	return false;
}
).on('click',function (){
	if (fMove){
	return false}
}
);
}
else{
	strWrap.addClass('no_drag');
}
;
}
}
else{
	if (p.runshort){
	strMove.css({
	top:strWrap.height()}
);
	var k2 = 0;
	var timeFunc = function (){
	time = (strMove.height() + strMove.position().top) / strWrap.data('scrollamount') * 1000;
	return time;
}
;
	var moveFunc = function (){
	var topPos = -strMove.height();
	strMove.animate({
	top:topPos}
,timeFunc(),'linear',function (){
	$(this).css({
	top:strWrap.height()}
);
	if (loop == -1){
	setTimeout(moveFunc,p.scrolldelay);
}
else{
	loop--;
	setTimeout(moveFunc,p.scrolldelay);
}
;
}
);
}
;
	strWrap.data({
	moveF:moveFunc}
)if(!p.inverthover){
	moveFunc();
}
if (p.hoverstop){
	strWrap.on(enterEvent,function (){
	$(this).addClass('str_active');
	strMove.stop(true);
}
).on(leaveEvent,function (){
	$(this).removeClass('str_active');
	$(this).off('mousemove');
	moveFunc();
}
);
	if (p.drag){
	strWrap.on('mousedown',function (e){
	if(p.inverthover){
	strMove.stop(true);
}
//dragvar dragTop;
	var dir = 1;
	var newY;
	var oldY = e.clientY;
	//dragstrMoveTop = strMove.position().top;
	k2 = strMoveTop - (e.clientY - strWrap.offset().top);
	$(this).on('mousemove',function (e){
	fMove = true;
	//dragnewY = e.clientY;
	if(newY > oldY){
	dir = 1}
else{
	if(newY < oldY){
	dir = -1}
}
oldY = newYdragTop = k2 + e.clientY - strWrap.offset().top;
	if(dragTop < -strMove.height() && dir < 0){
	dragTop = strWrap.height();
	strMoveTop = strMove.position().top;
	k2 = strMoveTop - (e.clientY - strWrap.offset().top);
}
if(dragTop > strWrap.height() && dir > 0){
	dragTop = -strMove.height();
	strMoveTop = strMove.position().top;
	k2 = strMoveTop - (e.clientY - strWrap.offset().top);
}
//*dragstrMove.stop(true).css({
	top:dragTop}
);
}
).on('mouseup',function (){
	if(p.inverthover){
	strMove.trigger('mouseenter')}
$(this).off('mousemove');
	setTimeout(function (){
	fMove = false}
,50)}
);
	return false;
}
).on('click',function (){
	if (fMove){
	return false}
}
);
}
else{
	strWrap.addClass('no_drag');
}
;
}
}
else{
	strWrap.addClass('str_static');
}
}
;
}
;
	if (p.direction == 'down'){
	strWrap.addClass('str_vertical').addClass('str_down');
	strMove.css({
	top:-strMove.height(),bottom:'auto'}
)if (strMove.height() > strWrap.height()){
	var topPos = strWrap.height();
	if (p.circular){
	if (!p.xml){
	circCloneVert();
	topPos = strMove.height();
}
}
if (p.xml){
	strMove.css({
	top:-strMove.height()}
)}
vark2 = 0;
	timeFunc = function (){
	varfullS = strWrap.height(),//крайняя точкаtime = (fullS / strWrap.data('scrollamount')) * 1000;
	//времяif (parseFloat(strMove.css('top')) != 0){
	fullS = (strMove.height() + strWrap.height());
	time = (fullS - (strMove.height() + parseFloat(strMove.css('top')))) / strWrap.data('scrollamount') * 1000;
}
return time;
}
;
	var moveFunc = function (){
	if (loop != 0){
	strMove.animate({
	top:topPos}
,timeFunc(),'linear',function (){
	$(this).css({
	top:-strMove.height()}
);
	if (loop == -1){
	setTimeout(moveFunc,p.scrolldelay);
}
else{
	loop--;
	setTimeout(moveFunc,p.scrolldelay);
}
;
}
);
}
;
}
;
	strWrap.data({
	moveF:moveFunc}
)if(!p.inverthover){
	moveFunc();
}
if (p.hoverstop){
	strWrap.on(enterEvent,function (){
	$(this).addClass('str_active');
	strMove.stop(true);
}
).on(leaveEvent,function (){
	$(this).removeClass('str_active');
	$(this).off('mousemove');
	moveFunc();
}
);
	if (p.drag){
	strWrap.on('mousedown',function (e){
	if(p.inverthover){
	strMove.stop(true);
}
//dragvar dragTop;
	var dir = 1;
	var newY;
	var oldY = e.clientY;
	//dragstrMoveTop = strMove.position().top;
	k2 = strMoveTop - (e.clientY - strWrap.offset().top);
	$(this).on('mousemove',function (e){
	fMove = true;
	//dragnewY = e.clientY;
	if(newY > oldY){
	dir = 1}
else{
	if(newY < oldY){
	dir = -1}
}
oldY = newYdragTop = k2 + e.clientY - strWrap.offset().top;
	if (!p.circular){
	if(dragTop < -strMove.height() && dir < 0){
	dragTop = strWrap.height();
	strMoveTop = strMove.position().top;
	k2 = strMoveTop - (e.clientY - strWrap.offset().top);
}
if(dragTop > strWrap.height() && dir > 0){
	dragTop = -strMove.height();
	strMoveTop = strMove.position().top;
	k2 = strMoveTop - (e.clientY - strWrap.offset().top);
}
}
else{
	if(dragTop < -strMove.height() && dir < 0){
	dragTop = 0;
	strMoveTop = strMove.position().top;
	k2 = strMoveTop - (e.clientY - strWrap.offset().top);
}
if(dragTop > 0 && dir > 0){
	dragTop = -strMove.height();
	strMoveTop = strMove.position().top;
	k2 = strMoveTop - (e.clientY - strWrap.offset().top);
}
}
strMove.stop(true).css({
	top:dragTop}
);
	//drag}
).on('mouseup',function (){
	if(p.inverthover){
	strMove.trigger('mouseenter')}
$(this).off('mousemove');
	setTimeout(function (){
	fMove = false}
,50)}
);
	return false;
}
).on('click',function (){
	if (fMove){
	return false}
}
);
}
else{
	strWrap.addClass('no_drag');
}
;
}
}
else{
	if (p.runshort){
	var k2 = 0;
	var timeFunc = function (){
	time = (strWrap.height() - strMove.position().top) / strWrap.data('scrollamount') * 1000;
	return time;
}
;
	var moveFunc = function (){
	var topPos = strWrap.height();
	strMove.animate({
	top:topPos}
,timeFunc(),'linear',function (){
	$(this).css({
	top:-strMove.height()}
);
	if (loop == -1){
	setTimeout(moveFunc,p.scrolldelay);
}
else{
	loop--;
	setTimeout(moveFunc,p.scrolldelay);
}
;
}
);
}
;
	strWrap.data({
	moveF:moveFunc}
)if(!p.inverthover){
	moveFunc();
}
if (p.hoverstop){
	strWrap.on(enterEvent,function (){
	$(this).addClass('str_active');
	strMove.stop(true);
}
).on(leaveEvent,function (){
	$(this).removeClass('str_active');
	$(this).off('mousemove');
	moveFunc();
}
);
	if (p.drag){
	strWrap.on('mousedown',function (e){
	if(p.inverthover){
	strMove.stop(true);
}
//dragvar dragTop;
	var dir = 1;
	var newY;
	var oldY = e.clientY;
	//dragstrMoveTop = strMove.position().top;
	k2 = strMoveTop - (e.clientY - strWrap.offset().top);
	$(this).on('mousemove',function (e){
	fMove = true;
	//dragnewY = e.clientY;
	if(newY > oldY){
	dir = 1}
else{
	if(newY < oldY){
	dir = -1}
}
oldY = newYdragTop = k2 + e.clientY - strWrap.offset().top;
	if(dragTop < -strMove.height() && dir < 0){
	dragTop = strWrap.height();
	strMoveTop = strMove.position().top;
	k2 = strMoveTop - (e.clientY - strWrap.offset().top);
}
if(dragTop > strWrap.height() && dir > 0){
	dragTop = -strMove.height();
	strMoveTop = strMove.position().top;
	k2 = strMoveTop - (e.clientY - strWrap.offset().top);
}
//*dragstrMove.stop(true).css({
	top:dragTop}
);
}
).on('mouseup',function (){
	if(p.inverthover){
	strMove.trigger('mouseenter')}
$(this).off('mousemove');
	setTimeout(function (){
	fMove = false}
,50)}
)return false;
}
).on('click',function (){
	if (fMove){
	return false}
}
);
}
else{
	strWrap.addClass('no_drag');
}
;
}
}
else{
	strWrap.addClass('str_static');
}
}
;
}
;
}
if (p.xml){
	$.ajax({
	url:p.xml,dataType:"xml",success:function (xml){
	var xmlTextEl = $(xml).find('text');
	var xmlTextLength = xmlTextEl.length;
	for(var i = 0;
	i < xmlTextLength;
	i++){
	var xmlElActive = xmlTextEl.eq(i);
	var xmlElContent = xmlElActive.text();
	var xmlItemEl = $('<span>').text(xmlElContent).appendTo(strWrap);
	if(p.direction == 'left' || p.direction == 'right'){
	xmlItemEl.css({
	display:'inline-block',textAlign:'right'}
);
	if(i > 0){
	xmlItemEl.css({
	width:strWrap.width()+xmlItemEl.width()}
);
}
}
if(p.direction == 'down' || p.direction == 'up'){
	xmlItemEl.css({
	display:'block',textAlign:'left'}
);
	if(i > 0){
	xmlItemEl.css({
	paddingTop:strWrap.height()}
);
}
}
}
code();
}
}
);
}
else{
	code();
}
strWrap.data({
	ini:code,startheight:startHeight}
)}
);
}
,update:function (){
	var el = $(this);
	var str_origin = $('.str_origin',el);
	var str_move_clone = $('.str_move_clone',el);
	str_origin.stop(true);
	str_move_clone.remove();
	el.data('ini')();
}
,destroy:function (){
	var el = $(this);
	var elMove = $('.str_move',el);
	var startHeight = el.data('startheight');
	$('.str_move_clone',el).remove();
	el.off('mouseenter');
	el.off('mousedown');
	el.off('mouseup');
	el.off('mouseleave');
	el.off('mousemove');
	el.removeClass('noStop').removeClass('str_vertical').removeClass('str_active').removeClass('no_drag').removeClass('str_static').removeClass('str_right').removeClass('str_down');
	var elStyle = el.attr('style');
	if(elStyle){
	var styleArr = elStyle.split(';
	');
	for(var i=0;
	i < styleArr.length;
	i++){
	var str = $.trim(styleArr[i]);
	var tested = str.search(/^height/g);
	if(tested != -1){
	styleArr[i] = '';
}
}
var newArr = styleArr.join(';
	');
	var newStyle = newArr.replace(/;
	+/g,';
	')if(newStyle == ';
	'){
	el.removeAttr('style');
}
else{
	el.attr('style',newStyle);
}
if(startHeight){
	el.css({
	height:startHeight}
)}
}
elMove.stop(true);
	if(elMove.length){
	var context = elMove.html();
	elMove.remove();
	el.html(context);
}
}
,pause:function(){
	var el = $(this);
	var elMove = $('.str_move',el);
	elMove.stop(true);
}
,play:function(){
	var el = $(this);
	$(this).off('mousemove');
	el.data('moveF')();
}
}
;
	$.fn.liMarquee = function (method){
	if (methods[method]){
	return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
}
else if (typeof method === 'object' || !method){
	return methods.init.apply(this,arguments);
}
else{
	$.error('Метод ' + method + ' в jQuery.liMarquee не существует');
}
}
;
}
)(jQuery);

CSS代码(default.css):

@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#f9f7f6;color:#404d5b;font-weight:500;font-size:1.05em;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.htmleaf-container{margin:0 auto;text-align:center;overflow:hidden;}
.htmleaf-content{padding:1em 3em;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
/* Header */
.htmleaf-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;}
.htmleaf-header h1{font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.htmleaf-header h1 span{font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.htmleaf-demo a{color:#1d7db1;text-decoration:none;}
.htmleaf-demo{width:100%;padding-bottom:1.2em;}
.htmleaf-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #1d7db1;font-weight:700;}
.htmleaf-demo a:hover{opacity:0.6;}
.htmleaf-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.htmleaf-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.htmleaf-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;}
.htmleaf-icon span{display:none;}
.htmleaf-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.htmleaf-footer{width:100%;padding-top:10px;}
.htmleaf-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{position:absolute;top:100%;left:0;width:100%;color:#fff;background:#333;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-htmleaf-home-outline:before{content:"\e5000";}
.icon-htmleaf-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:50em){.htmleaf-header{padding:3em 10% 4em;}
.htmleaf-header h1{font-size:2em;}
}
@media screen and (max-width:40em){.htmleaf-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.htmleaf-header h1{font-size:1.2em;}
}

CSS代码(liMarquee.css):

/*Plugin CSS*/
.str_wrap{overflow:hidden;//zoom:1;width:100%;font-size:12px;line-height:16px;position:relative;-moz-user-select:none;-khtml-user-select:none;user-select:none;background:#f6f6f6;white-space:nowrap;}
.str_wrap.str_active{background:#f1f1f1;}
.str_move{white-space:nowrap;position:absolute;top:0;left:0;cursor:move;}
.str_move_clone{display:inline-block;//display:inline;//zoom:1;vertical-align:top;position:absolute;left:100%;top:0;}
.str_vertical .str_move_clone{left:0;top:100%;}
.str_down .str_move_clone{left:0;bottom:100%;}
.str_vertical .str_move,.str_down .str_move{white-space:normal;width:100%;}
.str_static .str_move,.no_drag .str_move,.noStop .str_move{cursor:inherit;}
.str_wrap img{max-width:none !important;}

CSS代码(normalize.css):

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}

附件:下载该文件资源,减少时间成本(增值服务)