js特效之上下翻页相册效果

Posted MrWwwu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js特效之上下翻页相册效果相关的知识，希望对你有一定的参考价值。

//html部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head><script>window.open(‘http://www.2345.com/?k38279370‘,‘网页特效‘,‘toolbar=no,status=no,scrollbars=yes,left=100,top=50,width=250,height=50‘)</script>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    

    <title>Demo for - ‘Create a unique Gallery by using z-index and jQuery‘</title>

    

    <link rel="stylesheet" type="text/css" media="screen" href="css/reset.css" />

    <link rel="stylesheet" type="text/css" media="screen" href="css/960.css" />

    <link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />

    

    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

    <script type="text/javascript" src="js/demo.js"></script>

  </head>

  

  <body>

    <div class="container_12" id="wrapper">

      <div class="grid_8" id="content"><br /><br /><br /><br /><br /><br /><br />

       

        <!-- relevant for the tutorial - start -->

        <div class="grid_6 prefix_1 suffix_1" id="gallery">

          <div id="pictures">

            <img src="images/picture1.png" alt=""/>

            <img src="images/picture2.png" alt="" />

            <img src="images/picture3.png" alt="" />

            <img src="images/picture4.png" alt="" />

            <img src="images/picture5.png" alt="" />

          </div>

          

          <div class="grid_3 alpha" id="prev">

            <a href="#previous">&laquo; Pre</a>

          </div>

          <div class="grid_3 omega" id="next">

            <a href="#next">Next &raquo;</a>

          </div>

        </div>

        <!-- relevant for the tutorial - end -->

 

        

        <div class="clear"></div> <p></p>

      </div>

      

      <div class="grid_4" id="sidebar">

        <ul>

          <li>

            <h2>What‘s that?</h2>

          </li>

          <li>

            <h2>It‘s my object !</h2>

          </li>

        </ul>

      </div>

      <div class="clear"></div>

    </div>

  </body>

</html>

//reset.css我就不上传了  大家应该都有

//960.css内容如下 主要是对宽度以及定位的一些界定让整个画面具有统一性

　　

 

.container_12,.container_16{margin-left:auto;margin-right:auto;width:960px}

 

.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12,.grid_13,.grid_14,.grid_15,.grid_16{display:inline;float:left;margin-left:10px;margin-right:10px}

 

.container_12 .grid_3,.container_16 .grid_4{width:220px}

 

.container_12 .grid_6,.container_16 .grid_8{width:460px}

 

.container_12 .grid_9,.container_16 .grid_12{width:700px}

 

.container_12 .grid_12,.container_16 .grid_16{width:940px}

 

.alpha{margin-left:0}.omega{margin-right:0}

 

.container_12 .grid_1{width:60px}

 

.container_12 .grid_2{width:140px}

 

.container_12 .grid_4{width:300px}

 

.container_12 .grid_5{width:380px}

 

.container_12 .grid_7{width:540px}

 

.container_12 .grid_8{width:620px}

 

.container_12 .grid_10{width:780px}

 

.container_12 .grid_11{width:860px}

 

.container_16 .grid_1{width:40px}

 

.container_16 .grid_2{width:100px}

 

.container_16 .grid_3{width:160px}

 

.container_16 .grid_5{width:280px}

 

.container_16 .grid_6{width:340px}

 

.container_16 .grid_7{width:400px}

 

.container_16 .grid_9{width:520px}

 

.container_16 .grid_10{width:580px}

 

.container_16 .grid_11{width:640px}

 

.container_16 .grid_13{width:760px}

 

.container_16 .grid_14{width:820px}

 

.container_16 .grid_15{width:880px}

 

.container_12 .prefix_3,.container_16 .prefix_4{padding-left:240px}

 

.container_12 .prefix_6,.container_16 .prefix_8{padding-left:480px}

 

.container_12 .prefix_9,.container_16 .prefix_12{padding-left:720px}

 

.container_12 .prefix_1{padding-left:80px}

 

.container_12 .prefix_2{padding-left:160px}

 

.container_12 .prefix_4{padding-left:320px}

 

.container_12 .prefix_5{padding-left:400px}

 

.container_12 .prefix_7{padding-left:560px}

 

.container_12 .prefix_8{padding-left:640px}

 

.container_12 .prefix_10{padding-left:800px}

 

.container_12 .prefix_11{padding-left:880px}

 

.container_16 .prefix_1{padding-left:60px}

 

.container_16 .prefix_2{padding-left:120px}

 

.container_16 .prefix_3{padding-left:180px}

 

.container_16 .prefix_5{padding-left:300px}

 

.container_16 .prefix_6{padding-left:360px}

 

.container_16 .prefix_7{padding-left:420px}

 

.container_16 .prefix_9{padding-left:540px}

 

.container_16 .prefix_10{padding-left:600px}

 

.container_16 .prefix_11{padding-left:660px}

 

.container_16 .prefix_13{padding-left:780px}

 

.container_16 .prefix_14{padding-left:840px}

 

.container_16 .prefix_15{padding-left:900px}

 

.container_12 .suffix_3,.container_16 .suffix_4{padding-right:240px}

 

.container_12 .suffix_6,.container_16 .suffix_8{padding-right:480px}

 

.container_12 .suffix_9,.container_16 .suffix_12{padding-right:720px}

 

.container_12 .suffix_1{padding-right:80px}

 

.container_12 .suffix_2{padding-right:160px}

 

.container_12 .suffix_4{padding-right:320px}

 

.container_12 .suffix_5{padding-right:400px}

 

.container_12 .suffix_7{padding-right:560px}

 

.container_12 .suffix_8{padding-right:640px}

 

.container_12 .suffix_10{padding-right:800px}

 

.container_12 .suffix_11{padding-right:880px}

 

.container_16 .suffix_1{padding-right:60px}

 

.container_16 .suffix_2{padding-right:120px}

 

.container_16 .suffix_3{padding-right:180px}

 

.container_16 .suffix_5{padding-right:300px}

 

.container_16 .suffix_6{padding-right:360px}

 

.container_16 .suffix_7{padding-right:420px}

 

.container_16 .suffix_9{padding-right:540px}

 

.container_16 .suffix_10{padding-right:600px}

 

.container_16 .suffix_11{padding-right:660px}

 

.container_16 .suffix_13{padding-right:780px}

 

.container_16 .suffix_14{padding-right:840px}

 

.container_16 .suffix_15{padding-right:900px}

 

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}

 

.clearfix:after{clear:both;content:‘.‘;display:block;visibility:hidden;height:0}

 

.clearfix{display:inline-block}

 

* html .clearfix{height:1%}.clearfix{display:block}

//main.css的内容如下  主要是对一些小的方面进行深度的调控

html { font-size: 16px; min-height: 100%; margin-bottom: 1px; }

body { font-size: 62.5%; font-family: Verdana, Arial, sans-serif; color: #555555; background: #22384d url(../images/bg.jpg) repeat-x; }

a { color: #0F67A1; text-decoration: none; }

a:hover { text-decoration: underline; }

 

#wrapper { background: white url(../images/sidebar_bg.jpg) repeat-y top right; }

 

#content { }

  #content h1 { font-size: 2.4em; font-weight: normal; line-height: 32px; margin: 30px 0 50px 0; }

  #content p { font-size: 1.4em; line-height: 22px; margin-bottom: 20px; }

  

  /* relevant for the tutorial - start */

  #gallery { position: relative; }

    #pictures { position: relative; height: 408px; cursor: pointer;}

    #pictures img { position: absolute; top: 0; left: 0; }

    

    #prev, #next { margin-top: 30px; text-align: center; font-size: 2.0em; }

  /* relevant for the tutorial - end */

  

#footer { text-align: center; margin: 50px 0 20px 0; }

 

#sidebar { }

  #sidebar ul { margin-top: 20px; }

  #sidebar ul li { font-size: 1.2em; padding: 20px 0 20px 0; border-bottom: 1px solid #dddcdc; line-height: 18px; }

  #sidebar ul li h2 { font-size: 1.2em; margin-bottom: 8px; }

//最后就是最关键的js部分了

$(document).ready(function() { //perform actions when DOM is ready

  var z = 0; //for setting the initial z-index‘s

  var inAnimation = false; //flag for testing if we are in a animation

  

  $(‘#pictures img‘).each(function() { //set the initial z-index‘s

    z++; //at the end we have the highest z-index value stored in the z variable

    $(this).css(‘z-index‘, z); //apply increased z-index to <img>

  });

 

  function swapFirstLast(isFirst) {

    if(inAnimation) return false; //if already swapping pictures just return

    else inAnimation = true; //set the flag that we process a image

    

    var processZindex, direction, newZindex, inDeCrease; //change for previous or next image

    

    if(isFirst) { processZindex = z; direction = ‘-‘; newZindex = 1; inDeCrease = 1; } //set variables for "next" action

    else { processZindex = 1; direction = ‘‘; newZindex = z; inDeCrease = -1; } //set variables for "previous" action

    

    $(‘#pictures img‘).each(function() { //process each image

      if($(this).css(‘z-index‘) == processZindex) { //if its the image we need to process

        $(this).animate({ ‘top‘ : direction + $(this).height() + ‘px‘ }, ‘slow‘, function() { //animate the img above/under the gallery (assuming all pictures are equal height)

          $(this).css(‘z-index‘, newZindex) //set new z-index

            .animate({ ‘top‘ : ‘0‘ }, ‘slow‘, function() { //animate the image back to its original position

              inAnimation = false; //reset the flag

            });

        });

      } else { //not the image we need to process, only in/de-crease z-index

        $(this).animate({ ‘top‘ : ‘0‘ }, ‘slow‘, function() { //make sure to wait swapping the z-index when image is above/under the gallery

          $(this).css(‘z-index‘, parseInt($(this).css(‘z-index‘)) + inDeCrease); //in/de-crease the z-index by one

        });

      }

    });

    

    return false; //don‘t follow the clicked link

  }

  

  $(‘#next a‘).click(function() {

    return swapFirstLast(true); //swap first image to last position

  });

  

  $(‘#prev a‘).click(function() {

    return swapFirstLast(false); //swap last image to first position

  });

});

 

图片我就不上传了  大家自己找一些图片  换一下名字吧  这样一个翻页相册效果就做出来了 虽然有些冗余  但效果还是不错的 

以上是关于js特效之上下翻页相册效果的主要内容，如果未能解决你的问题，请参考以下文章

HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️

HTML+CSS+JS实现 ❤️3D旋转魔方图片相册特效❤️

简单3D翻页相册制作教程

18款js和jquery文字特效代码分享

AEJoy ——表达式之彩色文字尾随特效JS

AEJoy ——表达式之彩色文字尾随特效JS