overlay也可以实现apple的效果
如下：
html代码如下:
<!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=utf-8" />
<title>overlay</title>
<style>
/* the overlayed element */
.apple_overlay {
/* initially overlay is hidden */
display:none;
/* growing background image */
background-image:url(http://flowplayer.org/tools/img/overlay/white.png);
/*
width after the growing animation finishes
height is automatically calculated
*/
width:640px;
/* some padding to layout nested elements nicely */
padding:35px;
/* a little styling */
font-size:11px;
}
/* default close button positioned on upper right corner */
.apple_overlay div.close {
background-image:url(images/close.png);
position:absolute; right:5px; top:5px;
cursor:pointer;
height:35px;
width:35px;
}
/* black version of the overlay. simply uses a different background image */
div.apple_overlay.black {
background-image:url(http://static.flowplayer.org/tools/img/overlay/transparent.png);
color:#fff;
}
</style>
<!--[if lt IE 7]>
<style>
div.apple_overlay {
background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_IE6.gif);
color:#fff;
}
/* default close button positioned on upper right corner */
div.apple_overlay div.close {
background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_close_IE6.gif);
}
</style>
<![endif]-->
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.tools.min.js" type="text/javascript"></script>
<!--将jQuery引用进来-->
<script type="text/javascript">
$(function (){
$("img[rel]").overlay({effect: 'apple'});
});
</script>
</head>
<body>
<!-- trigger elements -->
<img src="images/0.jpg" height="200" rel="#photo1"/>
<img src="images/1.jpg" height="200" rel="#photo2"/>
<!-- overlay for the first trigger. id matches the rel- attribute -->
<div class="apple_overlay black" id="photo1">
<img src="images/0.jpg" height="400"/>
<div class="details">
<h2>Berlin Gustavohouse</h2>
<p>
The Gustavo House in Storkower Strasse. It was built in 1978 and reconstructed in
1998 by the spanish artist Gustavo.
</p>
</div>
</div>
<!-- overlay for the second trigger -->
<div class="apple_overlay" id="photo2">
<img src="images/1.jpg" height="400"/>
<div class="details">
<h2>Berlin Gustavohouse</h2>
<p>
The Gustavo House in Storkower Strasse. It was built in 1978 and reconstructed in
1998 by the spanish artist Gustavo.
</p>
</div>
</div>
</body>
</html>
如下：
html代码如下:
<!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=utf-8" />
<title>overlay</title>
<style>
/* the overlayed element */
.apple_overlay {
/* initially overlay is hidden */
display:none;
/* growing background image */
background-image:url(http://flowplayer.org/tools/img/overlay/white.png);
/*
width after the growing animation finishes
height is automatically calculated
*/
width:640px;
/* some padding to layout nested elements nicely */
padding:35px;
/* a little styling */
font-size:11px;
}
/* default close button positioned on upper right corner */
.apple_overlay div.close {
background-image:url(images/close.png);
position:absolute; right:5px; top:5px;
cursor:pointer;
height:35px;
width:35px;
}
/* black version of the overlay. simply uses a different background image */
div.apple_overlay.black {
background-image:url(http://static.flowplayer.org/tools/img/overlay/transparent.png);
color:#fff;
}
</style>
<!--[if lt IE 7]>
<style>
div.apple_overlay {
background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_IE6.gif);
color:#fff;
}
/* default close button positioned on upper right corner */
div.apple_overlay div.close {
background-image:url(http://static.flowplayer.org/tools/img/overlay/overlay_close_IE6.gif);
}
</style>
<![endif]-->
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.tools.min.js" type="text/javascript"></script>
<!--将jQuery引用进来-->
<script type="text/javascript">
$(function (){
$("img[rel]").overlay({effect: 'apple'});
});
</script>
</head>
<body>
<!-- trigger elements -->
<img src="images/0.jpg" height="200" rel="#photo1"/>
<img src="images/1.jpg" height="200" rel="#photo2"/>
<!-- overlay for the first trigger. id matches the rel- attribute -->
<div class="apple_overlay black" id="photo1">
<img src="images/0.jpg" height="400"/>
<div class="details">
<h2>Berlin Gustavohouse</h2>
<p>
The Gustavo House in Storkower Strasse. It was built in 1978 and reconstructed in
1998 by the spanish artist Gustavo.
</p>
</div>
</div>
<!-- overlay for the second trigger -->
<div class="apple_overlay" id="photo2">
<img src="images/1.jpg" height="400"/>
<div class="details">
<h2>Berlin Gustavohouse</h2>
<p>
The Gustavo House in Storkower Strasse. It was built in 1978 and reconstructed in
1998 by the spanish artist Gustavo.
</p>
</div>
</div>
</body>
</html>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
