javascript实例分享---具有立体效果的图片特效
此实例是我一遍学习一边写出来的，希望能够帮到大家，一起学习。效果如图所示：
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 src="images/prev.png" onclick="javascript:jzk.ui.moveImg(-1);"/><img id="img1" onclick=""/> <div onclick="javascript:jzk.ui.moveImg(3);"></div><!-- 增加三级遮罩 -->
<img id="img2" onclick=""/> <div onclick="javascript:jzk.ui.moveImg(2);"></div><!-- 增加二级遮罩 -->
<img id="img3" onclick=""/> <div onclick="javascript:jzk.ui.moveImg(1);"></div><!-- 增加一级遮罩 -->
<img id="img4" onclick=""/>
<img id="img5" onclick=""/> <div onclick="javascript:jzk.ui.moveImg(-1);"></div><!-- 和mask1一样效果 -->
<img id="img6" onclick=""/> <div onclick="javascript:jzk.ui.moveImg(-2);"></div><!-- 和mask2一样效果 -->
<img id="img7" onclick=""/> <div onclick="javascript:jzk.ui.moveImg(-3);"></div><!-- 和mask3一样效果 -->
<img src="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: 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代码如下：
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代码比较难理解，上面我也给出了详细的注释，如果还有谁看了不懂的，可以在下面评论中讨论。
-
本文向大家介绍C#图片上传效果实例分析，包括了C#图片上传效果实例分析的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了C#图片上传效果实现方法。分享给大家供大家参考。具体如下： 希望本文所述对大家的C#程序设计有所帮助。
-
本文向大家介绍jQuery实现图片轮播特效代码分享，包括了jQuery实现图片轮播特效代码分享的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery超精致图片轮播幻灯片特效。分享给大家供大家参考。具体如下： jquery图片轮播插件PgwSlider是一款非常简单的jquery插件，它可以帮你快速创建一个垂直轮播图。 运行效果图： 小提示：浏览器中如果不能正常运行，可以尝试切换浏览
-
本文向大家介绍jquery图片轮播特效代码分享，包括了jquery图片轮播特效代码分享的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery图片轮播特效。分享给大家供大家参考。具体如下： 这是一款仿淘宝首页jquery轮播焦点图，基于jquery实现仿淘宝网首页正中间小焦点图特效。 运行效果图： -------------------查看效果 下载源码----------------
-
本文向大家介绍JavaScript实现图片轮播特效，包括了JavaScript实现图片轮播特效的使用技巧和注意事项，需要的朋友参考一下 今天给大家介绍下怎么用 JS 实现图片轮播效果。 原理描述： 使用JS实现轮播的原理是这样的： 假设初始的情况，下图一个网格代表一个图，初始时，显示1 ： 当进行一次轮播后，显示变为下图 显示2： 依次类推。 代码实现： 1 JS 代码： 2 HTML 代码：
-
本文向大家介绍javascript图片滑动效果实现，包括了javascript图片滑动效果实现的使用技巧和注意事项，需要的朋友参考一下 本文为大家分享了javascript图片滑动效果实现方法，具体内容如下，先看一下效果图： 鼠标滑过那张图，显示完整的哪张图，移除则复位： 简单的CSS加JS操作DOM实现： css: js操作： 更多关于滑动效果的专题，请点击下方链接查看： javascript滑
-
本文向大家介绍javascript经典特效分享 手风琴、轮播图、图片滑动，包括了javascript经典特效分享 手风琴、轮播图、图片滑动的使用技巧和注意事项，需要的朋友参考一下 最近都没有更，就来几个效果充实一下。 都没有进行美化这步。 纯css的手风琴： css3手风琴： javascript实现的手风琴： 接下来的都是会使用到动画效果，既然这样就把封装好运动： 轮播图： 这个是使用
-
本文向大家介绍JavaScript通过mouseover()实现图片变大效果的示例，包括了JavaScript通过mouseover()实现图片变大效果的示例的使用技巧和注意事项，需要的朋友参考一下 实例如下所示： 以上这篇JavaScript通过mouseover()实现图片变大效果的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍jquery实现图片水平滚动效果代码分享，包括了jquery实现图片水平滚动效果代码分享的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jquery实现图片水平滚动效果，分享给大家供大家参考。具体如下： 运行效果图：-------------------查看效果------------------- 小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 为大家分享的jqu