网页特效：一种很酷的图片动态切换效果

今天是：

首页 ┆ 信息查询 ┆ 网站SEO查询工具 ┆ CSS编辑器 ┆ 建站素材

软件新闻

操作系统

Vista Winxp Win2003 Linux Windows综合

工具软件

系统工具媒体工具网络工具杀毒软件聊天

软件开发

C教程 C++ Java C# ASP.NET JSP PHP

数据库

Oracle MySQL DB2 SQL Server Sybase

安全

网络病毒

办公应用

Word Excel Powerpoint Outlook 其他

平面设计

Photoshop Fireworks Coreldraw Flash Illustrator 3dsmax

网站运营

网站运营网站优化网站策划策划书下载建站心得站长故事网站盈利网页制作网页特效 建站素材 免费资源 QQ频道

当前位置：首页 >> 网页制作 >> Javascript/Ajax >> 网页特效：一种很酷的图片动态切换效果

发布于2005-09-25 01:01 来源：网海拾贝

看到这种图片切换的效果吗？用来切换旗帜广告将是个很好的选择。下面我们来讲一讲具体的做法：

第一步、把下面这段代码插入到页面的<head>与</head>之间：

以下代码片段：

<script language=javascript>
isns = navigator.appName == "Netscape";
function ztstr(id,picurl,linkurl)
{
this.id=id
this.picurl=picurl
this.linkurl=linkurl
}

zhuanti=new Array()
imgcount=1;
frequency=10*1000;//30秒

//在这里修改图片的路径和链接
zhuanti[1]=new ztstr('1','/2004/data/uploadfile/200506/20050606023346658.gif','http://www.ccdoo.com')
zhuanti[2]=new ztstr('2','/2004/data/uploadfile/200506/20050606023346572.gif','http://www.ccdoo.com')
zhuanti[3]=new ztstr('3','/2004/data/uploadfile/200506/2005060602334713.gif','http://www.ccdoo.com')
zhuanti[4]=new ztstr('4','/2004/data/uploadfile/200506/20050606023347640.gif','http://www.ccdoo.com')

imgcount=zhuanti.length-1
for(i=1;i<=imgcount;i++)
{
eval("img"+i+"=new Image()")
eval("img"+i+".src=zhuanti["+i+"].picurl")
}

nn=1

var rand1 = 0;
var useRand = 0;

function swapPic() {
var imgnum = zhuanti.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
// alert(useRand);
nn=useRand;
change_img();
}

function change_img()
{
eval('document.pic.src=img'+nn+'.src');
nn++;
if(nn>imgcount) nn=1
if(!isns)
{
pic.filters.item(0).apply()
pic.style.visibility='visible'
pic.filters.item(0).play()
setTimeout("pic.style.visibility='hidden'",frequency);
}
else
document.pic.visibility='visible'
tt=setTimeout('change_img()',frequency)
}

function pictarget()
{
tt=nn-1
if(tt<1) tt=imgcount
cururl=zhuanti[tt].linkurl
window.open(cururl);
}
function ini()
{
if(!isns)
{
spacewidth=Math.round((divmask.offsetWidth-770)/2)
dmwidth=770+spacewidth
dmheight=divmask.offsetHeight
totalstep=50
timeout=50
dmstepw=Math.round(770/totalstep)
dmsteph=Math.round(dmheight/totalstep)
setTimeout('hidimg()',3000)
}
else swapPic()
}

function hidimg()
{
dmwidth-=dmstepw
dmheight-=dmsteph
eval('divmask.style.clip="rect(0,'+dmwidth+','+dmheight+',0)"')
hdrun=setTimeout('hidimg()',timeout)
if(dmwidth<=spacewidth&&dmheight<=0)
{
divmask.style.visibility='hidden'
clearTimeout(hdrun)
swapPic()
}
}
</script>

第二步、调用定义好的JavaScript函数，在<body>里加上以下代码：

以下代码片段：

<body onload=swapPic()>

第三步、在页面中插入图片和链接：

以下代码片段：

<a href=javascript:void(null) onclick='javascript:pictarget();return false;'><img src="/2004/data/uploadfile/200506/20050606023346658.gif" width=468 height=60 border=0 name=pic style="visibility:hidden;filter:revealtrans(duration=2.0,transition=12)"></a>

好，到这里就大功告成了。另外，试试改变transition的数值，可以得到不同的转换效果哟~~

中查找“网页特效：一种很酷的图片动态切换效果”更多相关内容

中查找“网页特效：一种很酷的图片动态切换效果”更多相关内容

上一篇：刺穿MYIE|24小时同一ip弹一次|无须body加载|精简代码
下一篇：提高网页中GOOGLE广告显示速度的代码

最近更新

赞助商

·javascript实现图片放大镜效果	12-30
·图片代替提交和重置按钮	12-11
·JavaScript教程:图片切割效果	12-10
·JavaScript动态加载CSS的三种方法	12-02
·JavaScript语言中的Literal Syntax特性	12-02
·JavaScript模仿Apache的ObjectPool	12-02
·关于JavaScript的执行域,标识符解析,闭包..	12-02
·Javascript教程:拖拽效果研究	12-01
·浏览器对Cookie的限制	11-10
·JavaScript中的排序函数sort	10-28
·初学Javascript的总结	10-24