如何使用Jquery和CSS进行折叠图像。 Orkut.com 在更新图像碎片时实现了这个概念，碎片以折叠样式显示图像以减少网页高度。这是使用mouseover，mouseout和css Jquery函数的非常简单的脚本。

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

<script

 type="

text/javascript

" src="

http://ajax.googleapis.com/

ajax/libs/jquery/1.4.2/jquery.min.js

"

>

</script>

<script

 type="

text/javascript

"

>

$(document).ready(

function

()

{

// 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

<div class="imagebox" style="max-height:100px;">

<img src="image.jpg"/>

<div class="showhide" >

<a href="#" class="showlink">show</a>

<a href="#" class="hidelink">hide</a>

</div>

</div>

CSS 代码

.imagebox

{

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%;

}

ITPub博客

使用Jquery和CSS折叠图像

最新文章