집 > 기사 > 웹 프론트엔드 > jb51 웹마스터가 추천하는 js를 사용하여 구현된 여러 브라우저에서 지원되는 이미지 회전 표시 효과, 즉 firefox_image 특수 효과

jb51 웹마스터가 추천하는 js를 사용하여 구현된 여러 브라우저에서 지원되는 이미지 회전 표시 효과, 즉 firefox_image 특수 효과

WBOY원래의: 2016-05-16 19:16:42879검색

jb51 웹마스터가 추천한 js를 사용하여 구현한 멀티 브라우저 지원 이미지 회전 표시 효과는 IE, Firefox 및 테스트에서 잘 작동합니다. 앞으로는 더 나은 호환성으로 이러한 코드를 사용하는 것이 좋습니다

<br><input onclick="runEx('runcode55021')" type="button" value="运行代码">
<input onclick="doCopy('runcode55021')" type="button" value="复制代码"><input onclick="doSave(runcode55021)" type="button" value="保存代码"><a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank"> </a> </div>[Ctrl A 모두 선택 참고: <script language="javascript"> 
 
</script>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 <script language="javascript" type="text/javascript"> 
"); 
p$(""); 
function change(){ 
if (ver==1){ 
with($('f_img').filters[0]){ 
Transition=1; 
apply(); 
play();  
} 
} 
if (firstTime){ firstTime=false;timeOut=_timeOut_/1000;} 
else{      
$('f_img').src=imgUrl[now]; 
$('f_img').alt=imgAlt[now]; 
$('f_imgLink').href=imgLink[now]; 
if (show_text) $('f_text').innerHTML=imgText[now];         
for (var i=0;i<count;i++) { 
$('b'+i).className="button"; 
$('f_menu'+i).className=""; 
} 
$('b'+now).className="on";     
$('f_menu'+now).className="on";      
now=(now>=imgUrl.length-1)?0:now+1; 
timeOut=_timeOut_;          
} 
theTimer=setTimeout("change()", timeOut); 
} 
function b_change(num){ 
window.clearInterval(theTimer);  
now=num; 
firstTime=false; 
change(); 
} 
//draw 渐变line （即css:f_line) 
function draw_line(){ 
var div = document.createElement("div");     
div.id = 'f_line'; 
$('f_infoDiv').insertBefore(div,$('f_infoDiv').childNodes.item(0));             
} 
//表现层 start     
//menu 
for(var i=0;i<count;i++){ 
var menu = document.createElement("a");         
//menu.className="f_menu"+i; 
menu.id="f_menu"+i; 
menu.href='#'; 
menu.value=i;         
menu.onmouseover=function(){b_change(this.value);}; 
menu.title=imgAlt[i]; 
menu.innerHTML=menuList[i]; 
$('f_menu').appendChild(menu); 
} 
//图片 
var a = document.createElement("a");         
a.id="f_imgLink"; 
a.target=target; 
a.href=imgLink[now];     
$('f_imgDiv').appendChild(a); 
var img = document.createElement("img");     
img.id="f_img"; 
img.width=imgWidth; 
img.height=imgHeight; 
img.src=imgUrl[now]; 
img.alt=imgAlt[now]; 
a.appendChild(img); 
//数字按钮 
for (var i=count-1;i>=0;i--){ 
var div_bg = document.createElement("div");         
div_bg.id = 'div_bg'+i; 
div_bg.className='bg'; 
$('f_buttonDiv').appendChild(div_bg);     
var a = document.createElement("a");         
a.id = 'b'+i; 
a.className = (i==now+1)?"button_on":"button_off";         
a.title=imgAlt[i]; 
a.innerHTML=i+1; 
a.href='javascript:b_change('+i+')';         
$('div_bg'+i).appendChild(a);     
var div= document.createElement("div"); 
$('f_buttonDiv').appendChild(div);             
}         
if (show_text) $('f_text').innerHTML = imgText[now]; 
//表现层 end 
$('f_img').onmouseover=function(){window.clearInterval(theTimer);} 
$('f_img').onmouseout=function(){theTimer=setTimeout("change()", timeOut2);} 
try{  //滤镜版本 
new ActiveXObject("DXImageTransform.Microsoft.Fade"); 
$('f_img').filters[0].play();       
ver=1; 
draw_line();  
} 
catch (e){ver=2;} 
var theTimer = setTimeout("change()", _timeOut_/1000); 
//--> 
</script>]

성명：

이전 기사：Roll.js를 사용한 그림 자동 스크롤 및 마우스 touch_javascript 기술의 특수 효과다음 기사：Roll.js를 사용한 그림 자동 스크롤 및 마우스 touch_javascript 기술의 특수 효과

jb51 웹마스터가 추천하는 js를 사용하여 구현된 여러 브라우저에서 지원되는 이미지 회전 표시 효과, 즉 firefox_image 특수 효과

관련 기사