0

Притурки. Превъртане на заглавия на публикации

Притурки. Превъртане на заглавия
Здравейте, скъпи посетители. Можете да използвате скрипт не само за превъртането на дълъг текст в публикация. Днес ви предлагам скрипт за превъртане на заглавия на публикации. В скрипта можете да въведете хипервръзки не само на важни според вас публикации, но и такива, които да водят посетителя към друга желана от вас информация.



    Така, спестявайки си пространство, предложенията ви ще се виждат на удобно за посетителите място. Мисля, че всеки от вас ще намери за себе си приложението на такава притурка, още повече, че се инсталира бързо, а информацията в нея се редактира и променя много лесно.

    Код


    <style type="text/css">
    /*Example CSS for the two demo scrollers*/
    #pscroller2{
    background:url(https://lh3.googleusercontent.com/-bThMcKLUZXU/Wg6Dk4-vkfI/AAAAAAAAGBQ/Eb3kB98W7DEC-k9LQNC1LWH79JVDXjn7gCEwYBhgL/w30-h30-p/pero1.png) no-repeat top left;
    width: 330px;
    height: 20px;
    border: 2px solid #ddd;
    padding: 3px 3px 3px 40px;
    margin:10px 0;
    }
    #pscroller2 a{
    text-decoration: none;
    color:#0080ff;
    }
    #pscroller2 a:hover{
    text-decoration: underline;
    }
    .someclass{
    }
    </style>
    <script type="text/javascript">
    /*Example message arrays for the two demo scrollers*/
    var pausecontent2=new Array()
    pausecontent2[0]='<a href="URL">TEXT0</a>'
    pausecontent2[1]='<a href="URL">TEXT1</a>'
    pausecontent2[2]='<a href="URL">TEXT2</a>'
    pausecontent2[3]='<a href="URL">TEXT3</a>'
    </script>
    <script type="text/javascript">
    function pausescroller(content, divId, divClass, delay){
    this.content=content //message array content
    this.tickerid=divId //ID of ticker div to display information
    this.delay=delay //Delay between msg change, in miliseconds.
    this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is)
    this.hiddendivpointer=1 //index of message array for hidden div
    document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>')
    var scrollerinstance=this
    if (window.addEventListener) //run onload in DOM2 browsers
    window.addEventListener("load", function(){scrollerinstance.initialize()}, false)
    else if (window.attachEvent) //run onload in IE5.5+
    window.attachEvent("onload", function(){scrollerinstance.initialize()})
    else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec
    setTimeout(function(){scrollerinstance.initialize()}, 500)
    }
    // -------------------------------------------------------------------
    // initialize()- Initialize scroller method.
    // -Get div objects, set initial positions, start up down animation
    // -------------------------------------------------------------------
    pausescroller.prototype.initialize=function(){
    this.tickerdiv=document.getElementById(this.tickerid)
    this.visiblediv=document.getElementById(this.tickerid+"1")
    this.hiddendiv=document.getElementById(this.tickerid+"2")
    this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv))
    //set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2)
    this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px"
    this.getinline(this.visiblediv, this.hiddendiv)
    this.hiddendiv.style.visibility="visible"
    var scrollerinstance=this
    document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1}
    document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0}
    if (window.attachEvent) //Clean up loose references in IE
    window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
    setTimeout(function(){scrollerinstance.animateup()}, this.delay)
    }
    // -------------------------------------------------------------------
    // animateup()- Move the two inner divs of the scroller up and in sync
    // -------------------------------------------------------------------
    pausescroller.prototype.animateup=function(){
    var scrollerinstance=this
    if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){
    this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px"
    this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px"
    setTimeout(function(){scrollerinstance.animateup()}, 50)
    }
    else{
    this.getinline(this.hiddendiv, this.visiblediv)
    this.swapdivs()
    setTimeout(function(){scrollerinstance.setmessage()}, this.delay)
    }
    }
    // -------------------------------------------------------------------
    // swapdivs()- Swap between which is the visible and which is the hidden div
    // -------------------------------------------------------------------
    pausescroller.prototype.swapdivs=function(){
    var tempcontainer=this.visiblediv
    this.visiblediv=this.hiddendiv
    this.hiddendiv=tempcontainer
    }
    pausescroller.prototype.getinline=function(div1, div2){
    div1.style.top=this.visibledivtop+"px"
    div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px"
    }
    // -------------------------------------------------------------------
    // setmessage()- Populate the hidden div with the next message before it's visible
    // -------------------------------------------------------------------
    pausescroller.prototype.setmessage=function(){
    var scrollerinstance=this
    if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it)
    setTimeout(function(){scrollerinstance.setmessage()}, 100)
    else{
    var i=this.hiddendivpointer
    var ceiling=this.content.length
    this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1
    this.hiddendiv.innerHTML=this.content[this.hiddendivpointer]
    this.animateup()
    }
    }
    pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any
    if (tickerobj.currentStyle)
    return tickerobj.currentStyle["paddingTop"]
    else if (window.getComputedStyle) //if DOM2
    return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top")
    else
    return 0
    }
    </script>
    <script type="text/javascript">
    //new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
    new pausescroller(pausecontent2, "pscroller2", "someclass", 3000)

    </script>


    Копирайте кода, сложете го в този редактор , за да видите как изглежда тази притурка.

    Настройки


    ➤Оцветеното – е адрес на изображението, което можете да промените;

    ➤width: 430 px – ширина на притурката;

    ➤height: 20 px – височина на притерката;

    ➤#0080ff - цвят на текста на заглавията;

    ➤URL - адрес на хипервръзката;

    ➤TEXT – наименование на заглавята;

    ➤3000 - честота на превъртане на заглавията;

    ➤За по-бързо превъртане намалете, а за по-бавно – увеличаване числото;

    ➤За да добавите още заглавия добавете в кода преди реда още редове;



    pausecontent2[4]='<a href="URL">TEXT4</a>'
    pausecontent2[5]='<a href="URL">TEXT5</a>'
    pausecontent2[6]='<a href="URL">TEXT6</a>'
    pausecontent2[7]='<a href="URL">TEXT7</a>'

    Инсталиране

    Пътят е: Оформление➔Добавяне на притурка➔Избираме Html/JavaScript➔Вписваме кода➔ Запазване➔Преместваме на удобно място➔Запазване на подредбата;

    Надявам се, че съм споделила удобна за вас притурка.

    Доскоро!


    Продължение


    Няма коментари :

    Публикуване на коментар


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита