Автоматический набор текста через плагин Ticker на jQuery
|
1 2 3 4 5 |
#ticker {height: 12em; padding: 0.6em 0; margin: 0 0 1.8em 0; border-top:3px solid #efefef; border-bottom:3px solid #efefef; position: relative;} #ticker .cursor {display: inline-block; background: #565c61; width: 0.6em; height: 1em; text-align: center;} #ticker p {margin-bottom: 0.8em;} #ticker code {margin: 0.4em 0.4em; display: block;} #ticker .next {position: absolute; bottom: 1em;} |
2#: После /head на нужных страницах вставляйте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript" SRC="/js/jquery.jticker.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ // Instantiate jTicker jQuery("#ticker").ticker({ cursorList: " ", rate: 20, delay: 6000 }).trigger("play").trigger("stop"); // Trigger events jQuery(".next").live("click", function(){ jQuery("#ticker").trigger({type: "play"}).trigger({type: "stop"}); return false; }); }); </script> |
3#: Сам текст, который будет печататься, прописываем так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div id="ticker"> <div> <h3>Заголовок</h3> <p>Здесь любой ваш текст</p> <p>Следующая строчка текста</p> <a class="next" href="#">Далее</a> </div> <div> <h3>Следующий Заголовок</h3> <p>Здесь любой ваш текст №2</p> <p>Следующая строчка текста №2</p> <a class="next" href="#">Далее</a> </div> </div> |
