仿jquery的slideup，slidedown效果

最新推荐文章于 2024-09-14 18:52:56 发布

dianruiru1826

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量216

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/niezy/archive/2011/11/11/2245401.html

版权

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>无标题文档</title>
<style>
body
{
  margin:0px;
}
div.content
{
 width:300px;
 height:auto;
}
.imgcontent
{
  width:300px;
  height:200px;
 background-color:black;
 filter:alpha(opacity=75);
 opacity:.75;
 POSITION: relative; 
 TOP: 200px
}
div.slide
{

 width:300px;
 height:30px;
 color:white;
}
div.chislide
{
  width:300px;
  height:169px;
  border-top:#FFFFCC solid 1px;
}
.imgtest
{
   width:300px;
  height:200px;
}
#test
{
  background-image:url(1.jpg);
  background-repeat:no-repeat;
  overflow:hidden;
}
</style>

<script>
var obj=null;
var flag=1;
var array=new Array();
var setslide=null;
function slideUp()
 {
   clearTimeout(setslide);
   obj=document.getElementById('imgcontent');
   array=obj.style.top.split('px');
if(parseInt(array[0].toString())<1)
   {
     flag=1;
return;
   }
   obj.style.top=parseInt(array[0].toString())-10+'px'; 
    setslide=(setTimeout(slideUp,1));
 }
function slideDown()
 {
  clearTimeout(setslide);
  obj=document.getElementById('imgcontent');
  array=obj.style.top.split('px');
if(parseInt(array[0].toString())>170)
   {
     flag=0;
return;
   } 
   obj.style.top=parseInt(array[0].toString())+10+'px';
   setslide=(setTimeout(slideDown,1));
 }
</script>
</head>

<body>
<div class="content" style="position:absolute; top:0px;">
<div id="test" style="position:relative; display:block;" onmouseover="slideUp()" onmouseout="slideDown()">
<div class="imgcontent" id="imgcontent" style="top:170px;">
<div class="slide" id="slide">测试一下效果</div>
<div class="chislide" id="chislide">下面的内容</div>
</div>
</div>      
<div><img src="2.jpg" border="0" class="imgtest"/></div>
<div><img src="3.jpg" border="0" class="imgtest"/></div>
<div><img src="4.jpg" border="0" class="imgtest"/></div>
</div>

</body>
</html>