图片标题轮换

技术文章

图片标题轮换

时间：2009-04-12 点击：1322

<html>
　　<head>
　　<SCRIPT language=JavaScript> 
　　// 属性设置 
　　var E_strIFaderTransType = 'reveal'; // 'reveal' | 'blend' 
　　var Filter_number = 23; // 滤镜种数 
　　var change_time = 3.000; // 滤镜转换过程为3.0秒延迟 
　　var wait_time = 5000; // 两种滤镜之间为5秒延迟
　　
　　var obj_Timer; 
　　var count_temp = 0; //记录当前是第几幅图片 
　　var Img_arry = new Array(); //图片数组 
　　var E_ie4 = document.all?true:false; 
　　var E_nn4 = document.layers?true:false;
　　
　　function Filt_set() //设置滤镜 
　　{ 
　　 if(!E_ie4 && !E_nn4) return;
　　 if(E_ie4) { 
　　 var theImg = document.all['idImgFading']; 
　　 if(theImg == null) return; 
　　 with(document.all['idImgFading']) { 
　　 style.filter = (E_strIFaderTransType == 'reveal')?'revealTrans':'blendTrans'; 
　　 style.filter.duration = change_time; 
　　 style.filter.transition = Filter_number; 
　　 } 
　　 } 
　　 use_Filter();
　　 obj_Timer = window.setInterval('use_Filter()',wait_time); 
　　}
　　
　　function use_Filter() //滤镜的启动 
　　{ 
　　 if(E_ie4) { 
　　 with(document.all['idImgFading']) { 
　　 if(E_strIFaderTransType == 'reveal') { 
　　 filters(0).transition = Filter_number; 
　　 } 
　　 if(count_temp == (Img_arry.length - 1)) { 
　　 count_temp = -1; 
　　 } 
　　 count_temp++; 
　　 title = Img_arry[count_temp].sAlt; 
　　 parentElement.href = Img_arry[count_temp].command;
　　 document.all['idImgLink'].innerText=title;
　　 document.all['idImgLink'].href= Img_arry[count_temp].command;
　　 
　　 filters(0).apply(); 
　　 src = Img_arry[count_temp].sImgUrl; 
　　 filters(0).play();
　　 } 
　　 } 
　　 else if(E_nn4) { 
　　 if(count_temp == (Img_arry.length - 1)) { 
　　 count_temp = -1; 
　　 } 
　　 count_temp++; 
　　 document.images['idImgFading'].src = Img_arry[count_temp].sImgUrl; 
　　 } 
　　}
　　
　　function obj_ClearTime() { 
　　 window.clearInterval(obj_Timer); 
　　} 
　　window.onunload = obj_ClearTime;//取消计时器，释放系统资源
　　
　　function Img_obj(sImgUrl,command,sAlt,sTarget) 
　　{ 
　　 this.sImgUrl = (sImgUrl == null)?'':sImgUrl; 
　　 this.command = (command == null || command == '')?'/':command; 
　　 this.sAlt = (sAlt == null)?'':sAlt; 
　　 this.sTarget = (sTarget == null || sTarget == '')?'_self':sTarget; 
　　} 
　　</SCRIPT>
　　
　　<SCRIPT language=JavaScript> 
　　 
　　</SCRIPT> 
　　</head>
　　<body>
　　<center> 
　　 <A><IMG hspace=0 src="http://www.it214.net/picture/133/01.jpg" width=400 height=300 border=0 name=idImgFading></A><br/>
　　 <a id="idImgLink"></a>
　　</center> 
　　<SCRIPT language=JavaScript>Filt_set();</SCRIPT>
　　</body>
　　</html>

鼠标滑过缩略图显示大图

表格table数据过滤

滑动展示窗

鼠标经过图片，半透明的标题从下面出现，边框换色

标题层叠在图片上，标题文字和背景半透明，鼠标经过边框换色

> 返回

地址：上海市普陀区胶州路941号长久商务中心电话： QQ：