Sunday, 18 December 2011

Vertical and horizontal marquee


Vertical and horizontal marquee 

Vertical and horizontal marquee with java script 
html Code 

 <html>
<head>
<style>
#marqueehor
{
    position: absolute;
    bottom:0;
    left:0;
    width: 100%;
    height: 60px;
    border: 1px solid black;
}
#marqueehor div
{
    border: 1px solid red;
    padding: 20px;
    height: 60px;
    position: absolute;
    top: 0;
}
#marqueever
{
    position: absolute;
    left:0;
    top: 0;
    border: 1px solid black;
    width: 100px;
    height: 400px;
}
#marqueever div
{
    border: 1px solid red;
    padding: 20px;
    width: 60px;
    position: absolute;
    left: 0;
}
.wop
{
    padding: 0;
    margin: 0;
}
</style>
</head>
<body style='text-align: center;'>

<div id='marqueehor'>
    <p class='wop'><a href=''>Some text</a></p>
    <p class='wop'><a href=''>More text</a></p>
  
</div>
<div id='marqueever'>
    <p class='wop'><a href=''>Some text</a></p>
    <p class='wop'><a href=''>More text</a></p>
    <p class='wop'><a href=''>demo</a></p>
</div>
<script type="text/javascript" src="marquee.packed.js" ></script>
<script type="text/javascript">
var horizontal = new marquee("marqueehor").horizontal();
var vertical = new marquee("marqueever").vertical();
</script>
</body>
</html>

see some Demo 

No comments:

Post a Comment