此实例，直接粘贴代码即可运行，当然图片的路径不要忘记改了。

此实例是我一遍学习一边写出来的，希望能够帮到大家，一起学习。效果如图所示：

html代码如下所示：

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

   <head>

     <title>图片浏览工具制作</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="data:images/prev.png" onclick="javascript:jzk.ui.moveImg(-1);"/>

       <img id="img1" onclick=""/>

       <div class="mask3" onclick="javascript:jzk.ui.moveImg(3);"></div><!-- 增加三级遮罩 -->

       <img id="img2" onclick=""/>

       <div class="mask2" onclick="javascript:jzk.ui.moveImg(2);"></div><!-- 增加二级遮罩 -->

       <img id="img3" onclick=""/>

       <div class="mask1" onclick="javascript:jzk.ui.moveImg(1);"></div><!-- 增加一级遮罩 -->

       <img id="img4" onclick=""/>

       <img id="img5" onclick=""/>

       <div class="mask5" onclick="javascript:jzk.ui.moveImg(-1);"></div><!-- 和mask1一样效果 -->

       <img id="img6" onclick=""/>

       <div class="mask6" onclick="javascript:jzk.ui.moveImg(-2);"></div><!-- 和mask2一样效果 -->

       <img id="img7" onclick=""/>

       <div class="mask7" onclick="javascript:jzk.ui.moveImg(-3);"></div><!-- 和mask3一样效果 -->

       <img class="next" src="data:images/next.png" onclick="javascript:jzk.ui.moveImg(1);"/>

   </div>

   </body>

 </html>

css代码如下：

此处的mask1、2、3.....是覆盖几张照片的一个div，用opacity属性来定义透明度，可以实现一种朦胧感，让外观更加美丽。

 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:;}

 #img2, .mask2 {width: 166px;height: 110px;left: 95px;top:41px;z-index:;}

 #img3, .mask1 {width: 226px;height: 150px;left: 175px;top: 21px;z-index:;}

 #img4 {width: 290px;height: 192px;left: 285px;top: 0px;z-index:;}

 #img5, .mask5 {width: 226px;height: 150px;right: 175px;top: 21px;z-index:;}

 #img6, .mask6 {width: 166px;height: 110px;right: 95px;top:41px;z-index:;}

 #img7, .mask7 {width: 106px;height: 70px;right: 45px;top: 61px;z-index:;}

 .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代码如下：

 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++)/*定义i为数组下标的变量*/

     {

         var img = document.getElementById('img'+(i-base+1));/*保证img变量为img1、img2、img3...直到img7这7个img元素*/

         if(i<0)  /*数组下标i<0,说明offset>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()/*初始化显示图片,也就是调用函数moveImg过程：参数为7，base等于-7，i等于-7，-6，-5，-4，-3,-2,-1这7个值，对应的元素为img1，img2，...img7，所以有：img1=imgArray[-7+7],img2=imgArray[-6+7]....*/

 {

      jzk.ui.moveImg(7);/*初始参数应该设为：能显示的张数(此处为7)；*/

 }
三个文件，属js代码比较难理解，上面我也给出了详细的注释，如果还有谁看了不懂的，可以在下面评论中讨论。

【javascript实例】 具有立体效果的图片浏览器的更多相关文章

  1. 高仿QQ、微信效果的图片浏览器（支持原图和缩略图、多种手势、CocoaPods）

    感谢原文作者的分享 本文转载至 http://my.oschina.net/u/2406027/blog/735738 PYPhotoBrowser GitHub地址:https://github.c ...

  2. CSS 实现图片灰度效果 兼容各种浏览器

    CSS 实现图片灰度效果 兼容各种浏览器如360浏览器 CSS实现图片灰度效果就是通过CSS样式让彩色图片呈现为灰色,相当于把一张图像的颜色模式调整为灰度,CSS可以通过以下几种方法来实现灰度效果. ...

  3. js矩阵菜单或3D立体预览图片效果

    js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...

  4. 纯CSS3实现超立体的3D图片侧翻倾斜效果

    看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是创意不错.先来看看效果图.那么接下来我们分析一下源码吧,显示html代码,非常简单: ...

  5. 每天一个JavaScript实例-推断图片是否载入完毕

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. 利用纯CSS3实现超立体的3D图片侧翻倾斜效果

    原文:利用纯CSS3实现超立体的3D图片侧翻倾斜效果 上午的时候我在jQuery论坛上看到网友分享的一款CSS3 3D图片侧翻倾斜特效,觉得效果非常棒,其实话说回来,这玩意儿的实现真的非常简单,主要是 ...

  7. [Android实例] app引导页(背景图片切换加各个页面动画效果)（申明：来源于网络）

    [Android实例] app引导页(背景图片切换加各个页面动画效果)(申明:来源于网络) 地址: http://www.eoeandroid.com/thread-918356-1-1.html h ...

  8. Android中轴旋转特效实现，制作别样的图片浏览器

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/10766017 Android API Demos中有很多非常Nice的例子,这些例 ...

  9. JavaScript Table行定位效果

    作者:cloudgamer 时间: 2009-09-17 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript Table行定位效果 [1] 第 2 页 JavaScript Table行 ...

随机推荐

  1. Python函数参数默认值的陷阱和原理深究"

    本文将介绍使用mutable对象作为Python函数参数默认值潜在的危害,以及其实现原理和设计目的 本博客已经迁移至: http://cenalulu.github.io/ 本篇博文已经迁移,阅读全文 ...

  2. 【AngularJS】—— 12 独立作用域

    前面通过视频学习了解了指令的概念,这里学习一下指令中的作用域的相关内容. 通过独立作用域的不同绑定,可以实现更具适应性的自定义标签.借由不同的绑定规则绑定属性,从而定义出符合更多应用场景的标签. 本篇 ...

  3. [SDK2.2]Windows Azure Cloud Service (35) 使用VS2013发布Azure Cloud Service

    <Windows Azure Platform 系列文章目录> 好久没有更新BLOG了,今天我们继续Windows Azure相关的内容. 笔者最近把Visual Studio升级到了20 ...

  4. 索引深入浅出(4/10)：非聚集索引的B树结构在聚集表

    一个表只能有一个聚集索引,数据行以此聚集索引的顺序进行存储,一个表却能有多个非聚集索引.我们已经讨论了聚集索引的结构,这篇我们会看下非聚集索引结构. 非聚集索引的逻辑呈现 简单来说,非聚集索引是表的子 ...

  5. javascript 入门——this属性的理解！

    JavaScript中函数的this对象是函数在执行时所处的作用域(例:当在网页的全局作用域中调用函数时,this对象引用的就是window). 例: window.color = "red ...

  6. 书写高效的CSS

    一.使用高效是CSS ①:使用外联样式替代行间样式或内嵌样式. 不推荐使用内联样式:<style></style> 不推荐使用内嵌样式:<p style="&q ...

  7. MVC4在IIS6上部署遇到的问题

    最近的一个项目结束了,花的时间一个月左右吧..... 开发环境 win7+VS2012+MVC4(.net 4.0)+SQL SERVER 2008 部署环境 windows server 2003 ...

  8. TFS 2012 在IE11和Chrome (Windows 8.1) 显示英文的解决方案

    1.如果使用IE11浏览TFS Web显示英文,请执行以下操作: 控制面板——>语言——>高级设置 将“替代Windows显示语言”改为“中文(中华人民共和国)”,同时勾选“Web语言”下 ...

  9. C语言学习013:通过make编译C源代码

    编译多个C源代码文件 当程序文件越来越多,修改了其中的一部分代码文件,我们并不需要全部重新编译,只需要编译其中一部分就可以,下面我们创建了一个launch程序,除了主程序,我们创建了3个功能代码文件r ...

  10. C语言学习010:fopen读写文件

    在文件input.csv文件中,我们有数据如下 Apple Pear Litchis Pineapple Watermelon 现在我们将input.csv文件下的读取并写入到output.csv文件 ...