摘要:代码如下:<!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>

脚本宝典收集整理的这篇文章主要介绍了

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>

CSS

. 代码如下:

/* 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;
}

关闭的css的命名: xxx .close。

代码如下:

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

CSS

. 代码如下:

/* 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;
}

关闭的css的命名: xxx .close。

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-jQuery-Tools-overlay 使用介绍

全部内容,希望文章能够帮你解决

js实例教程-jQuery-Tools-overlay 使用介绍

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过