SAG Content Scroller v1.3 - Przewijane wiadomości w oknach

Skrypt umożliwia wydzielenie na stronie odzielnych okienek, z przewijaną treścią. Przewijanie treści lub innej zawartości jak np. zdjęcia może odbywać się automatycznie lub może być sterowane przez użytkownika poprzez panel nawigacyjny umieszczony na dole okna.

Tutaj tylko okrojone tłumaczenie skryptu natomiast pełny opis i wygląd na stronie Autora TUTAJ

Oto zawartość sekcji HEAD:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="/sagscroller.css" />

<script src="/sagscroller.js">

/***********************************************
* SAG Content Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<style type="text/css">

/* #SAG scroller demo #1 */

div#mysagscroller{
width: 200px; /*width of scroller*/
height:250px;
}

div#mysagscroller ul li{
background:navy;
color:white;
padding:5px;
margin-bottom:5px; /*bottom spacing between each LI*/
}

div#mysagscroller ul li:first-letter{
font-size:28px;
background:white;
color:black;
padding:0 2px;
margin-right:2px;
}

/* #SAG scroller demo #2 */

div#mysagscroller2{
width: 250px; /*width of scroller*/
height:300px;
border:7px solid #C0C0C0;
}

div#mysagscroller2 ul li img{
border-width:0;
display:block; /*this causes each image to be flush against each other*/
}

</style>

<script>

//SAG scroller demo #1:

var sagscroller1=new sagscroller({
id:'mysagscroller',
mode: 'manual' //<--no comma following last option
})

//SAG scroller demo #2:

var sagscroller2=new sagscroller({
id:'mysagscroller2',
mode: 'auto',
pause: 2500,
animatespeed: 400 //<--no comma following last option
})

</script>

Pliki do umieszczenia w folderze strony:

sagscroller.js
sagscroller.css

Zawartość BODY:

<div id="mysagscroller" class="sagscroller">
<ul>
<li>Ajax is a group of interrelated web development techniques used on the client-side to create interactive web applications.</li>
<li>XML's design goals emphasize simplicity, generality, and usability over the Internet.</li>
<li>SVG and HTML5's canvas element allow for the creation of simple graphical objects using programming.</li>
<li>The new audio and video elements of HTML5 offer an alternative to flash for embedding multimedia on the web.</li>
<li>CSS is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language.</li>
</ul>
</div>

<br />

<div id="mysagscroller2" class="sagscroller">
<ul>
<li><a href="#"><img src="http://i29.tinypic.com/xp3hns.jpg" /></a></li>
<li><a href="#"><img src="http://i26.tinypic.com/11l7ls0.jpg" /></a></li>
<li><a href="#"><img src="http://i31.tinypic.com/119w28m.jpg" /></a></li>
<li><a href="#"><img src="http://i27.tinypic.com/34fcrxz.jpg" /></a></li>
</ul>
</div>

Wywołanie w HTML jako znacznika div:

<div id="mysagscroller" class="sagscroller">

<ul>
<li>Message 1</li>
<li>Message 2</li>
<li>Message 3</li>
<li>Message 4</li>
<li>Message 5</li>
</ul>

</div>

Inicjacja funkcji scroller w sekcji Head jako new sagscroller():

var uniquevar=new sagscroller({   
  id: 'mysagscroller', 
  option1: 'value1', 
  option2: 'value2' 
  //etc  
})

Miejsce w skrypcie sagscroller.js które możemy modyfikować pod nasze potrzeby:

var sagscroller_constants={
navpanel: {height:'16px', downarrow:'down.gif', opacity:0.6, title:'Go to Next Content', background:'black'},
loadingimg: {src:'ajaxloading.gif', dimensions:[100,15]}
}

 

 

Popularne Artykuly

Najnowsze Artykuły