<!--
/*************************************************************
* This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com
* Fee free to distribute and modify code, but keep reference to its creator
*
* Marquee class can be used to create horizontal or vertical marquee elements in websites
* This class rotates all provided html elements, so marquee will never be empty
* Marquee div element can be customized using css styles
* There are also customizations for rotating speed and separator, etc
*
* For more information, examples and online documentation visit:
* http://webcodingeasy.com/JS-classes/Javascript-marquee
**************************************************************/
-->
<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: 100%;
}
#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 style='width:1000px; margin: 0 auto 0 auto; height:500px; border: 3px solid black;'>
somecontent
<p>somecontent here</p>
<div> and here </div>
</div>
<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>
</div>
<script type="text/javascript" src="./marquee.packed.js" ></script>
<script type="text/javascript">
//create rating instance
//parameter json with configuration values
var horizontal = new marquee("marqueehor").horizontal();
var vertical = new marquee("marqueever").vertical();
</script>
</body>
</html> |
Stumble It!
Bookmark in del.icio.us
Download
