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 字符串乘法
Aug 20 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
jQuery获得包含margin的outerWidth和outerHeight的方法
Mar 25 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
Node.js readline模块与util模块的使用
Mar 01 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
react ant Design手动设置表单的值操作
Oct 31 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(5) 类和对象
2010/02/16 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
document.designMode的功能与使用方法介绍
2007/11/22 Javascript
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
JsChart组件使用详解
2018/03/04 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
详解vue axios用post提交的数据格式
2018/08/07 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
Python实现将Excel转换成xml的方法示例
2018/08/25 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
护士自荐信怎么写
2013/10/18 职场文书
电子技术专业中专生的自我评价
2013/12/17 职场文书
班主任工作年限证明
2014/01/12 职场文书
情人节活动策划方案
2014/02/27 职场文书
法人委托书
2014/07/31 职场文书
老兵退伍标语
2014/10/07 职场文书
八年级英语教学计划
2015/01/23 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
食堂卫生管理制度
2015/08/04 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