Of Stack

Javascript instance sharing image effects with stereoscopic effects

  • 2020-03-30 03:15:50
  • OfStack

< img SRC = "border = 0 / / files.jb51.net/file_images/article/201406/201468111900869.png? 201458111927 ">

The HTML code is as follows: 


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title> Image viewer tool production </title>
    <script type="text/javascript" src="js/main.js"></script>
    <link rel="stylesheet" type="text/css"  href = "style/css.css">
  </head>
  <body>
  <div id="pic_browser">
      <img class="prev" src="images/prev.png" onclick="javascript:jzk.ui.moveImg(-1);"/>
      <img id="img1" onclick=""/>
      <div class="mask3" onclick="javascript:jzk.ui.moveImg(3);"></div><!--  Added three levels of masks  -->
      <img id="img2" onclick=""/>
      <div class="mask2" onclick="javascript:jzk.ui.moveImg(2);"></div><!--  Add a secondary mask  -->
      <img id="img3" onclick=""/>
      <div class="mask1" onclick="javascript:jzk.ui.moveImg(1);"></div><!--  Add one level mask  -->
      <img id="img4" onclick=""/>
      <img id="img5" onclick=""/>
      <div class="mask5" onclick="javascript:jzk.ui.moveImg(-1);"></div><!--  and mask1 The same effect  -->
      <img id="img6" onclick=""/>
      <div class="mask6" onclick="javascript:jzk.ui.moveImg(-2);"></div><!--  and mask2 The same effect  -->
      <img id="img7" onclick=""/>
      <div class="mask7" onclick="javascript:jzk.ui.moveImg(-3);"></div><!--  and mask3 The same effect  -->
      <img class="next" src="images/next.png" onclick="javascript:jzk.ui.moveImg(1);"/>
  </div>
  </body>
</html>

The CSS code is as follows:

      Here is mask1, 2, 3... Is covered with a few photos of a div, with opacity attribute to define the transparency, can achieve a kind of hazy feeling, let the external appearance more beautiful. 


body {width: 1340px;height: 500px;background: url(../images/body_bg.gif) no-repeat;}
#pic_browser {width: 860px;height: 192px; position: relative;margin:130px 106px;}
#pic_browser img{position: absolute;border: none;}
.prev {top:76px;left: 0px; }
#img1, .mask3 {width: 106px;height: 70px;left: 45px;top: 61px;z-index: 4;}
#img2, .mask2 {width: 166px;height: 110px;left: 95px;top:41px;z-index: 5;}
#img3, .mask1 {width: 226px;height: 150px;left: 175px;top: 21px;z-index: 6;}
#img4 {width: 290px;height: 192px;left: 285px;top: 0px;z-index: 7;}
#img5, .mask5 {width: 226px;height: 150px;right: 175px;top: 21px;z-index: 6;}
#img6, .mask6 {width: 166px;height: 110px;right: 95px;top:41px;z-index: 5;}
#img7, .mask7 {width: 106px;height: 70px;right: 45px;top: 61px;z-index: 4;}
.next {top:76px;right: 0px;}
.mask1, .mask2, .mask3, .mask5, .mask6, .mask7 {background: #fff;position: absolute;}
.mask1, .mask5  {opacity: 0.3;}
.mask2, .mask6 {opacity: 0.5;}
.mask3, .mask7 {opacity: 0.7;}

Js code is as follows: 


window.onload = function()
{
   jzk.app.initImg();
}
var imgArray = new Array();
imgArray[0] = 'images/1.jpg';
imgArray[1] = 'images/2.jpg';
imgArray[2] = 'images/3.jpg';
imgArray[3] = 'images/4.jpg';
imgArray[4] = 'images/5.jpg';
imgArray[5] = 'images/6.jpg';
imgArray[6] = 'images/7.jpg';
var base=0;
var jzk = {}; 
jzk.tools = {};
jzk.ui = {};
jzk.ui.moveImg = function(offset)
{
    base= (base-offset);
    for(var i = base;i< base +7;i++)
    {
        var img = document.getElementById('img'+(i-base+1));
        if(i<0)  
        {
            img.src =imgArray[imgArray.length+i];
        }
        else if(i>imgArray.length-1)
        {
            img.src =imgArray[i-imgArray.length]; 
        }
        else
        {
            img.src = imgArray[i];
        }
    }
}
jzk.app = {}; 
jzk.app.initImg = function()
{
     jzk.ui.moveImg(7);
}
 Three documents, genus js The code is difficult to understand, and I've provided detailed comments above, so anyone who doesn't understand it can discuss it in the comments below.

Related articles: