javascript实现IE、Firefox兼容的图片渐变功能
前台
View Code
1 <?xml version="1.0" encoding="GB2312" ?> 2 <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:myNS="urn:myNameSpace"> 3 <msxsl:script language="JScript" implements-prefix="myNS"> 4 <![CDATA[ 5 function MyReplace(OrgStr) 6 { 7 OrgStr=OrgStr.replace(/\'/g,"\\\'"); 8 OrgStr=OrgStr.replace(/\\/g,"\\\""); 9 OrgStr=OrgStr.replace(/ /g," "); 10 OrgStr=OrgStr.replace(/\r\n/g,"<br>"); 11 OrgStr=OrgStr.replace(/\r/g,"<br>"); 12 OrgStr=OrgStr.replace(/\n/g,"<br>"); 13 //OrgStr=OrgStr.replace(/<br />/g,""); 14 return OrgStr; 15 } 16 ]]> 17 </msxsl:script> 18 <xsl:output method="html" version="4.0" indent="no"/> 19 <xsl:template match="/G"> 20 <table width="98%" border="0" cellpadding="0" cellspacing="0" > 21 <tr> 22 <td width="240" height="190" align="center" valign="top"> 23 <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="height: 140px; "> 24 <tr > 25 <td> 26 <a id="shimglink{/G}" href="" target="_blank"> 27 <img id="shimage{/G}" src="" style="display:none;FILTER: revealTrans(duration=2,transition=20)" width="200px" height="150px" border="0" /> 28 </a> 29 </td> 30 </tr> 31 <tr> 32 <td height="40" align="center" > 33 <a class="wenzi" id="shtxtlink{/G}" href="" target="_blank"> 34 <span id="shtxt{/G}" class="tit5"></span> 35 </a> 36 </td> 37 </tr> 38 </table> 39 </td> 40 41 </tr> 42 </table> 43 44 <script> 45 TAddShiftPicTxt( 46 'shimage<xsl:value-of select="/G"/>', 47 'shtxt<xsl:value-of select="/G"/>', 48 new Array(<xsl:apply-templates select="A" mode="ttimage"/>), 49 new Array(<xsl:apply-templates select="A" mode="ttlink"/>), 50 new Array(<xsl:apply-templates select="A" mode="tttitle"/>), 51 51, 52 5000 53 ); 54 </script> 55 </xsl:template> 56 <xsl:template match="A" mode="ttlink"> 57 '<xsl:value-of select="@G"/>-<xsl:value-of select="@Contents_ID"/>.htm'<xsl:if test="position()!=last()">,</xsl:if> 58 </xsl:template> 59 60 <xsl:template match="A" mode="ttimage"> 61 '<xsl:value-of select="@G"/>'<xsl:if test="position()!=last()">,</xsl:if> 62 </xsl:template> 63 <xsl:template match="A" mode="tttitle"> 64 '<xsl:value-of disable-output-escaping="yes" select="myNS:MyReplace(string(@G))"/>'<xsl:if test="position()!=last()">,</xsl:if> 65 </xsl:template> 66 </xsl:stylesheet>
js脚本
View Code
1 //设置图片翻滚执行时间 2 var TIntervalTime=4000; 3 //存储实行时间 4 var TIntervalTimeArray=new Array(); 5 //存储图片控件ID 6 var TImgObjArray=new Array(); 7 //存储标题控件ID 8 var TTxtObjArray=new Array(); 9 //存储图片地址 10 var TImgUrlListArray=new Array(); 11 //存储该内容链接地址 12 var TLinkListArray=new Array(); 13 //存储标题内容 14 var TTitleListArray=new Array(); 15 16 //存储当前是第几张图片 17 var TImgIndexArray=new Array(); 18 //存储标题最大长度 19 var TTitleMaxArray=new Array(); 20 21 //当前所处的状态，鼠标移动上去以后，还是鼠标移走 22 var TType=new Array(); 23 //当前默认数组下标 24 var TShiftCount=0; 25 26 //添加 27 function TAddShiftPicTxt(ImgObjStr,TxtObjStr,ImgUrlList,LinkList,TitleList,TitleMax,TIntervalTime) 28 { 29 TImgObjArray[TShiftCount]=document.getElementById(ImgObjStr); 30 TTxtObjArray[TShiftCount]=document.getElementById(TxtObjStr);; 31 if(isNaN(TIntervalTime)==true)TIntervalTime=0; 32 TIntervalTimeArray[TShiftCount]=TIntervalTime; 33 34 TImgUrlListArray[TShiftCount]=ImgUrlList; 35 TLinkListArray[TShiftCount]=LinkList; 36 TTitleListArray[TShiftCount]=TitleList; 37 38 TImgIndexArray[TShiftCount]=0; 39 TTitleMaxArray[TShiftCount]=TitleMax; 40 TType[TShiftCount]=0; 41 return TShiftCount++; 42 } 43 44 function TAddShiftPic(BigImgObjStr,ImgUrlList,LinkList,TitleList,TIntervalTime) 45 { 46 TImgObjArray[TShiftCount]=document.getElementById(BigImgObjStr); 47 48 if(isNaN(TIntervalTime)==true)TIntervalTime=0; 49 TIntervalTimeArray[TShiftCount]=TIntervalTime; 50 51 TImgUrlListArray[TShiftCount]=ImgUrlList; 52 TLinkListArray[TShiftCount]=LinkList; 53 TTitleListArray[TShiftCount]=TitleList; 54 55 TImgIndexArray[TShiftCount]=0; 56 TType[TShiftCount]=1; 57 return TShiftCount++; 58 } 59 60 function TShiftPicStop(ooi,iPic) 61 { 62 63 if(TType[ooi]>10000){return;} 64 else TType[ooi]+=10000; 65 66 if(ooi<TImgIndexArray.length&&ooi>=0) 67 { 68 if(iPic<TImgUrlListArray[ooi].length&&iPic>=0) 69 { 70 var PicUrl=TImgUrlListArray[ooi][iPic]; 71 if(PicUrl.length>0) 72 { 73 TImgIndexArray[ooi]=iPic; 74 TImgObjArray[ooi].src=PicUrl; 75 if(TImgObjArray[ooi].parentNode.tagName.toLowerCase()=='a') 76 { 77 TImgObjArray[ooi].parentNode.href=TLinkListArray[ooi][iPic]; 78 TImgObjArray[ooi].title=TTitleListArray[ooi][iPic]; 79 } 80 } 81 } 82 } 83 } 84 function TShiftPicShow(ooi) 85 { 86 if(TType[ooi]>10000){TType[ooi]-=10000;} 87 } 88 function TShiftPic(ooi) 89 { 90 var bAll=0; 91 if(isNaN(ooi)==true){ooi=0;bAll=1;} 92 for(i=ooi;i<TShiftCount&&(ooi==0||(ooi!=0&&i<=ooi));i++) 93 { 94 if(TType[i]<10000) 95 { 96 //判断该浏览器是否是IE 97 if (document.all) 98 { 99 //获取IMG控件ID，实现图片渐变效果 100 TImgObjArray[i].filters.revealTrans.Transition=Math.floor(Math.random()*23); 101 //运行 102 TImgObjArray[i].filters.revealTrans.apply(); 103 } 104 //图片链接地址 105 var PicUrl=""; 106 //循环图片链接 107 for(j=0;j<TImgUrlListArray[i].length;j++) 108 { 109 /******获取图片链接地址*******/ 110 /* 111 *1，判断当前是第几张图，TImaIndexArray[i]代表第几张。 112 *2，如过张数小于总数，则i++，否则i=0; 113 *3如果有图片，则跳出当前 114 */ 115 //alert(TImgUrlListArray[i].length); 116 if(TImgIndexArray[i]<TImgUrlListArray[i].length-1){ 117 118 TImgIndexArray[i]++; 119 } 120 else TImgIndexArray[i]=0; 121 PicUrl=TImgUrlListArray[i][TImgIndexArray[i]]; 122 if(PicUrl.length>0)break; 123 } 124 //如果有图片 125 if(PicUrl.length>0) 126 { 127 //设置图片控件的图片路径为，picurl 128 TImgObjArray[i].src=PicUrl; 129 //获得当前图片的标题，当前图片的链接 130 var title=TTitleListArray[i][TImgIndexArray[i]]; 131 var link=TLinkListArray[i][TImgIndexArray[i]]; 132 //如果其不为空，则设置值和显示的内容，链接 133 if(title!=null&&title.length>0) 134 { 135 //设置鼠标放上去显示的内容 136 TImgObjArray[i].title=title; 137 //设置标题链接放上后显示的内容 138 if(TTxtObjArray[i]!=null&&TTxtObjArray[i].parentNode!=null&&TTxtObjArray[i].parentNode.tagName=="A")TTxtObjArray[i].parentNode.title=title; 139 //设置显示的标题 140 if(title.length>TTitleMaxArray[i])title=title.substring(0,TTitleMaxArray[i]-1)+".."; 141 if(TTxtObjArray[i]!=null)TTxtObjArray[i].innerHTML=title; 142 } 143 //如果有链接 144 if(link.length>0) 145 { 146 //给其父级a元素添加链接 147 if(TTxtObjArray[i]!=null&&TTxtObjArray[i].parentNode!=null&&TTxtObjArray[i].parentNode.tagName=="A")TTxtObjArray[i].parentNode.href=link; 148 if(TImgObjArray[i]!=null&&TImgObjArray[i].parentNode!=null&&TImgObjArray[i].parentNode.tagName=="A")TImgObjArray[i].parentNode.href=link; 149 } 150 //图片控件加载时， 151 TImgObjArray[i].onload=function(kki) 152 { 153 this.style.display=""; 154 if(document.all){ 155 try{ 156 this.filters.revealTrans.play(); 157 } 158 catch(e) 159 { 160 } 161 } 162 } 163 } 164 } 165 //如果有时间间隔 166 if(TIntervalTimeArray[i]>0&&bAll==1) 167 { 168 //执行方法 169 setTimeout('TShiftPic('+ooi+')', TIntervalTimeArray[ooi]); 170 return ; 171 } 172 } 173 setTimeout('TShiftPic()', TIntervalTime); 174 }
