首先非常感谢网友康松的无私分享，此js特效是一款非常实用的手风琴作品，主要是通过鼠标hover实现切换效果，当前选中项会变高亮，使用非常简单，大家看下看源代码哦，实现全部功能的代码也只有几十行。。。。
js代码如下：
function getCnter(oObj) {
return oObj.getElementsByTagName('div')[0];
}
function slmShow(oObj) {
//触发滑动的
var oPrevObj = oCurrObj;
oCurrObj = oObj;
oPrevObj.className = '';
oCurrObj.className = 'on';
slmPlay(oPrevObj);
}
function slmPlay(oObj) {
//"播放"滑动效果的
getCnter(oCurrObj).style.width = getCnter(oCurrObj).offsetWidth + 30 + 'px';
if (getCnter(oObj).offsetWidth > 67) {
getCnter(oObj).style.width = getCnter(oObj).offsetWidth - 30 + 'px';
}
if (getCnter(oCurrObj).offsetWidth < nTdwid) {
setTimeout(function() {
slmPlay(oObj);
},
20);
} else {
getCnter(oObj).style.width = '67px';
getCnter(oCurrObj).style.width = nTdwid + 'px';
}
}
//得到幻灯所有的TD
var oSlmO = document.getElementById('slide').getElementsByTagName('td');
//600是整宽，40是那个半透明的宽
var nTdwid = 1003 - 67 * (oSlmO.length - 1),
oCurrObj = oSlmO[0];
//初始化一下各图的大小
for (i = 1; i < oSlmO.length; i++) {
oSlmO[i].className = '';
getCnter(oSlmO[i]).style.width = '67px';
}
getCnter(oSlmO[0]).style.width = nTdwid + 'px';
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友康松 选项卡 滑动插件 手风琴效果