javascript实例分享---具有立体效果的图片特效


Posted in Javascript onJune 08, 2014

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

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代码比较难理解,上面我也给出了详细的注释,如果还有谁看了不懂的,可以在下面评论中讨论。
Javascript 相关文章推荐
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
提交表单时执行func方法实现代码
Mar 17 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
Mar 04 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
jQuery hover事件简单实现同时绑定2个方法
Jun 07 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
js处理包含中文的字符串实例
Oct 11 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 #Javascript
js 去除字符串第一位逗号的方法
Jun 07 #Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
Jun 07 #Javascript
用js替换除数字与逗号以外的所有字符的代码
Jun 07 #Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 #Javascript
关于JavaScript命名空间的一些心得
Jun 07 #Javascript
javascript随机之洗牌算法深入分析
Jun 07 #Javascript
You might like
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
PHP实现递归复制整个文件夹的类实例
2015/08/03 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
表单内同名元素的控制
2006/11/22 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
在js(jquery)中获得文本框焦点和失去焦点的方法
2012/12/04 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
2013/08/30 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
基于Vue实现图书管理功能
2017/10/17 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
python实现一次创建多级目录的方法
2015/05/15 Python
Python os模块学习笔记
2015/06/21 Python
使用Python编写爬虫的基本模块及框架使用指南
2016/01/20 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
初三班主任寄语大全
2014/04/04 职场文书
公证书样本
2014/04/10 职场文书
学校个人对照检查材料
2014/08/26 职场文书
房屋过户委托书范本
2014/10/07 职场文书
贷款工作证明模板
2015/06/12 职场文书
安全伴我行主题班会
2015/08/13 职场文书
my.ini优化mysql数据库性能的十个参数(推荐)
2021/05/26 MySQL
Java实现给Word文件添加文字水印
2022/02/15 Java/Android
详解CSS3浏览器兼容
2022/12/24 HTML / CSS