<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>jQuery Image Caption Slide - jCapSlide</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="jQuery Image Caption Slide - jCapSlide" />
<meta name="keywords" content="jquery, plugin, image, caption, fancy, sliding" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
<style>
body{
background: #F5FAFB url(bg.png) repeat-x top left;
font-family: arial;
margin:0px;
}
.header{
position:absolute;
top:0px;
left:0px;
width:100%;
height:77px;
}
.header h1{
color:#777;
font-size: 38px;
margin:0px 0px 0px 30px;
font-weight:100;
line-height:80px;
padding:0px;
}
.footer{
width:100%;
margin:10px 0px 5px 0px;
}
a img{
border:none;
outline:none;
}
.ad{
position:absolute;
right:10px;
top:5px;
width:470px;
height:70px;
}
.content{
margin-top:80px;
padding:0px;
bottom:0px;
}
.about{
width:100%;
height:200px;
background-color:#AFD9E4;
border-top:2px solid #fff;
border-bottom:2px solid #fff;
clear:both;
}
.about .text{
width:45%;
margin:5px 2% 10px 2%;
height:180px;
float:left;
color:#444;
font-size: 12px;
text-align:justify;
letter-spacing:0px;
}
.about .text h1{
border-bottom: 1px dashed #fff;
color:#fff;
}
.demo{
float:left;
}
</style>
</head>
<body>
<div class="header">
<h1>jCapSlide</h1>
</div>
<div class="content">
<div class="demo">
<div id="capslide_img_cont6" class="ic_container">
<img src="images/example2.jpg" width="180" height="240" alt=""/>
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<p class="ic_category">Category</p>
<h3>Amazing Image Title</h3>
<p class="ic_text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="demo">
<div id="capslide_img_cont7" class="ic_container">
<img src="images/example1.jpg" width="180" height="240" alt=""/>
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<p class="ic_category">Category</p>
<h3>Amazing Image Title</h3>
<p class="ic_text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="demo">
<div id="capslide_img_cont8" class="ic_container">
<img src="images/example7.jpg" width="180" height="240" alt=""/>
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<p class="ic_category">Category</p>
<h3>Amazing Image Title</h3>
<p class="ic_text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="demo">
<div id="capslide_img_cont9" class="ic_container">
<img src="images/example8.jpg" width="180" height="240" alt=""/>
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<p class="ic_category">Category</p>
<h3>Amazing Image Title</h3>
<p class="ic_text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="demo">
<div id="capslide_img_cont10" class="ic_container">
<img src="images/example9.jpg" width="180" height="240" alt=""/>
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<p class="ic_category">Category</p>
<h3>Amazing Image Title</h3>
<p class="ic_text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div style="clear:both;"></div>
<div class="demo">
<div id="capslide_img_cont" class="ic_container">
<img src="images/example.jpg" width="240" height="180" alt=""/>
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<p class="ic_category">Category</p>
<h3>Amazing Image Title</h3>
<p class="ic_text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="demo">
<div id="capslide_img_cont2" class="ic_container">
<img src="images/example3.jpg" width="240" height="180" alt=""/>
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<p class="ic_category">Category</p>
<h3>Amazing Image Title</h3>
<p class="ic_text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="demo">
<div id="capslide_img_cont3" class="ic_container">
<img src="images/example4.jpg" width="240" height="180" alt=""/>
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
jQuery插件 实现图片文字遮罩效果
4星 · 超过85%的资源 需积分: 10 188 浏览量
2010-07-02
09:39:47
上传
评论
收藏 386KB ZIP 举报 
jCapSlide(jQuery插件--图片文字遮罩说明).zip （19个子文件） 
css 
style.css 957B jquery.capSlide.js 2KB images 
example.jpg 5KB example6.jpg 8KB example4.jpg 8KB example7.JPG 62KB example10.JPG 34KB example9.JPG 41KB example2.jpg 12KB example12.JPG 63KB example11.JPG 37KB example5.jpg 7KB example3.jpg 5KB example1.jpg 7KB example8.JPG 68KB jquery-1.3.2.js 118KB
bg.png 4KB
jCapSlide.html 17KB codrops_back.png 10KB
- 1
- 2
前往页