Итак, вот что я пытаюсь сделать.
- Автономная html-страница с небольшим количеством jquery.
- Код jquery имеет форму (с элементами для захвата Marquee)текст, скорость, цвет, повтор и т. д.)
- С учетом всех описанных выше элементов формы мне нужно создать текстовую область прокрутки.
Что я не могу изобразитьout:
- Как можно обновлять элемент HTMl (div class = "scroller") всякий раз, когда изменяется любое из значений поля формы?
Ниже приведеночто у меня до сих пор:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Simple jQuery scrolling function by Max Vergelli</title>
<style type="text/css">
div.scroller, #fast_scroller{
position:relative;
height:24px;
width:500px;
display:block;
overflow:hidden;
border:#CCCCCC 1px solid;
}
div.scrollingtext{
position:absolute;
white-space:nowrap;
font-family:'Trebuchet MS',Arial;
font-size:18px;
font-weight:bold;
color:#000000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/>
<script src="http://jquerymobile.com/test/js/jquery.js"></script>
<script src="http://jquerymobile.com/test/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/test/js/jquery.mobile.docs.js"></script>
<script src="http://www.vegabit.com/jquery_scroller/jquery.Scroller-1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//this is the useful function to scroll a text inside an element...
function startScrolling(scroller_obj, velocity, start_from){
//bind animation to the children inside the scroller element
scroller_obj.children().bind('marquee', function(event,c) {
//text to scroll
var ob = $(this);
//scroller width
var sw = parseInt(ob.parent().width());
//text width
var tw = parseInt(ob.width());
//text left position relative to the offset parent
var tl = parseInt(ob.position().left);
//velocity converted to calculate duration
var v = velocity>0 && velocity<100 ? (100-velocity)*100 : 5000;
//same velocity for different text's length in relation with duration
var dr = (v*tw/sw)+v;
//is it scrolling from right or left?
switch(start_from){
case 'right':
//is it the first time?
if(typeof c == 'undefined'){
//if yes, start from the absolute right
ob.css({ left: sw });
sw = -tw;
}else{
//else calculate destination position
sw = tl - (tw + sw);
};
break;
default:
if(typeof c == 'undefined'){
//start from the absolute left
ob.css({ left: -tw });
}else{
//else calculate destination position
sw += tl + tw;
};
}
//attach animation to scroller element and start it by a trigger
ob.animate( {left:sw},
{ duration:dr,
easing:'linear',
complete:function(){ob.trigger('marquee');},
step:function(){
//check if scroller limits are reached
if(start_from == 'right'){
if(parseInt(ob.position().left) < -parseInt(ob.width())){
//we need to stop and restart animation
ob.stop();
ob.trigger('marquee');
};
}else{
if(parseInt(ob.position().left) > parseInt(ob.parent().width())){
ob.stop();
ob.trigger('marquee');
};
};
}
});
}).trigger('marquee');
//pause scrolling animation on mouse over
scroller_obj.mouseover(function(){
$(this).children().stop();
});
//resume scrolling animation on mouse out
scroller_obj.mouseout(function(){
$(this).children().trigger('marquee',['resume']);
});
};
//the main app starts here...
//change the cursor type for each scroller
$('.scroller').css("cursor","pointer");
//settings to pass to function
var scroller = $('.scroller'); // element(s) to scroll
var scrolling_velocity = 40; // 1-99
var scrolling_from = 'right'; // 'right' or 'left'
//call the function and start to scroll..
startScrolling( scroller, scrolling_velocity, scrolling_from );
//create a new scroller but it starts from left...
$('#fast_scroller').css("cursor","pointer");
startScrolling( $('#fast_scroller'), 75, 'left');
});
</script>
</head>
<body>
<br />
<br />
<div data-role="header" data-theme="f">
<h1>Banner Free*</h1>
</div><!-- /header -->
<div data-role="content">
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="It was nice to meet you :) !!"</input>
</div>
<div data-role="fieldcontain">
<label for="slider2">Repeat:</label>
<select name="slider2" id="slider2" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</div>
<div data-role="fieldcontain">
<label for="slider">Text Speed:</label>
<input type="range" name="slider" id="slider" value="50" min="0" max="100" data-highlight="true" />
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Font styling:</legend>
<input type="checkbox" name="checkbox-6" id="checkbox-6" class="custom" />
<label for="checkbox-6">b</label>
<input type="checkbox" name="checkbox-7" id="checkbox-7" class="custom" />
<label for="checkbox-7"><em>i</em></label>
<input type="checkbox" name="checkbox-8" id="checkbox-8" class="custom" />
<label for="checkbox-8">u</label>
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Color:</legend>
<input type="radio" name="radio-choice-b" id="radio-choice-c" value="on" checked="checked" />
<label for="radio-choice-c">Color1</label>
<input type="radio" name="radio-choice-b" id="radio-choice-d" value="off" />
<label for="radio-choice-d">Color2</label>
<input type="radio" name="radio-choice-b" id="radio-choice-e" value="other" />
<label for="radio-choice-e">Color3</label>
</fieldset>
</div>
<div class="ui-body ui-body-b">
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="d">Cancel</button></div>
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</fieldset>
</div>
</form>
</div><!-- /content -->
<div class="scroller">
<div class="scrollingtext">
this is a simple scrolling text!
</div>
</div>
<div id="fast_scroller">
<div class="scrollingtext">
this is faster!
</div>
</div>
</body>
</html>