一个图片转换效果（可用作浏览相册用哦~~~）

一个图片转换效果（可用作浏览相册用哦~~~）
在经典上看到的一个效果，具体来自：http://www.szrgb.net/szrgb/blog/showtitle.asp?thefiletitle=33

稍微美化了一下，修改并添加了几个CSS样式，代码不是很难，如需更炫的效果直接修改JS里的参数即可~~~
最重要的是兼容性很好，测试环境：IE6，FIREFOX2，Opera9.21均通过~~~

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片转换效果</title>
<style type="text/css">
<!--
* {padding:0; padding:0;}
#main {width:600px; margin:0 auto; position:relative;}
#left {width:200px; float:left;}
#left ul {margin:0; padding:0; float:left; clear:both; list-style:none;}
#left ul li {padding:0; float:left; margin:0 10px 10px 0; display:block;}
#left ul li.more {padding:0; float:left; margin:0 10px 10px 0; width:187px; line-height:30px; font-size:12px; text-align:center}
#left ul li img {width:81px; height:81px; border:none;}
#left ul li a {border:1px solid #ccc; padding:3px; display:block;}

#right {position:absolute;right:5px;top:0px;height:506px;width:381px;overflow:hidden;left:200px;border:3px solid #ccc;}
.imgbox{position:absolute;left:0px; top:0px; z-index:90;} 
.imgbox img {border:none; width:381px; height:506px;}
.moveimgbox{position:absolute; left:700px; top:0px; z-index:90;}
.moveimgbox img {border:none; width:381px; height:506px;}
-->
</style>
<script type="text/javascript">
var ticked=0;
var okayToGo = true;
var currentCreature = 1;
var forwardBackward = 1;
var firstnum = 1;
var secnum = 2;
var tounum=1;
function moveItem(firstnum,secnum){
if(okayToGo&& firstnum != secnum){ tounum=firstnum; document.getElementById("y"+firstnum).style.zIndex = 50+0*forwardBackward; document.getElementById("y"+secnum).style.zIndex = 50+0*forwardBackward; startTheMove =window.setInterval(function(){rightOrLeft(firstnum,secnum)},20);
} 
}

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

另外再给大家展示个相册程序：
http://tpwoniu.com/tp/album.asp?typeid=1
这是我前段时间给一摄影工作室做的一网站，另类的图片浏览方式，模拟FLASH效果。

转自： http://www.dzhai.com/wing/article.asp?id=128

posted @ 2007-06-10 13:30 海浪~~ 阅读(415) 评论(0) 收藏举报

刷新页面返回顶部

海浪

一个图片转换效果（可用作浏览相册用哦~~~）

公告