Run String

by Roman

HTML

<h3>Настройки по умолчанию</h3>
        <div class="str1 str_wrap">
            <p>text content and text content and text content and text content and text content and text content and text content and text content and text content and text content &nbsp;</p>
        </div>
<h3>Движение слева на право</h3>
        <div class="str9 str_wrap">
        	<p>добрый день! подскажите, а как сделать смену картинок слева-направо? Или я туплю?</p>
        </div>
<h3>Короткая строка (движение включено)</h3>
        <div class="str1 str_wrap">
        	<p>short text &nbsp;</p>
        </div>
    
        <h3>Отключена возможность draggable (перетаскивания)</h3>
        <div class="str2 str_wrap">
            <p>text content and text content and text content and text content and text content and text content and text content and text content and text content and text content</p>
        </div>

    
        <h3>Плагин liMarquee позволяет перемещать (скролировать) любые элементы веб-страницы</h3>
        <style>
            .str3 .str_item {
                font-size:0;
                line-height:0
            }
            .str3 img { opacity:0.8}
            .str3 img:hover { opacity:1}
            .str3.str_wrap.str_active {
                background:#fff;
            }
        </style>
        <div class="str3 str_wrap">
            <a href="#">
                <img src="http://masscode.ru/media/k2/items/cache/1c0ae2205709722b62e843abc0471a55_S.jpg">
            </a>
            <a href="#"><img src="http://masscode.ru/media/k2/items/cache/01f1a05053c6242fcfa23075e5b963c1_S.jpg"></a>
            <a href="#"><img src="http://masscode.ru/media/k2/items/cache/6f43b5263fbba79c5962514b85d34738_S.jpg"></a>
            <a href="#"><img src="http://masscode.ru/media/k2/items/cache/8b6e33345ac8d5ffd9cf0d107a7d9e9d_S.jpg"></a>
            <a href="#"><img src="http://masscode.ru/media/k2/items/cache/9b2c4b44fb86522964124ed80d03c5e8_S.jpg"></a>
            <a href="#"><img...

CSS

/*Layouut css*/
body {
	color: #999;
	font: 13px/1.2em Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0 10px;
}
pre {text-align:left} 
.str1,
.str2,
.str3,
.str3-2,
.str4,
.str5,
.str6,
.str9{ margin:0 0 30px 0;}
.str4,
.str5,
.str6,
.str8 {
	 width:49% !important;
	 display:inline-block;
	 //display:inline;
	 //zoom:1;
	 vertical-align:top;
}
.str_wrap p {
	padding:10px 0;
	margin:0;
}
.str_vertical p {
	padding:10px;
}
h3,
p { text-align:left;}
h3 { font-weight:700; color:#000}
/*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;
}

JavaScript

/*
 * 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';	
				}
				
								
				var
					loop = 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 ()...