javascript实例分享---具有立体效果的图片特效
javascript实例分享---具有立体效果的图片特效
发布时间:2017-01-14 来源:查字典编辑
摘要:此实例是我一遍学习一边写出来的,希望能够帮到大家,一起学习。效果如图所示:html代码如下所示:复制代码代码如下:图片浏览工具制作css代码...

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

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"/>

<img id="img1"/>

<div class="mask3"></div><!-- 增加三级遮罩 -->

<img id="img2"/>

<div class="mask2"></div><!-- 增加二级遮罩 -->

<img id="img3"/>

<div class="mask1"></div><!-- 增加一级遮罩 -->

<img id="img4"/>

<img id="img5"/>

<div class="mask5"></div><!-- 和mask1一样效果 -->

<img id="img6"/>

<div class="mask6"></div><!-- 和mask2一样效果 -->

<img id="img7"/>

<div class="mask7"></div><!-- 和mask3一样效果 -->

<img class="next" src="images/next.png"/>

</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教程学习
编程开发子分类