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 相关文章推荐
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
React实现点击删除列表中对应项
Jan 10 Javascript
js鼠标跟随运动效果
Mar 11 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
JsonServer安装及启动过程图解
Feb 28 Javascript
vue实现顶部菜单栏
Nov 08 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
用文本作数据处理
2006/10/09 PHP
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
JavaScript 计算当天是本年本月的第几周
2009/03/22 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
js数组操作常用方法
2014/05/08 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
js实现手机web图片左右滑动效果
2017/12/29 Javascript
Express结合Webpack的全栈自动刷新
2019/05/23 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
使用Python读取大文件的方法
2018/02/11 Python
python的dataframe和matrix的互换方法
2018/04/11 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
CSS3教程(3):border-color网页边框色彩
2009/04/02 HTML / CSS
canvas环形倒计时组件的示例代码
2018/06/14 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
黄继光的英雄事迹材料
2014/02/13 职场文书
新法人代表任命书
2014/06/06 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
2015年女工委工作总结
2015/07/27 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
丧事酒宴答谢词
2015/09/30 职场文书
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js