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 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><!-- 增加三级遮罩 -->

<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="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代码比较难理解，上面我也给出了详细的注释，如果还有谁看了不懂的，可以在下面评论中讨论。

赞 (0)

相关推荐

  • 一个JavaScript的求爱小特效

    一个JavaScript的求爱小特效

    这里面做了一个JavaScript的求爱小特效,效果如下: 不仅能出现下面的图的效果,还可以让这个图形跟随着鼠标转动哦,这里面只是一个简单的没有修饰的小例子,基于这个例子可以让求爱,更加好玩了.闷骚男们,是不是可以给你的小萝莉发个这样的网页啊.给力的. 贴上code吧: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert t

  • 纯JavaScript实现HTML5 Canvas六种特效滤镜示例

    纯JavaScript实现HTML5 Canvas六种特效滤镜示例

    小试牛刀,实现了六款简单常见HTML5 Canvas特效滤镜,并且封装成一个纯JavaScript可调用的API文件gloomyfishfilter.js.支持的特效滤镜分别为: 1.反色 2.灰色调 3.模糊 4.浮雕 5.雕刻 6.镜像 滤镜原理解释: 1.反色:获取一个像素点RGB值r, g, b则新的RGB值为(255-r, 255-g, 255-b) 2.灰色调:获取一个像素点RGB值r, g, b则新的RGB值为 复制代码 代码如下: newr = (r * 0.272) + (g

  • JavaScript 地震特效

    function surfto(form) { var myindex=form.select1.selectedIndex if (form.select1.options[myindex].value != null) { parent.main.location.href=form.select1.options[myindex].value; } } //这段JS代码意为当前页面的浏览器地震// function shake(n) { if (window.top.moveBy) { f

  • javascript 可控式透明特效实现代码

    空间就全凭CSS的绝对定位实现位移了.在开始之前,我们练习一下setTimeout的递归用法(用来模拟setInterval). 复制代码 代码如下: function text(el){ var node = (typeof el == "string")? document.getElementById(el) : el; var i = 0; var repeat = function(){ setTimeout(function(){ node.innerHTML = &quo

  • 同一个网页中实现多个JavaScript特效的方法

    同一个网页中实现多个JavaScript特效的方法

    本文实例讲述了同一个网页中实现多个JavaScript特效的方法.分享给大家供大家参考.具体分析如下: 一般来说,在网页中,如果出现两次<script type="text/javascript"></script>标签,所有的JavaScipt脚本都不会再生效,只能出现一次<script type="text/javascript"></script>标签,但是,同一个网页中常常需要多个JavaScript特效. 一

  • javascript 打字效果的文字特效

    本节代码主要使用了 onMousedown 事件和 event.button 属性,主要功能和用法如下. • setTimeout 方法,在执行时是在载入后延迟指定时间后,去执行一次表达式,仅执行一次. • charAt 方法返回一个字符值,该字符位于指定索引位置.字符串中的第一个字符的索引为0,第二个的索引为1,等等.超出有效范围的索引值返回空字符串. 打字效果的文字特效 var layers = document.layers; var style = document.all; var b

  • JavaScript妙味课堂 物体平滑移动特效

    JavaScript物体平移运动特效 #div1 {background: red url(http://www.jb51.net/images/logo.gif); position:absolute; left:50px; top:50px; width:200px; height:200px;} var g_oTimer=null; function startMove() { if(!g_oTimer) { g_oTimer=setInterval(moveTimerHandler, 3

  • javascript:google 向上向下滚动特效,兼容IE6,7,8,FF

    2010最新全面兼容ie6,ie7,ie8,ff的CSS HACK写法 #google1 { border:none; width:270px; height:20px; margin:0px 0; font-size:12px; padding-left:0px; overflow:hidden; font-family:Arial; } #google1 ul { margin:0px; padding:0px; list-style-type:none; } #google1 li { l

  • javascript实现带节日和农历的日历特效

    带节日和农历的脚本: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>带农历的日历</TITLE>          <SCRIPT language="JavaScript"> <!--  var lunarInfo

  • 23个Javascript弹出窗口特效整理

    1. Lightview Lightview是一个基于Prototype与Script.aculo.us开发,用于创建可以覆盖整个页面的模式对话框.展示的内容不仅可以是图片.文字.网页.通过Ajax 调用的内容,还可以是Quicktime/Flash影片都能够以非常酷的效果展示. 2. ThickBox (演示地址) ThickBox是一个模式对话框UI控件.基于jQuery开发,可以用来展示单张或多张图片,内嵌的内容,iframed的内容,或通过Ajax获取的内容. 3. Fonshen JS

随机推荐