Atlast found the result
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
div{
border: 3px red solid;
height: 30px;
}
</style>
<body>
</body>
<script type="text/javascript">
$("document").ready(function() {
var windowheight = $(window).height();
var space = 3;
//alert(height / 39);
toataldiv = windowheight / 39;
for(var i=1; i<=toataldiv; i++){
$("<div>").appendTo("body").css({"width":(i*30),"margin-top":space});
}
$("div").bind("mouseover", function () {
$(this).attr("rel", $(this).css("width"));
$(this).css("width", "100%");
});
$("div").bind("mouseleave", function () {
$(this).css("width", $(this).attr("rel"));
});
});
</script>
</head>
</html>