脚本宝典收集整理的这篇文章主要介绍了js实例教程-jQuery-Tools-overlay 使用介绍，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
代码如下:
<!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 rel="stylesheet" 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 -->
<p id="triggers">
<img src=https://www.2cto.COM/uploaDFile/2018/0605/20180605114001685.jpg" rel="#mies1"/>
<img src=https://www.2cto.com/uploadfile/2018/0605/20180605114002839.jpg" rel="#mies2"/>
</p>
<!-- overlays -->
<p class="simple_overlay" id=";mies1">
<img src=https://www.2cto.com/uploadfile/2018/0605/20180605114002206.jpg" />
<p class="details">
<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>
</p>
</p>
<p class="simple_overlay" id="mies2">
<img src=https://www.2cto.com/uploadfile/2018/0605/20180605114002522.jpg" />
<p class="details">
<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 piders.
</p>
</p>
</p>
<script>
$(document).ready(function() {
$("img[rel]").overlay({
closeOnClick:false,
mask: 'darkred'
});
});
</script>
</body>
</html>
. 代码如下:
/* the overlayed element */
.simple_overlay {
/* must be initially hidden */
display:none;
/* place overlay on top of other elements */
z-index:10000;
/* styling */
background-color:#333;
width:675px;
min-height:200px;
border:1px solid #666;
/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}
/* close button positioned on upper right corner */
.simple_overlay .close {
background-image:url(./close.png);
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}
代码如下:
<!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 rel="stylesheet" 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 -->
<p id="triggers">
<img src=https://www.2cto.com/uploadfile/2018/0605/20180605114001685.jpg" rel="#mies1"/>
<img src=https://www.2cto.com/uploadfile/2018/0605/20180605114002839.jpg" rel="#mies2"/>
</p>
<!-- overlays -->
<p class="simple_overlay" id="mies1">
<img src=https://www.2cto.com/uploadfile/2018/0605/20180605114002206.jpg" />
<p class="details">
<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>
</p>
</p>
<p class="simple_overlay" id="mies2">
<img src=https://www.2cto.com/uploadfile/2018/0605/20180605114002522.jpg" />
<p class="details">
<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 piders.
</p>
</p>
</p>
<script>
$(document).ready(function() {
$("img[rel]").overlay({
closeOnClick:false,
mask: 'darkred'
});
});
</script>
</body>
</html>
. 代码如下:
/* the overlayed element */
.simple_overlay {
/* must be initially hidden */
display:none;
/* place overlay on top of other elements */
z-index:10000;
/* styling */
background-color:#333;
width:675px;
min-height:200px;
border:1px solid #666;
/* CSS3 styling for latest browsers */
-moz-box-shadow:0 0 90px 5px #000;
-webkit-box-shadow: 0 0 90px #000;
}
/* close button positioned on upper right corner */
.simple_overlay .close {
background-image:url(./close.png);
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}
觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的js实例教程-jQuery-Tools-overlay 使用介绍全部内容，希望文章能够帮你解决js实例教程-jQuery-Tools-overlay 使用介绍所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。