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时间选择器 兼容IE6,7,8,9
Jun 26 Javascript
jquery延迟加载外部js实现代码
Jan 11 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
js表单元素checked、radio被选中的几种方法(详解)
Aug 22 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
浅谈Webpack核心模块tapable解析
Sep 11 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
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
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
node.js基础知识小结
2018/02/26 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
微信小程序实现卡片左右滑动效果的示例代码
2019/05/01 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python实现从SQL型数据库读写dataframe型数据的方法【基于pandas】
2019/03/18 Python
python占位符输入方式实例
2019/05/27 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
python常用运维脚本实例小结
2020/02/14 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
主持人婚宴答谢词
2014/01/28 职场文书
物流业务员岗位职责
2014/02/08 职场文书
主管会计岗位职责
2014/03/13 职场文书
绿色环保标语
2014/06/12 职场文书
物资采购方案
2014/06/12 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
公共场所卫生管理制度
2015/08/05 职场文书
如何撰写促销方案?
2019/07/05 职场文书
Mysql Show Profile
2021/04/05 MySQL
win11无法添加打印机怎么办? 提示windows无法打开添加打印机的解决办法
2022/04/05 数码科技