Recently I have found out a website of one software company that I do like a lot with its properly created structure and great effects.
Here is a feature of that website that I am pleased to introduce for anyone who would like to use it for yourself:

<html>
 
<head>
 
<style>
.news p{
    width: 800px;
    left: 310px;
    position: relative;
}
</style>
 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
 
var liItem = new Array();
 
var x = 0;
 
$(function(){
    $(".newsItem").each(function(){
        liItem.push($(this).html());
    });
 
    for(i=0; i<liItem.length; i++){
        liItem[i] = "<p>"+liItem[i]+"</p>";
    }
});
 
function startSlideshow(){
    if(x==liItem.length){
        x = 0;
    }
    $(".news").empty();
    $(".news").append(liItem[x]);
    x++;
    $strip = $(".news p");
    $strip.animate(
        {
            left: 0
        },
        300,
        function(){
            $(this).animate(
                {
                    left: 0
                },
                5000,
                function(){
                    $(this).animate(
                        {
                            opacity: "hide"
                        },
                        700,
                        function(){
                            startSlideshow()
                        }
                    )
                }
            )
        }
    );
    $strip.hover(
        function(){
          $(this).stop();
          $(this).animate(
              {
                  opacity: 1
              },
              100
          )
        },
        function(){
            $(this).animate(
                {
                    opacity: "hide"
                },
                700,
                function(){
                    startSlideshow()
                }
            )
        }
    )
}
 
$(window).bind(
    "load",
    function(){
        startSlideshow()
    }
);
 
</script>
 
 
 
</head>
 
<body>
 
<div class="news">
    <ul>
        <li class="newsItem">
            <a href="http://rubensargsyan.com/new-updated-version-of-the-website-art-works-expo/">New updated version of the website "Art Works Expo"</a>
        </li>
        <li class="newsItem">
            <a href="http://rubensargsyan.com/wordpress-plugin-explanatory-dictionary-new-1-4-version/">Wordpress plugin "Explanatory Dictionary" new 1.4 version</a>
        </li>
        <li class="newsItem">
            <a href="http://rubensargsyan.com/automatic-activating-plugins-after-wordpress-installation/">Automatic activating plugins after Wordpress installation</a>
        </li>
        <li class="newsItem">
            <a href="http://rubensargsyan.com/wordpress-plugin-most-commenting-visitors-new-1-2-version/">Wordpress plugin "Most Commenting Visitors" new 1.2 version</a>
        </li>
        <li class="newsItem">
            <a href="http://rubensargsyan.com/search-text-in-the-directory-files/">Search text in the directory files</a>
        </li>
    </ul>
</div>
 
</body>
 
</html>
Share

Leave a Reply

Info