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的类型简单说明
Sep 03 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
js操作table元素实现表格行列新增、删除技巧总结
Nov 18 Javascript
原生JS实现不断变化的标签
May 22 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
深入浅析Vue中的slots/scoped slots
Apr 03 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
基于vue-cli3创建libs库的实现方法
Dec 04 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 Javascript
js实现菜单跳转效果
Dec 11 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
php基础知识:函数基础知识
2006/12/13 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
解决thinkphp5未定义变量会抛出异常,页面错误,请稍后再试的问题
2019/10/16 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
yarn的使用与升级Node.js的方法详解
2017/06/04 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
python获取外网ip地址的方法总结
2015/07/02 Python
python比较两个列表是否相等的方法
2015/07/28 Python
numpy中的高维数组转置实例
2018/04/17 Python
django中media媒体路径设置的步骤
2019/11/15 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
python常量折叠基础知识点讲解
2021/02/28 Python
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
生物学专业求职信
2014/07/23 职场文书
学生夜不归宿检讨书
2014/09/23 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
二审答辩状范文
2015/05/22 职场文书
回复函格式及范文
2015/07/14 职场文书
《乘法分配律》教学反思
2016/02/24 职场文书
使用这 6个Vue加载动画库来减少我们网站的跳出率
2021/05/18 Vue.js
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android
SQL实现LeetCode(180.连续的数字)
2021/08/04 MySQL
Golang Web 框架Iris安装部署
2022/08/14 Python