<!DOCTYPE html>
<html>
<head>
<title>jQuery Tools standalone demo</title>
<!-- include the Tools -->
<script src="https://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<!-- standalone page styling (can be removed) -->
<link type="text/css"
href="./overlay-basic.css"/>
<style>
/* some styling for triggers */
#triggers {
text-align:center;
}
#triggers img {
cursor:pointer;
margin:0 5px;
background-color:#fff;
border:1px solid #ccc;
padding:2px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
/* styling for elements inside overlay */
.details {
position:absolute;
top:15px;
right:15px;
font-size:11px;
color:#fff;
width:150px;
}
.details h3 {
color:#aba;
font-size:15px;
}
</style>
</head>
<body><!-- trigger elements -->
<div>
<img src="https://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg"/>
<img src="https://farm4.static.flickr.com/3346/3449388113_71a06b8548_m.jpg"/>
</div>
<!-- overlays -->
<div>
<img src="https://farm4.static.flickr.com/3651/3445879840_7ca4b491e9.jpg" />
<div>
<h3>The Barcelona Pavilion</h3>
<h4>Barcelona, Spain</h4>
<p>
The Barcelona Pavilion, designed by Ludwig Mies van der Rohe,
was the German Pavilion for the 1929 International Exposition in
Barcelona, Spain. It was an important building in the history of
modern architecture.
</p>
<p>
Several critics, historians and modernists have declared it "the
most beautiful building of the century"
</p>
</div>
</div>
<div>
<img src="https://farm4.static.flickr.com/3346/3449388113_71a06b8548.jpg" />
<div>
<h3>The Barcelona Pavilion</h3>
<h4>Barcelona, Spain</h4>
<p>
Another unique feature of this building is the <em>exotic
materials Mies chose to use</em>.
</p>
<p>
Plates of high-grade stone materials like veneers of Tinos verde
antico marble and golden onyx as well as tinted glass of grey,
green, white, in addition to translucent glass, perform
exclusively as spatial dividers.
</p>
</div>
</div>
<script>
$(document).ready(function() {
$("img[rel]").overlay({
closeOnClick:false,
mask: 'darkred'
});
});
</script>
</body>
</html>
overlay 使用介绍
内容版权声明：除非注明，否则皆为本站原创文章。