Вертикальная прокрутка текста jQuery. Динамичная подача новостей WordPress

Андрей jQuery & JavaScript

tickers jquery

Сегодня мы будем создавать автоматическую вертикальную прокрутку текста с несколько дополнительными вариантами. На примере я буду подстраиваться под платформы WordPress, то есть вместо обычных HTML тегов используются функции вывода записей. Если у вас другой движок, то просто изменяйте функцию вывода, а в остальном будет работать везде.

Построение кода начинается с разметки HTML, которая содержит в себе div блоки и маркированный список. Затем идет оформление внешнего вида средствами CSS. И последний шаг, он же замыкающий, состоит из скрипта. Для любого из ниже представленного варианта необходимо подключение библиотеки jQuery, чтобы был достигнут желаемый результат. Изначально во многих темах WordPress уже интегрирована библиотека, но на всякий случай привожу пример:

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

Вертикальная прокрутка текста с навигацией «вперед/назад»

Этот вариант прокрутки, или как еще ее называют «каруселью», имеет джойстик управления в виде двух навигационных стрелок. Позволяющие при нажатии листать вперед и назад показывающий текст.

HTML

    <div class="box-new">
    <span class="box-title2">Новости</span> <span class="box-title1">Дня</span>
    <div class="box-content">
    <div id="box-scroldiv">
   <!-- функция вывода постов для WordPress'a   -->
   <ul>
    <?php $recent = new WP_Query("cat=8&showposts=5"); while($recent->have_posts()) : $recent->the_post();?>
    <li>
        <b><?php the_time('Y-m-d')?></b>
     <a href="<?php the_permalink() ?>"><?php echo mb_strimwidth(get_the_title(), 0, 40,"...") ?></a>
    </li>
    <?php endwhile; ?>
    </ul>
                
   <!-- HTML разметка не для WordPress'a
        <ul>
        <li><b>2015-12-33</b><a href="#">текст#1</a></li>
        <li><b>2015-12-33</b><a href="#">текст#2</a></li>
        </ul>
        -->
    </div>
    <div class="box-arrow">
        <span id="btn2">◄</span>
        <span id="btn1">►</span>
    </div>
    </div>
</div>
<div class="clear"></div>

CSS

.box-new {
    margin-bottom: 15px;
}
.box-title1 {
    color: #666666;
    font-size: 18px;
    font-weight: normal;
    line-height: 22px;
    padding-left: 8px;
    text-decoration: none;
    text-transform: uppercase;
}
.box-title2 {
    color: #e11c36;
    float: left;
    font-family: Arial;
    font-size: 18px;
    font-weight: normal;
    line-height: 23px;
    margin-bottom: 5px;
    text-decoration: none;
    text-transform: uppercase;
}
.box-content {
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    clear: both;
    height: 50px;
    width: 100%;
}
#box-scroldiv {
    float: left;
    height: 34px;
    margin: 10px 0 0 20px;
    overflow: hidden;
    width: 500px;
}
#box-scroldiv ul li {
    height: 34px;
    overflow: hidden;
        margin: 0;
}

#box-scroldiv ul {
        margin: 0;
        padding:0;
}

#box-scroldiv ul li a {
    color: #e11c36;
    font-size: 14px;
    font-weight: normal;
    line-height: 33px;
    text-decoration: none;
}

#box-scroldiv ul li a:hover{
        text-decoration: underline;;
}

#box-scroldiv b{
        margin-right: 10px;
        height:34px;
        font-size: 14px;
        line-height: 33px;
        color: #666;
        text-decoration: none;
}

.box-arrow {
    float: right;
    padding: 0 10px;
}
#btn1 {
    color: #888;
    font-size: 18px;
    line-height: 50px;
}
#btn2 {
    color: #888;
    font-size: 18px;
    line-height: 50px;
}
/*стили для очищающего блока (если понадобится)
.clear{
        display:block;
        width:100%;
        height:0px;
        clear:both;
        overflow:hidden;
        visibility: hidden;
        font:400 0px/0px Arial;
}
*/

JS

