I am not sure what to call this, but you will get to see this in twitter, foursquare etc, where the activities roll on. It is similiar to marquee effect but better than that. Here is a snapshot of what I am talking about:
So I have come up with my own solution for this. Pretty simple and neat. Just copy the following and paste in a .html file and view in your browser:
<html>
<head>
<style type="text/css">
body{font-family:arial;verdana,tahoma;font-size:11px}
.flip_container{ width:310px;height:260px;border:1px solid;overflow:hidden }
.flip_element{width:280;padding:10px;height:60;overflow:hidden;border-bottom:1px dotted #999;margin:5px }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript">
var delay = 1000;
var count =6;
var arr=new Array();
function shift()
{
if(arr.length==0){
for(i=1;i<=count;i++){
arr[i-1]=i;
}
}
var tmp=arr[(arr.length-1)]
for(i=(arr.length-1);i>0;i--)
{
arr[i]=arr[i-1];
}
arr[0]=tmp;
}
function my_func()
{
shift();
$('#flip_element'+arr[0]).remove().css('display', 'none').prependTo('#items');
$('#flip_element'+arr[0]).slideDown();
jQuery("#flip_element" + arr[3]).slideUp();
setTimeout("my_func()",delay);
}
jQuery(document).ready(function(){
setTimeout("my_func()",delay);
})
</script>
</head>
<body>
<div class="flip_container" id="items">
<div id="flip_element1" class="flip_element">
1. This is the first div
</div>
<div id="flip_element2" class="flip_element">
2. This is the second div
</div>
<div id="flip_element3" class="flip_element">
3. This is the third div
</div>
<div id="flip_element4" class="flip_element" style="display:none">
4. This is the fourth div
</div>
<div id="flip_element5" class="flip_element" style="display:none">
5. This is the fifth div
</div>
<div id="flip_element6" class="flip_element" style="display:none">
6. This is the sixth div
</div>
</div>
</body>
</html>
The above content are static. I am sure you can make the necessary changes as per your needs.
Enjoy! Please don't forget to post in your feedback and comments.
So I have come up with my own solution for this. Pretty simple and neat. Just copy the following and paste in a .html file and view in your browser:
<html>
<head>
<style type="text/css">
body{font-family:arial;verdana,tahoma;font-size:11px}
.flip_container{ width:310px;height:260px;border:1px solid;overflow:hidden }
.flip_element{width:280;padding:10px;height:60;overflow:hidden;border-bottom:1px dotted #999;margin:5px }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript">
var delay = 1000;
var count =6;
var arr=new Array();
function shift()
{
if(arr.length==0){
for(i=1;i<=count;i++){
arr[i-1]=i;
}
}
var tmp=arr[(arr.length-1)]
for(i=(arr.length-1);i>0;i--)
{
arr[i]=arr[i-1];
}
arr[0]=tmp;
}
function my_func()
{
shift();
$('#flip_element'+arr[0]).remove().css('display', 'none').prependTo('#items');
$('#flip_element'+arr[0]).slideDown();
jQuery("#flip_element" + arr[3]).slideUp();
setTimeout("my_func()",delay);
}
jQuery(document).ready(function(){
setTimeout("my_func()",delay);
})
</script>
</head>
<body>
<div class="flip_container" id="items">
<div id="flip_element1" class="flip_element">
1. This is the first div
</div>
<div id="flip_element2" class="flip_element">
2. This is the second div
</div>
<div id="flip_element3" class="flip_element">
3. This is the third div
</div>
<div id="flip_element4" class="flip_element" style="display:none">
4. This is the fourth div
</div>
<div id="flip_element5" class="flip_element" style="display:none">
5. This is the fifth div
</div>
<div id="flip_element6" class="flip_element" style="display:none">
6. This is the sixth div
</div>
</div>
</body>
</html>
The above content are static. I am sure you can make the necessary changes as per your needs.
Enjoy! Please don't forget to post in your feedback and comments.
No comments:
Post a Comment