返回
首页
业界
电商
创业
访谈
手机
移动
报告
运营
建站
互联网+
系统
教程
搜索

jQuery-Tools-overlay 使用介绍

2020-05-22 16:48:15易采站长站整理


<!DOCTYPE html>
<html>
<head>
<title>jQuery Tools standalone demo</title>
<!– include the Tools –>
<script src=”http://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 –>
<div id=”triggers”>
<img src=”http://huoche.7234.cn/images/jb51/itdnzcaprwy.jpg” rel=”#mies1″/>
<img src=”http://huoche.7234.cn/images/jb51/iotexxscul4.jpg” rel=”#mies2″/>
</div>
<!– overlays –>
<div class=”simple_overlay” id=”mies1″>
<img src=”http://huoche.7234.cn/images/jb51/tgjimhhaw5q.jpg” />
<div 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>
</div>
</div>
<div class=”simple_overlay” id=”mies2″>
<img src=”http://huoche.7234.cn/images/jb51/3znkdkkpn0g.jpg” />
<div 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 dividers.
</p>
</div>
</div>
<script>
$(document).ready(function() {
$(“img[rel]”).overlay({
closeOnClick:false,
mask: ‘darkred’
});
});
</script>

相关文章 大家在看