使用Jquery和CSS折叠图像
Javascript 代码 包含javascipt和HTML代码。 $（“。imagebox”）。mouseover（function（）{}）。mouseout（function {}） - imagebox是div标签的类名。 $（“。showlink”）。click（function（）{}） - .showlink是show anchor tag的类名。 $（“。hidelink”）。click（function（）{}） - .hidelink是隐藏锚标记的类名。 使用Jquery CSS函数chaning max-height:100px
()
{
// Image Area Mouseover and Mouseout
$(".imagebox"). mouseover ( function()
{
$(".showhide").show();
}). mouseout ( function()
{
$(".showhide").hide();
});
//Show link
$(".showlink").click(function()
{
$(".imagebox").css(max-height,);
$(".showlink").hide();
$(".hidelink").show();
});
//Hide link
$(".hidelink").click(function()
{
$(".imagebox").css(max-height,100px);
$(".hidelink").hide();
$(".showlink").show();
});
});
</script>//HTML code
CSS 代码
{
display:block;
position:relative;
overflow:hidden
}
.hidelink{
display:none;
}
.showhide{
padding:5px;
border-top:dashed 1px #333;
border-bottom:dashed 1px #333;
background:#F2f2f2 none repeat scroll 0 0;
bottom:0;
cursor:pointer;
display:block;
height:18px;
left:0;
line-height:18px;
padding-left:5px;
position:absolute;
width:100%;
}扫一扫，关注我们
