Vertical scroll with Javascript
Often there are blocks of advertising, where the text scrolls vertically. In order to make such a block, you can use several technologies: Flash, Silverlight, Javascript. To solve my problem, I used Javascript. Of the benefits, you can highlight the fact that there is no need to put additional plugins.
JQuery was chosen as an auxiliary framework. This will help solve the problem of cross-browser compatibility.
It is necessary to show text messages (links, pictures) in a block of a certain width. Messages should be displayed in turn. The display cycle is not limited by time intervals.
As solutions I considered the following:
When using the first option, the following shortcomings were noticed: somewhere after the fifth iteration, the block began to “float”, that is, there was a need for correction; the data that has already been shown remain in the block, although they are no longer needed there. As a result, after a short period of time, the browser starts to slow down.
Option number two is already better. There is no senseless data storage, but the block is still floating.
Option number three and became the solution of the problem.
')
Javascript code:
Connection and initialization:
The result of the work can be found here.
Download the source code at this link.
I hope this decision will be useful.
JQuery was chosen as an auxiliary framework. This will help solve the problem of cross-browser compatibility.
Task
It is necessary to show text messages (links, pictures) in a block of a certain width. Messages should be displayed in turn. The display cycle is not limited by time intervals.
Possible solutions
As solutions I considered the following:
- At each step, add to the end of the block text that has already been displayed. Thus, the list will increase, but never end.
- Display a list of messages in turn and at the moment of displaying the last message, scroll through it first. It will be such a looped list.
- In the block, to display messages, store only the current message and the following. At each step, update the list.
Advantages and disadvantages of the proposed options
When using the first option, the following shortcomings were noticed: somewhere after the fifth iteration, the block began to “float”, that is, there was a need for correction; the data that has already been shown remain in the block, although they are no longer needed there. As a result, after a short period of time, the browser starts to slow down.
Option number two is already better. There is no senseless data storage, but the block is still floating.
Option number three and became the solution of the problem.
')
Implementation
Javascript code:
var scrollerstep = 1 ;
var lefttime = 0 ;
var scroll_interval = 5000 ;
var scroll_speed = 50 ;
var part = 1 ;
var step = 50 ;
var delta = 0 ;
var delta_d = 1 ;
var correct = 0 ;
var step_l = 0 ;
var scrol__data = new Array ();
var scroll_text_id = 'scroll_text' ;
var scroll_text_class = 'scroll_data' ;
function scroll_add(str) {
scrol__data[scrol__data.length] = str;
}
function set_Interval(interval){
scroll_interval = interval;
}
function set_Speed(speed){
scroll_speed = speed;
}
function runScroll() {
if (part > scrol__data.length - 1 ) {
$( '#' + scroll_text_id).css( 'top' , '0px' );
$( '#' + scroll_text_id).attr( 'innerHTML' , '' );
$( '#' + scroll_text_id).append( '<p class="' + scroll_text_class + '">' + scrol__data[scrol__data.length - 1 ] + '</p>' );
part = 0 ;
}
if (part != 0 ) {
$( '#' + scroll_text_id).css( 'top' , '0px' );
$( '#' + scroll_text_id).attr( 'innerHTML' , '' );
$( '#' + scroll_text_id).append( '<p class="' + scroll_text_class + '">' + scrol__data[part - 1 ] + '</p>' );
}
var c_data = '<p class="' + scroll_text_class + '">' + scrol__data[part] + '</p>' ;
part = part + 1 ;
step_l = 0 ;
$( '#' + scroll_text_id).append(c_data);
lefttime = setInterval( "scrollText()" , scroll_speed);
}
function scrollText() {
currstop = parseInt ( - 1 * (step) - delta);
if ( parseInt (step_l) >= currstop) {
nextval = parseInt ($( '#' + scroll_text_id).css( 'top' )) - scrollerstep + 'px' ;
step_l = step_l - scrollerstep;
$( '#' + scroll_text_id).css( 'top' , nextval);
} else {
window .clearInterval(lefttime);
}
}
function scroll_run(){
$( '#' + scroll_text_id).append( '<p class="' + scroll_text_class + '">' + scrol__data[ 0 ] + '</p>' );
setInterval( "runScroll()" , scroll_interval);
}
Connection and initialization:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" >
<title> Vertical scroll </title>
<script type= "text/javascript" src= "jquery.js" ></script>
<script type= "text/javascript" src= "scroll.js" ></script>
<style type= "text/css" >
.scroll_data {
display : block ;
height :50px ;
margin :0px ;
padding :0px ;
vertical-align : middle ;
}
.scroll_block {
position : relative ;
top :50px ;
border :1px solid #DDDDDD ;
width :400px ;
height :50px ;
overflow : hidden ;
}
.scroll_text {
position : absolute ;
right :0px ;
top :0px ;
width :100% ;
}
</style>
</head>
<body>
<script type= "text/javascript" >
$( document ).ready( function () {
set_Interval( 3000 );
set_Speed( 30 );
scroll_add( 'string1' );
scroll_add( 'string2' );
scroll_add( 'string3' );
scroll_add( 'string4' );
scroll_add( 'string5' );
scroll_add( 'string6' );
scroll_run();
});
</script>
<div class= "scroll_block" >
<div id= "scroll_text" class= "scroll_text" >
</div></div>
</body>
</html>
Result
The result of the work can be found here.
Download the source code at this link.
I hope this decision will be useful.
Source: https://habr.com/ru/post/101304/
All Articles