JavaScript 类似flash效果的立体图片浏览器


Posted in Javascript onFebruary 08, 2010

PS:显示效果图,大家可以根据自己的需求调整图片的样式哦
JavaScript 类似flash效果的立体图片浏览器
代码

<style type="text/css"> 
//图片浏览器容器 
#container{position:absolute;} 
#container img{position:absolute;} 
//半透明遮罩层样式 
.mask2{ 
background:#99FF00; 
opacity:0.3; 
filter:Alpha(Opacity='30'); 
position:absolute; 
} 
//颜色更深的半透明遮罩层样式 
.mask{ 
background:#99FF00; 
opacity:0.3; 
filter:Alpha(Opacity='50'); 
position:absolute; 
} 
</style> 
<body> 
<div id="container"> 
<!--左箭头--> 
<img src="j1.jpg" style="left:-25px; top:85px; width:50px; height:50px;" onclick="JavaScript:showImg(-1)"/> 
<!--左边第一个图片--> 
<img id="img01" style="z-index:4; left:31px; top:63px; width:74px; height:74px;" onclick="JavaScript:showImg(2)"/> 
<!--左边第一个图片的遮罩层--> 
<div class="mask" style="z-index:4; left:31px; top:63px; width:74px; height:74px;"></div> 
<!--左边第二个图片--> 
<img id="img02" style="z-index:5; left:71px; top:32px; width:138px; height:138px;" onclick="JavaScript:showImg(1)"/> 
<!--左边第二个图片的遮罩层--> 
<div class="mask2" style="z-index:5; left:71px; top:32px; width:138px; height:138px;"></div> 
<!--中间的图片--> 
<img id="img03" style="z-index:6; left:151px; top:0px; width:198px; height:198px;" onclick="JavaScript:showImg(0)"/> 
<!--右边第二个图片--> 
<img id="img04" style="z-index:5; left:291px; top:32px; width:138px; height:138px;" onclick="JavaScript:showImg(-1)"/> 
<!--右边第二个图片的遮罩层--> 
<div class="mask2" style="z-index:5; left:291px; top:32px; width:138px; height:138px;"></div> 
<!--右边第一个图片--> 
<img id="img05" style="z-index:4; left:395px; top:64px; width:74px; height:74px;" onclick="JavaScript:showImg(-2)"/> 
<!--右边第一个图片的遮罩层--> 
<div class="mask" style="z-index:4; left:395px; top:64px; width:74px; height:74px;"></div> 
<!--右箭头--> 
<img src="j2.jpg" style="left:486px; top:85px; width:50px; height:50px;" onclick="JavaScript:showImg(1)"/> 
</div> 
<script> 
//图片列表数组 
var imgArray = new Array(); 
imgArray[0]="1.jpg"; 
imgArray[1]="2.jpg"; 
imgArray[2]="3.jpg"; 
imgArray[3]="4.jpg"; 
imgArray[4]="5.jpg"; 
imgArray[5]="6.jpg"; 
imgArray[6]="7.jpg"; 
imgArray[7]="8.jpg"; 
imgArray[8]="9.jpg"; 
imgArray[9]="10.jpg"; 
//默认显示的图片序号 
var base = 0; 
//通过制定偏移量来显示数组顺序中的前或者后的几张图片,offset参数为偏移量 
function showImg(offset){ 
base=(base-offset)%imgArray.length; 
//显示从base号开始的5个图片 
for(var i=base;i<base+5;i++){ 
var img = document.getElementById("img0"+(i-base+1)); 
//判断图片是否从前往后循环显示 
if(i<0){img.src = imgArray[imgArray.length+i];} 
//判断图片是否从后往前循环显示 
else if(i>(imgArray.length-1)){img.src=imgArray[i-imgArray.length];} 
else {img.src=imgArray[i];} 
} 
} 
//初始化图片浏览器中的图片 
function initImg(){ 
showImg(3); 
} 
//页面加载后调用 
window.onload=initImg(); 
</script> 
</body> 
function initimg(){ 
showImg(3); 
} 
window.onload=initimg(); 
</script> 
</body>
Javascript 相关文章推荐
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
JQuery从头学起第三讲
Jul 06 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
jquery实现拖拽调整Div大小
Jan 30 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
Oct 08 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
jQuery无缝轮播图代码
Dec 22 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
js 省地市级联选择
Feb 07 #Javascript
js 自定义的联动下拉框
Feb 07 #Javascript
比较搞笑的js陷阱题
Feb 07 #Javascript
javascript 鼠标拖动图标技术
Feb 07 #Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 #Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 #Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 #Javascript
You might like
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
浅谈PHP中关于foreach使用引用变量的坑
2016/11/14 PHP
javascript 特殊字符串
2009/02/25 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
正则表达式(语法篇推荐)
2016/06/24 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
2018/08/10 Javascript
单页面vue引入百度统计的使用方法示例详解
2018/10/13 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
为什么Python中没有&quot;a++&quot;这种写法
2018/11/27 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
django为Form生成的label标签添加class方式
2020/05/20 Python
python实现数字炸弹游戏
2020/07/17 Python
django inspectdb 操作已有数据库数据的使用步骤
2021/02/07 Python
彪马日本官网:PUMA日本
2019/01/31 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
药剂专业学生求职信范文
2013/12/28 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
会计师事务所实习证明
2014/11/16 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
上班迟到检讨书
2015/05/06 职场文书
圣诞晚会主持词
2015/07/01 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
Python实现照片卡通化
2021/12/06 Python