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

PS:显示效果图,大家可以根据自己的需求调整图片的样式哦

代码

复制代码 代码如下:

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

时间: 2024-12-21 20:25:19

JavaScript 类似flash效果的立体图片浏览器_图象特效的相关文章

javascript 火狐(firefox)不显示本地图片问题解决_图象特效

<img id="img1" src=""/> <script> function fileChange(obj) { var url = obj.value url = "file:///" + url.replace("\\",'/'); alert(url); document.getElementById("img1").src= url; } </script>

Javascript+CSS实现Flash动态新闻效果(pp原创)_图象特效

图片新闻一 图片新闻二 图片新闻三 图片新闻四 1 2 3 4 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

一个跟随鼠标的图片放大效果,与FF兼容_图象特效

<div align=center style="overfow: hidden; width: 100px; height: 100px"><img src=https://yunqi-tech.oss-cn-hangzhou.aliyuncs.com/2007426163751315.jpg width="100" height="100" border="0" onmouseover="sho

奇妙的Javascript图片放大镜_图象特效

--JS放大镜显示-- 单击"放大镜"开始浏览,再次单击停止.

ImageFlow可鼠标控制图片滚动_图象特效

You are free to use this in any product, or on any web site. For more information about ImageFlow read the Documentation and check my Newsblog. For anything else simply drop me a line in my Shoutbox. ChangeLog Version 0.8  Added Safari 1.x compatibil

js 加载时自动调整图片大小_图象特效

//  方法:setSelectReadOnly  用于设定极select控件ReadOnly, //        这个一个模拟只读不是真的只读 //        使用了onbeforeactivate,onfocus,onmouseover,onmouseout事件 //    示例:< img src='img.jpg' onload='ImgAutoSize(ImgD,FitWidth,FitHeight)' > ; //  create by sl  // ------------

JS 相册效果 自动播放[本地整合]_图象特效

Previous Next Play Stop

用Flash制作简易的图片浏览器

浏览器 通过脚本控制,Flash可以完成许多事.本例将教大家如何使用Flash制作简易的图片浏览器. 点击这里下载源文件 1.新建一个Flash文档,单击"属性"面板中的"尺寸"按钮,打开"文档属性"面板设置场景大小为650px x 450px,背景为白色,帧频为30fps 2.按快捷键Ctrl+R打开"导入"面板导入三张图片.如图1所示,图片image的宽.高为640px.480px.把图片image的宽.高放大为2400p

这种类似flash效果的图片轮换怎么实现

问题描述 问下高手类似的那右上角的图片轮换功能是怎么实现的,要用什么工具开发? 解决方案 解决方案二:找个jquery插件就可以实现了,搜索一下