js特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Fredoka+One|Open+Sans:400,700' rel='stylesheet' type='text/css'>

2. 引入JS

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="js/jquery.smooth-scroll.min.js"></script>
<script src="js/lightbox.js"></script>

3. HTML代码

<div id="sidebar">
	<h1 class="logo"><a href="http://51qianduan.com/">Lightbox<em>2</em></a></h1>
	<ul id="nav">
		<li><a href="#example" class="first">Example</a></li>
		<li><a href="#how">How to Use</a></li>
	</ul>
</div>
<div id="content">
<div class="section" id="overview">
</div>
<hr />
<div class="section" id="example">
	<h2>Examples</h2>
	<h3>Single image</h3>
  <div class="imageRow">
  	<div class="single">
  		<a href="images/examples/image-1.jpg" rel="lightbox"><img src="images/examples/thumb-1.jpg" alt="" /></a>
  	</div>
  	<div class="single">
  		<a href="images/examples/image-2.jpg" rel="lightbox" title="Optional caption."><img src="images/examples/thumb-2.jpg" alt="" /></a>
  	</div>
  </div>
	<h3 style="clear: both;">Image set</h3>
  <div class="imageRow">
  	<div class="set">
  	  <div class="single first">
  		  <a href="images/examples/image-3.jpg" rel="lightbox[plants]" title="Click on the right side of the image to move forward."><img src="images/examples/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb" /></a>
  		</div>
      <div class="single">
  		  <a href="images/examples/image-4.jpg" rel="lightbox[plants]" title="Alternately you can press the right arrow key." ><img src="images/examples/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb" /></a>
      </div>
      <div class="single">
  		  <a href="images/examples/image-5.jpg" rel="lightbox[plants]" title="The script preloads the next image in the set as you're viewing."><img src="images/examples/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb" /></a>
      </div>
      <div class="single last">
  		  <a href="images/examples/image-6.jpg" rel="lightbox[plants]" title="Click the X or anywhere outside the image to close"><img src="images/examples/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb" /></a>
      </div>
  	</div>
  </div>
</div>
<hr />
<div class="section" id="download">
<div class="section" id="how">
	<h2>How to use</h2>
	<h3>Part 1 - Setup</h3>
	<ol>
		<li>Lightbox 2 uses the <a href="http://51qianduan.com/">jQuery</a> framework. Load jQuery and the Lightbox javascript files in the proper order.
<pre><code>&lt;script src=&quot;js/jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/lightbox.js&quot;&gt;&lt;/script&gt;
</code></pre>
		</li>
		<li>Include the Lightbox CSS file.
<pre><code>&lt;link href=&quot;css/lightbox.css&quot; rel=&quot;stylesheet&quot; /&gt;
</code></pre>
		</li>
		<li>Check the CSS and make sure the referenced <code>prev.png</code> and <code>next.png</code> files are in the right location. Also, make sure the <code>loading.gif</code> and <code>close.png</code> files as referenced near the top of the <code>lightbox.js</code> file are in the right location.</li>
	</ol>
	<h3>Part 2 - Activate</h3>
	<ol>
		<li>Add a <code>rel="lightbox"</code> attribute to any link tag to activate Lightbox.
<pre><code>&lt;a href=&quot;images/image-1.jpg&quot; rel=&quot;lightbox&quot; title=&quot;my caption&quot;&gt;image #1&lt;/a&gt;
</code></pre>
		<em>Optional: </em>Use the <code>title</code> attribute if you want to show a caption.		</li>
		<li>If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. 
<pre><code>&lt;a href=&quot;images/image-1.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #1&lt;/a&gt;
&lt;a href=&quot;images/image-2.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #2&lt;/a&gt;
&lt;a href=&quot;images/image-3.jpg&quot; rel=&quot;lightbox[roadtrip]&quot;&gt;image #3&lt;/a&gt;
</code></pre>
	No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!</li>
	</ol>	
</div>
<hr />
</div><!-- end #content -->
<script>
  jQuery(document).ready(function($) {
      $('a').smoothScroll({
        speed: 1000,
        easing: 'easeInOutCubic'
      });
      $('.showOlderChanges').on('click', function(e){
        $('.changelog .old').slideDown('slow');
        $(this).fadeOut();
        e.preventDefault();
      })
  });
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-2196019-1']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>