<script type="text/javascript">
(function($){
        $.fn.extend({
         Scroll:function(opt,callback){
                if(!opt) var opt={};
                var _btnUp = $("#"+ opt.up);//кнопка вверх
                var _btnDown = $("#"+ opt.down);//кнопка вниз
                var timerID;
                var _this=this.eq(0).find("ul:first");
                var     lineH=_this.find("li:first").height(), //получаем высоту строки
                                line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),
                                                        
                speed=opt.speed?parseInt(opt.speed,10):800;
                timer=opt.timer?parseInt(opt.timer,10):80000;
                        if(line==0) line=1;
                        var upHeight=0-line*lineH;
                        //функция прокрутки
                        var scrollUp=function(){
                                _btnUp.unbind("click",scrollUp);
                                _this.animate({
                                        marginTop:upHeight
                                                },speed,function(){
                                                        for(i=1;i<=line;i++){
                                                        _this.find("li:first").appendTo(_this);
                                                        }
                                                        _this.css({marginTop:0});
                                                        _btnUp.bind("click",scrollUp);
                                                });
        
                                        }
                        //функция вниз
                        var scrollDown=function(){
                                _btnDown.unbind("click",scrollDown);
                                for(i=1;i<=line;i++){
                                        _this.find("li:last").show().prependTo(_this);
                                        }
                                        _this.css({marginTop:upHeight});
                                        _this.animate({
                                                marginTop:0
                                        },speed,function(){
                                        _btnDown.bind("click",scrollDown);
                                                        });
                                        }
                                   //автозапуск
                                        var autoPlay = function(){
                                                        if(timer)timerID = window.setInterval(scrollUp,timer);
                                        };
                                        var autoStop = function(){
                                                        if(timer)window.clearInterval(timerID);
                                        };
                                         //остановить при наведении мыши
                                        _this.hover(autoStop,autoPlay).mouseout();
                                        _btnUp.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);
                                        _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay);
        
                        }
                })
        })(jQuery);
        
        $(document).ready(function(){
                $("#box-scroldiv").Scroll({line:1,speed:500,timer:5000,up:"btn1",down:"btn2"});//скорость и время прокрутки(в миллисекундах)
        });
</script>

Посмотреть Demo

HTML разметку можете поместить в удобное вам место, например, в файл index.php перед началом цикла. Стили обычно добавляют в основной файл style.css. Скрипт лучше подключать в самом низу сайта (файл footer.php) или если у вас в теме присутствует отдельно созданный файл скрипта, то просто добавьте к нему.

Прокрутка текста с кнопкой «закрыть»

В этом примере на замену джойстика приходить закрывающая кнопка в виде крестика. При нажатии на нее весь блок новостей плавно скрывается, делая вид удаления.

HTML

<div id="box-new2">
        <span class="box-title2">Новости</span> <span class="box-title1">Дня</span>
        <div class="box-content2">
        <div id="box-scroldiv2">
                <!-- функция вывода постов для WordPress'a   -->
        <ul>
    <?php $recent = new WP_Query("cat=5&showposts=8"); while($recent->have_posts()) : $recent->the_post();?>
    <li>
        <b><?php the_time('Y-m-d')?></b>
     <a href="<?php the_permalink() ?>"><?php echo mb_strimwidth(get_the_title(), 0, 40,"...") ?></a>
    </li>
    <?php endwhile; ?>
    </ul>
                
                <!-- HTML разметка не для WordPress'a
                        <ul>
                        <li><b>2015-12-33</b><a href="#">текст#1</a></li>
                        <li><b>2015-12-33</b><a href="#">текст#2</a></li>
                        </ul>
                -->
        </div>
<div class="box-cross">
<a title="закрыть" href="javascript:void(0)" onclick="$(&#39;#box-new2&#39;).slideUp(&#39;slow&#39;);">
<span id="announcement_close">×</span>
</a>
</div>
</div>
</div>
<div class="clear"></div>

CSS

.box-title1 {
    color: #666666;
    font-size: 18px;
    font-weight: normal;
    line-height: 22px;
    padding-left: 8px;
    text-decoration: none;
    text-transform: uppercase;
}
.box-title2 {
    color: #e11c36;
    float: left;
    font-family: Arial;
    font-size: 18px;
    font-weight: normal;
    line-height: 23px;
    margin-bottom: 5px;
    text-decoration: none;
    text-transform: uppercase;
}
.box-content2 {
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    clear: both;
    height: 50px;
    width: 100%;
        margin-bottom: 15px;
}
#box-scroldiv2 {
    float: left;
    height: 34px;
    margin: 10px 0 0 20px;
    overflow: hidden;
    width: 500px;
}
#box-scroldiv2 ul li {
    height: 34px;
    overflow: hidden;
        margin: 0;
}

#box-scroldiv2 ul {
        margin: 0;
        padding:0;
}

#box-scroldiv2 ul li a {
    color: #e11c36;
    font-size: 14px;
    font-weight: normal;
    line-height: 33px;
    text-decoration: none;
}

#box-scroldiv2 ul li a:hover{
        text-decoration: underline;;
}

#box-scroldiv2 b{
        margin-right: 10px;
        height:34px;
        font-size: 14px;
        line-height: 33px;
        color: #666;
        text-decoration: none;
}

.box-cross {
     float: right;
    font-size: 22px;
    padding-right: 15px;
}
.box-cross a {
    display: block;
    line-height: 48px;
    text-align: center;
}

#announcement_close {
    color: #666;
}
#announcement span {
    color: #666;
}
/*стили для очищающего блока (если понадобится)
.clear{
        display:block;
        width:100%;
        height:0px;
        clear:both;
        overflow:hidden;
        visibility: hidden;
        font:400 0px/0px Arial;
}
*/

JS

<script type="text/javascript">
function AutoScroll(obj){
$(obj).find("ul:first").animate({ marginTop:"-33px" },500,function(){
$(this).css({marginTop:"0px"}).find("li:first").appendTo(this); }); }
$(document).ready(function() {var myar = setInterval('AutoScroll("#box-scroldiv2")', 3600)
$("#box-scroldiv2").hover(function() { clearInterval(myar); },
function() { myar = setInterval('AutoScroll("#box-scroldiv2")', 3600) });});
</script>

Посмотреть Demo

Карусель текста в несколько строк

Последний вариант больше подходит для размещения в сайдбаре сайта, так как он прокручивает текст в четыре строки. В итоги получается целый блок, а не просто одна линия. На WordPress’e можно подключить поддержку php в сайдбаре и вывести через текстовый виджет.

HTML

 <div id="box-new3">
        <span class="box3-title">События</span>
        <div class="box-content3">
        <div id="box-scroldiv3">
                <!-- функция вывода постов для WordPress'a   -->
         <ul>
    <?php $recent = new WP_Query("cat=8&showposts=10"); while($recent->have_posts()) : $recent->the_post();?>
    <li>
        <b><?php the_time('Y-m-d')?></b>
     <a href="<?php the_permalink() ?>"><?php echo mb_strimwidth(get_the_title(), 0, 40,"...") ?></a>
    </li>
    <?php endwhile; ?>
    </ul>
                
                <!-- HTML разметка не для WordPress'a
                        <ul>
                        <li><a href="#">текст#1</a></li>
                        <li><a href="#">текст#2</a></li>
                        </ul>
                -->
        </div>
</div>
</div>

CSS

.box3-title {
    color: #333;
    display: table;
    font-family: Arial;
    font-size: 18px;
    font-weight: normal;
    line-height: 23px;
    margin: 12px 0 5px 10px;
    text-decoration: none;
    text-transform: uppercase;
}

.box-content3 {
    width: 100%;
        height:185px;
        overflow:hidden
}

#box-scroldiv3 ul li {
    min-height: 30px;
        padding:0px 0 0 10px!important;
        margin: 0;
        border:none !important;
}

#box-scroldiv3 ul {
        margin: 0;
        padding:0;
}

#box-scroldiv3 ul li a {
    color: #e11c36;
    font-size: 14px;
    font-weight: normal;
    line-height: 30px;
    text-decoration: none;
}
#box-scroldiv3 ul li a:hover{
        text-decoration: underline;;
}

JS

<script type="text/javascript">

(function($){
$.fn.extend({
        Scroll:function(opt,callback){
                if(!opt) var opt={};
                var _this=this.eq(0).find("ul:first");
                var        lineH=_this.find("li:first").height(),
                        line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),
                        speed=opt.speed?parseInt(opt.speed,10):500,
                        timer=opt.timer?parseInt(opt.timer,10):3000;
                if(line==0) line=1;
                var upHeight=0-line*lineH;
                scrollUp=function(){
                        _this.animate({
                                marginTop:upHeight
                        },speed,function(){
                                for(i=1;i<=line;i++){
                                        _this.find("li:first").appendTo(_this);
                                }
                                _this.css({marginTop:0});
                        });
                }
                _this.hover(function(){
                        clearInterval(timerID);
                },function(){
                        timerID=setInterval("scrollUp()",timer);
                }).mouseout();
        }
})
})(jQuery);
$(document).ready(function(){
        $("#box-scroldiv3").Scroll({line:4,speed:500,timer:4000});
});
</script>

Посмотреть Demo

cat=8&showposts=4 – здесь нужно указать ID категории и количество записей.
<?php echo mb_strimwidth(get_the_title(), 0, 40,"...") ?> — здесь указываем количество символов в названии поста.

На этом все.

Источник: http://cbcfrank.blogspot.com.by/2009/11/jquery.html

Читайте также:
Оставить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *