Bagaimana untuk melaksanakan kesan penukaran gambar fokus rangkaian kentang tiruan js dengan kemahiran thumbnail_javascript

Contoh dalam artikel ini menerangkan cara melaksanakan kesan penukaran imej fokus rangkaian kentang tiruan js dengan lakaran kecil. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

Salin kod Kod adalah seperti berikut: 仿土豆网带缩略图的焦点图片切换效果 /* Tetapkan semula gaya */ * { margin:0; padding:0; putus-kata:pecah-semua; } badan { latar belakang:#FFF; warna:#333; fon:12px/1.6em Helvetica, Arial, sans-serif; } h1, h2, h3, h4, h5, h6 { saiz fon:1em; } a { color:#039; text-decoration:none; } a:hover { text-decoration:underline; } ul, li { list-style:none; } set medan, img { sempadan: tiada; } em, strong, cite, th { font-style:normal; font-weight:normal; } /* Fokus_tukar gaya */ #focus_change { position:relative; lebar: 450px; ketinggian:295px; limpahan:tersembunyi; jidar:20px 0 1px 60px; } #focus_change_list { position:absolute; lebar: 1800px; ketinggian:295px; } #focus_change_list li { float:left; } #focus_change_list li img { width:450px; ketinggian:295px; } .focus_change_opacity { kedudukan:mutlak; lebar: 450px; ketinggian:70px; atas:225px; kiri:0; latar belakang:#000; penapis:alfa(opacity=50); -moz-opacity:0.5; kelegapan: 0.5; } #focus_change_btn { position:absolute; lebar: 450px; ketinggian:65px; atas:225px; kiri:0; } #focus_change_btn ul { padding-left:5px; } #focus_change_btn li { display:inline; float:left; jidar:0 15px; padding-top:12px; } #focus_change_btn li img { width:76px; ketinggian:50px; sempadan:2px pepejal #888; } #focus_change_btn .current { background:url(/uploadfile/200901/1/6C164133877.gif) no-repeat 37px 8px;} #focus_change_btn .img semasa { border-color:#EEE; } fungsi $(id) { return document.getElementById(id); } function moveElement(elementID,final_x,final_y,interval) { jika (!document.getElementById) mengembalikan palsu; jika (!document.getElementById(elementID)) mengembalikan palsu; var elem = document.getElementById(elementID); jika (elem.pergerakan) { clearTimeout(elem.movement); } jika (!elem.style.left) { elem.style.left = "0px"; } jika (!elem.style.top) { elem.style.top = "0px"; } var xpos = parseInt(elem.style.left); var ypos = parseInt(elem.style.top); jika (xpos == final_x && ypos == final_y) { kembali benar; } jika (xpos var dist = Math.ceil((final_x - xpos)/10); xpos = xpos dist; } jika (xpos > final_x) { var dist = Math.ceil((xpos - final_x)/10); xpos = xpos - dist; } jika (ypos var dist = Math.ceil((final_y - ypos)/10); ypos = ypos dist; } jika (ypos > final_y) { var dist = Math.ceil((ypos - final_y)/10); ypos = ypos - dist; } elem.style.left = xpos "px"; elem.style.top = ypos "px"; var repeat = "moveElement('" elementID "'," final_x "," final_y "," interval ")"; elem.movement = setTimeout(ulang, selang); } function classNormal(){ var focusBtnList = $('focus_change_btn').getElementsByTagName('li'); for(var i=0; i focusBtnList[i].className=''; } } fungsi focusChange() { var focusBtnList = $('focus_change_btn').getElementsByTagName('li'); focusBtnList[0].onmouseover = function() { moveElement('focus_change_list',0,0,5); classNormal() focusBtnList[0].className='current' } focusBtnList[1].onmouseover = function() { moveElement('focus_change_list',-450,0,5); classNormal() focusBtnList[1].className='current' } focusBtnList[2].onmouseover = function() { moveElement('focus_change_list',-900,0,5); classNormal() focusBtnList[2].className='current' } focusBtnList[3].onmouseover = function() { moveElement('focus_change_list',-1350,0,5); classNormal() focusBtnList[3].className='current' } } setInterval('autoFocusChange()', 5000); var atuokey = palsu; fungsi autoFocusChange() { $('focus_change').onmouseover = function(){atuokey = true} $('focus_change').onmouseout = function(){atuokey = false} jika(atuokey) kembali; var focusBtnList = $('focus_change_btn').getElementsByTagName('li'); for(var i=0; i if (focusBtnList[i].className == 'semasa') { var currentNum = i; } } jika (Nombor semasa==0 ){ moveElement('focus_change_list',-450,0,5); classNormal() focusBtnList[1].className='current' } jika (Nombor semasa==1 ){ moveElement('focus_change_list',-900,0,5); classNormal() focusBtnList[2].className='current' } jika (nombor semasa==2 ){ moveElement('focus_change_list',-1350,0,5); classNormal() focusBtnList[3].className='current' } jika (nombor semasa==3 ){ moveElement('focus_change_list',0,0,5); classNormal() focusBtnList[0].className='current' } } window.onload=function(){ focusChange(); } 希望本文所述对大家的javascript程序设计有所帮助。