以下是 jQuery+CSS3波浪形相册展示特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>波浪形jQuery相册展示效果</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Wave Display Effect with jQuery and CSS3" />
<meta name="keywords" content="sinusoid, sine curve, jquery, thumbnails, portfolio, wave, images, css3, rotation, transform" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />-->
<script id="fullscreenTmpl" type="text/x-jquery-tmpl">
<div id="wd-overlay" class="wd-overlay">
<div class="wd-element">
<span class="wd-close">x close</span>
<div class="wd-nav">
<span class="wd-nav-next">Next</span>
<span class="wd-nav-prev">Previous</span>
</div>
<img src="${source}" />
<div class="wd-info">
<div class="wd-info-title">
{{html title}}
</div>
<div class="wd-info-desc">
{{html description}}
</div>
</div>
</div>
</div>
</script>
</head>
<body>
<div class="container">
<div class="header">
<div class="clr"></div>
</div>
<h1>Wave Display Effect <span>with jQuery and CSS3</span></h1>
<div class="more">
<a href="index.html" class="current">Default Demo</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
</div>
<div id="wd-wrapper" class="wd-wrapper">
<div class="wd-slider"></div>
<div class="wd-scroll-wrapper">
<div class="wd-container">
<div class="wd-element">
<img src="images/1.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Beautiful Serendipity</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/2.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Lovely Scenery</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/3.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Lucid Dream</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/4.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Unconditional Love</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/5.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Great Design</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/6.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Wicket Decision</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/7.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Unknown Future</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/8.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Flying Horses</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/9.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Winds of Change</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/10.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Blue Monday</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/11.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Warm Ocean</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/12.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>White Snow</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/13.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Incredible Greatness</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/14.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Unlimited Wisdom</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/15.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Free Ride</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/16.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Nightingale</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/17.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Red Storm</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/18.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Strong Hope</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/19.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Touching Words</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/20.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Everlasting Truth</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/21.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Sinful Touch</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/22.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Black Day</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/23.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Lasting Friendship</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/24.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>True Trust</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/25.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Silent Dawn</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/26.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Green Sunset</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/27.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Nice Shot</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/28.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Lovely Rain</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/29.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Romantic Scent</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/30.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Beautiful Serendipity</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/1.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Beautiful Serendipity</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/2.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Lovely Scenery</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/3.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Lucid Dream</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/4.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Unconditional Love</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/5.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Great Design</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/6.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Wicket Decision</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/7.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Unknown Future</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/8.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Flying Horses</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/9.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Winds of Change</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/10.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Blue Monday</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/11.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Warm Ocean</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/12.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>White Snow</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/13.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Incredible Greatness</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.sinusoid.js"></script>
<script type="text/javascript">
$(function() {
$('#wd-wrapper').sinusoid();
});
</script>
</body>
</html>
HTML代码(index2.html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>波浪形jQuery相册展示效果</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Wave Display Effect with jQuery and CSS3" />
<meta name="keywords" content="sinusoid, sine curve, jquery, thumbnails, portfolio, wave, images, css3, rotation, transform" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis' rel='stylesheet' type='text/css' />-->
<script id="fullscreenTmpl" type="text/x-jquery-tmpl">
<div id="wd-overlay" class="wd-overlay">
<div class="wd-element">
<span class="wd-close">x close</span>
<div class="wd-nav">
<span class="wd-nav-next">Next</span>
<span class="wd-nav-prev">Previous</span>
</div>
<img src="${source}" />
<div class="wd-info">
<div class="wd-info-title">
{{html title}}
</div>
<div class="wd-info-desc">
{{html description}}
</div>
</div>
</div>
</div>
</script>
</head>
<body>
<div class="container">
<div class="header">
<span class="right">
</span>
<div class="clr"></div>
</div>
<h1>Wave Display Effect <span>with jQuery and CSS3</span></h1>
<div class="more">
<a href="index.html">Default Demo</a>
<a href="index2.html" class="current">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
</div>
<div id="wd-wrapper" class="wd-wrapper">
<div class="wd-slider"></div>
<div class="wd-scroll-wrapper">
<div class="wd-container">
<div class="wd-element">
<img src="images/1.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Beautiful Serendipity</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/2.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Lovely Scenery</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/3.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Lucid Dream</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/4.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Unconditional Love</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/5.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Great Design</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/6.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Wicket Decision</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/7.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Unknown Future</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/8.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Flying Horses</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/9.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Winds of Change</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/10.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Blue Monday</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/11.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Warm Ocean</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/12.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>White Snow</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/13.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Incredible Greatness</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/14.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Unlimited Wisdom</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/15.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Free Ride</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/16.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Nightingale</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/17.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Red Storm</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/18.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Strong Hope</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/19.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Touching Words</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/20.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Everlasting Truth</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/21.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Sinful Touch</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/22.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Black Day</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/23.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Lasting Friendship</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/24.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>True Trust</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/25.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Silent Dawn</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/26.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Green Sunset</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/27.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Nice Shot</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/28.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Lovely Rain</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/29.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Romantic Scent</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/30.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Beautiful Serendipity</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/1.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Beautiful Serendipity</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/2.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Lovely Scenery</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/3.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Lucid Dream</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/4.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Unconditional Love</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/5.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Great Design</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/6.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Wicket Decision</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/7.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Unknown Future</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/8.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Flying Horses</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/9.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Winds of Change</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/10.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Blue Monday</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/11.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Warm Ocean</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/12.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>White Snow</h2>
</div>
<div class="wd-info-desc">
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
<p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents.</p>
</div>
</div>
</div>
<div class="wd-element">
<img src="images/13.jpg" />
<div class="wd-info">
<div class="wd-info-title">
<h2>Incredible Greatness</h2>
</div>
<div class="wd-info-desc">
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.sinusoid.js"></script>
<script type="text/javascript">
$(function() {
$('#wd-wrapper').sinusoid({
minImgW : 80,
maxImgW : 130,
minImgAngle : -20,
maxImgAngle : 20,
leftFactor : 60,
sinusoidFunction : {
A : 70,
T : 1700,
P : 0
}
});
});
</script>
</body>
</html>
JS代码(jquery.tmpl.min.js):
(function(a){
var r=a.fn.domManip,d="_tmplitem",q=/^[^<]*(<[\w\W]+>)[^>]*$|\{
\{
\! /,b={
}
,f={
}
,e,p={
key:0,data:{
}
}
,h=0,c=0,l=[];
function g(e,d,g,i){
var c={
data:i||(d?d.data:{
}
),_wrap:d?d._wrap:null,tmpl:null,parent:d||null,nodes:[],calls:u,nest:w,wrap:x,html:v,update:t}
;
e&&a.extend(c,e,{
nodes:[],parent:d}
);
if(g){
c.tmpl=g;
c._ctnt=c._ctnt||c.tmpl(a,c);
c.key=++h;
(l.length?f:b)[h]=c}
return c}
a.each({
appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"}
,function(f,d){
a.fn[f]=function(n){
var g=[],i=a(n),k,h,m,l,j=this.length===1&&this[0].parentNode;
e=b||{
}
;
if(j&&j.nodeType===11&&j.childNodes.length===1&&i.length===1){
i[d](this[0]);
g=this}
else{
for(h=0,m=i.length;
h<m;
h++){
c=h;
k=(h>0?this.clone(true):this).get();
a.fn[d].apply(a(i[h]),k);
g=g.concat(k)}
c=0;
g=this.pushStack(g,f,i.selector)}
l=e;
e=null;
a.tmpl.complete(l);
return g}
}
);
a.fn.extend({
tmpl:function(d,c,b){
return a.tmpl(this[0],d,c,b)}
,tmplItem:function(){
return a.tmplItem(this[0])}
,template:function(b){
return a.template(b,this[0])}
,domManip:function(d,l,j){
if(d[0]&&d[0].nodeType){
var f=a.makeArray(arguments),g=d.length,i=0,h;
while(i<g&&!(h=a.data(d[i++],"tmplItem")));
if(g>1)f[0]=[a.makeArray(d)];
if(h&&c)f[2]=function(b){
a.tmpl.afterManip(this,b,j)}
;
r.apply(this,f)}
else r.apply(this,arguments);
c=0;
!e&&a.tmpl.complete(b);
return this}
}
);
a.extend({
tmpl:function(d,h,e,c){
var j,k=!c;
if(k){
c=p;
d=a.template[d]||a.template(null,d);
f={
}
}
else if(!d){
d=c.tmpl;
b[c.key]=c;
c.nodes=[];
c.wrapped&&n(c,c.wrapped);
return a(i(c,null,c.tmpl(a,c)))}
if(!d)return[];
if(typeof h==="function")h=h.call(c||{
}
);
e&&e.wrapped&&n(e,e.wrapped);
j=a.isArray(h)?a.map(h,function(a){
return a?g(e,c,d,a):null}
):[g(e,c,d,h)];
return k?a(i(c,null,j)):j}
,tmplItem:function(b){
var c;
if(b instanceof a)b=b[0];
while(b&&b.nodeType===1&&!(c=a.data(b,"tmplItem"))&&(b=b.parentNode));
return c||p}
,template:function(c,b){
if(b){
if(typeof b==="string")b=o(b);
else if(b instanceof a)b=b[0]||{
}
;
if(b.nodeType)b=a.data(b,"tmpl")||a.data(b,"tmpl",o(b.innerHTML));
return typeof c==="string"?(a.template[c]=b):b}
return c?typeof c!=="string"?a.template(null,c):a.template[c]||a.template(null,q.test(c)?c:a(c)):null}
,encode:function(a){
return(""+a).split("<").join("<
").split(">").join(">
").split('"').join(""
").split("'").join("'
")}
}
);
a.extend(a.tmpl,{
tag:{
tmpl:{
_default:{
$2:"null"}
,open:"if($notnull_1){
_=_.concat($item.nest($1,$2));
}
"}
,wrap:{
_default:{
$2:"null"}
,open:"$item.calls(_,$1,$2);
_=[];
",close:"call=$item.calls();
_=call._.concat($item.wrap(call,_));
"}
,each:{
_default:{
$2:"$index,$value"}
,open:"if($notnull_1){
$.each($1a,function($2){
with(this){
",close:"}
}
);
}
"}
,"if":{
open:"if(($notnull_1) && $1a){
",close:"}
"}
,"else":{
_default:{
$1:"true"}
,open:"}
else if(($notnull_1) && $1a){
"}
,html:{
open:"if($notnull_1){
_.push($1a);
}
"}
,"=":{
_default:{
$1:"$data"}
,open:"if($notnull_1){
_.push($.encode($1a));
}
"}
,"!":{
open:""}
}
,complete:function(){
b={
}
}
,afterManip:function(f,b,d){
var e=b.nodeType===11?a.makeArray(b.childNodes):b.nodeType===1?[b]:[];
d.call(f,b);
m(e);
c++}
}
);
function i(e,g,f){
var b,c=f?a.map(f,function(a){
return typeof a==="string"?e.key?a.replace(/(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g,"$1 "+d+'="'+e.key+'" $2'):a:i(a,e,a._ctnt)}
):e;
if(g)return c;
c=c.join("");
c.replace(/^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/,function(f,c,e,d){
b=a(e).get();
m(b);
if(c)b=j(c).concat(b);
if(d)b=b.concat(j(d))}
);
return b?b:j(c)}
function j(c){
var b=document.createElement("div");
b.innerHTML=c;
return a.makeArray(b.childNodes)}
function o(b){
return new Function("jQuery","$item","var $=jQuery,call,_=[],$data=$item.data;
with($data){
_.push('"+a.trim(b).replace(/([\\'])/g,"\\$1").replace(/[\r\t\n]/g," ").replace(/\$\{
([^\}
]*)\}
/g,"{
{
= $1}
}
").replace(/\{
\{
(\/?)(\w+|.)(?:\(((?:[^\}
]|\}
(?!\}
))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}
]|\}
(?!\}
))*?)\))?\s*\}
\}
/g,function(m,l,j,d,b,c,e){
var i=a.tmpl.tag[j],h,f,g;
if(!i)throw"Template command not found:"+j;
h=i._default||[];
if(c&&!/\w$/.test(b)){
b+=c;
c=""}
if(b){
b=k(b);
e=e?","+k(e)+")":c?")":"";
f=c?b.indexOf(".")>-1?b+c:"("+b+").call($item"+e:b;
g=c?f:"(typeof("+b+")==='function'?("+b+").call($item):("+b+"))"}
else g=f=h.$1||"null";
d=k(d);
return"');
"+i[l?"close":"open"].split("$notnull_1").join(b?"typeof("+b+")!=='undefined' && ("+b+")!=null":"true").split("$1a").join(g).split("$1").join(f).split("$2").join(d?d.replace(/\s*([^\(]+)\s*(\((.*?)\))?/g,function(d,c,b,a){
a=a?","+a+")":b?")":"";
return a?"("+c+").call($item"+a:d}
):h.$2||"")+"_.push('"}
)+"');
}
return _;
")}
function n(c,b){
c._wrap=i(c,true,a.isArray(b)?b:[q.test(b)?b:a(b).html()]).join("")}
function k(a){
return a?a.replace(/\\'/g,"'").replace(/\\\\/g,"\\"):null}
function s(b){
var a=document.createElement("div");
a.appendChild(b.cloneNode(true));
return a.innerHTML}
function m(o){
var n="_"+c,k,j,l={
}
,e,p,i;
for(e=0,p=o.length;
e<p;
e++){
if((k=o[e]).nodeType!==1)continue;
j=k.getElementsByTagName("*");
for(i=j.length-1;
i>=0;
i--)m(j[i]);
m(k)}
function m(j){
var p,i=j,k,e,m;
if(m=j.getAttribute(d)){
while(i.parentNode&&(i=i.parentNode).nodeType===1&&!(p=i.getAttribute(d)));
if(p!==m){
i=i.parentNode?i.nodeType===11?0:i.getAttribute(d)||0:0;
if(!(e=b[m])){
e=f[m];
e=g(e,b[i]||f[i],null,true);
e.key=++h;
b[h]=e}
c&&o(m)}
j.removeAttribute(d)}
else if(c&&(e=a.data(j,"tmplItem"))){
o(e.key);
b[e.key]=e;
i=a.data(j.parentNode,"tmplItem");
i=i?i.key:0}
if(e){
k=e;
while(k&&k.key!=i){
k.nodes.push(j);
k=k.parent}
delete e._ctnt;
delete e._wrap;
a.data(j,"tmplItem",e)}
function o(a){
a=a+n;
e=l[a]=l[a]||g(e,b[e.parent.key+n]||e.parent,null,true)}
}
}
function u(a,d,c,b){
if(!a)return l.pop();
l.push({
_:a,tmpl:d,item:this,data:c,options:b}
)}
function w(d,c,b){
return a.tmpl(a.template(d),c,b,this)}
function x(b,d){
var c=b.options||{
}
;
c.wrapped=d;
return a.tmpl(a.template(b.tmpl),b.data,c,b.item)}
function v(d,c){
var b=this._wrap;
return a.map(a(a.isArray(b)?b.join(""):b).filter(d||"*"),function(a){
return c?a.innerText||a.textContent:a.outerHTML||s(a)}
)}
function t(){
var b=this.nodes;
a.tmpl(null,null,null,this).insertBefore(b[0]);
a(b).remove()}
}
)(jQuery)CSS代码(demo.css):
@import url('reset.css');/* General Demo Style */
body{background:#d2e0e8 url(../images/wave.jpg) repeat top left;color:#000;font-family:'Arial Narrow',Arial,sans-serif;font-size:13px;}
a{color:#000;text-decoration:none;}
.clr{clear:both;}
h1{padding:20px 0px 5px 20px;font-size:38px;color:#333;font-family:'Terminal Dosis',Georgia,serif;font-weight:400;text-shadow:1px 1px 1px #fff;float:left;}
h1 span{font-size:20px;color:#3b7ca1;}
.more{font-family:'Terminal Dosis',Georgia,serif;font-size:13px;color:#444;float:left;clear:both;position:relative;z-index:99999;padding:5px 20px 0px 20px;}
.more p{display:block;margin:10px;}
.more a{color:#666;white-space:nowrap;background:#fff;padding:1px 6px;-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);box-shadow:1px 1px 2px rgba(0,0,0,0.2);}
.more a.current,.more a.current:hover{color:#fff;background:#000;}
.more a:hover{background-color:#3b7ca1;color:#fff;}
/* Header Style */
.header{line-height:24px;font-size:11px;background:#000;opacity:0.9;text-transform:uppercase;z-index:9999;position:relative;-moz-box-shadow:1px 0px 2px #000;-webkit-box-shadow:1px 0px 2px #000;box-shadow:1px 0px 2px #000;}
.header a{padding:0px 10px;letter-spacing:1px;color:#ddd;display:block;float:left;}
.header a:hover{color:#fff;}
.header span.right{float:right;}
.header span.right a{float:none;display:inline;}
CSS代码(style.css):
.wd-wrapper{position:absolute;top:130px;bottom:30px;left:0px;right:0px;}
.wd-scroll-wrapper{width:100%;height:100%;overflow:hidden;}
.wd-container{position:relative;}
.wd-element{width:300px;height:200px;position:absolute;background:#000 url(../images/eye.png) no-repeat center center;cursor:pointer;overflow:hidden;font-family:'Terminal Dosis',Georgia,serif;}
.wd-overlay{position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:999;display:none;background:transparent url(../images/black.png) repeat top left;}
.wd-overlay .wd-element{width:800px;height:400px;background:#3b7ca1;top:50%;left:50%;margin:-200px 0 0 -400px;overflow:visible;cursor:default;opacity:0.8;-moz-box-shadow:1px 1px 8px rgba(0,0,0,0.3);-webkit-box-shadow:1px 1px 8px rgba(0,0,0,0.3);box-shadow:1px 1px 8px rgba(0,0,0,0.3);border:10px solid rgba(0,0,0,0.3);}
.wd-overlay .wd-element > img{-moz-box-shadow:1px 1px 3px rgba(0,0,0,0.6);-webkit-box-shadow:1px 1px 3px rgba(0,0,0,0.6);box-shadow:1px 1px 3px rgba(0,0,0,0.6);}
.wd-element > img{width:100%;position:absolute;top:0px;left:0px;}
.wd-element-medium > img{-webkit-transition:opacity 0.2s ease-in-out;-moz-transition:opacity 0.2s ease-in-out;-o-transition:opacity 0.2s ease-in-out;-ms-transition:opacity 0.2s ease-in-out;transition:opacity 0.2s ease-in-out;}
.wd-overlay .wd-element > img{width:auto;margin:20px 20px 5px 20px;position:relative;float:left;}
.wd-info-title{position:absolute;background:transparent url(../images/black.png) repeat top left;overflow:hidden;}
.wd-element-small .wd-info{display:none;}
.wd-element-medium .wd-info-title{bottom:0px;left:0px;width:100%;}
.wd-overlay .wd-element .wd-info-title{left:240px;bottom:auto;top:30px;width:560px;}
.wd-info-title h2{padding:10px;color:#fff;font-size:16px;line-height:20px;}
.wd-overlay .wd-element .wd-info-title h2{font-size:36px;line-height:40px;text-shadow:1px 1px 1px #000;}
.wd-info-desc{display:none;}
.wd-overlay .wd-element .wd-info-desc{display:block;color:#fff;margin-top:110px;line-height:32px;font-size:18px;padding:0 30px 20px 20px;}
.wd-element-medium:hover > img{opacity:0.4;}
.wd-element-medium:hover .wd-info-title{bottom:-40px;}
.wd-zoom-out{width:40px;height:40px;position:absolute;top:-40px;right:0px;background:transparent url(../images/zoom-out.png) no-repeat top left;opacity:0.7;cursor:pointer;z-index:100;text-indent:-9000px;}
.wd-zoom-out:hover{opacity:1;}
.wd-close{background:#000;color:white;text-transform:uppercase;position:absolute;top:5px;right:5px;cursor:pointer;padding:2px 5px;opacity:0.6;}
.wd-close:hover{opacity:1;}
.wd-nav span{position:absolute;width:36px;height:100%;background:#000 url(../images/nav.png) no-repeat center left;top:0px;left:-46px;text-indent:-9000px;opacity:0.4;cursor:pointer;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}
.wd-nav span.wd-nav-next{background-position:center right;left:auto;right:-46px;}
.wd-nav span:hover{opacity:0.9;width:46px;}
.wd-slider{width:400px;left:50%;margin-left:-200px;position:absolute;bottom:0px;}
.wd-slider.ui-slider-horizontal{height:10px;border:none;background:transparent url(../images/track.png) repeat-x top left;border:none;}
.wd-slider.ui-slider-horizontal .ui-slider-handle.ui-state-default,.wd-slider.ui-slider-horizontal .ui-slider-handle.ui-state-hover{border:none;background:transparent url(../images/drag.png) no-repeat center center;width:26px;height:28px;outline:none;margin-left:-13px;margin-top:-5px;}
分享到QQ
分享到微博
微信扫一扫
