分享一款手机滑动菜单,显示图片和描述的效果。
HTML
<ul>
<li>
<img src="images/1.jpg" alt="javascript高级前端开发课程"/>
<a href="http://www.sucaihuo.com/js">网页特效<br /><span>高级前端开发课程</span></a>
<span class="bg"></span>
</li>
<li>
<img src="images/2.jpg" alt="XHTML+CSS高级页面架构师课程" />
<a href="http://www.sucaihuo.com/templates">网站模板<br /><span>高级页面架构师课程</span></a>
<span class="bg"></span>
</li>
</ul>
JS
window.onload = function() {
var oDiv = document.getElementById('box');
var aLi = oDiv.getElementsByTagName('ul')[0].getElementsByTagName('li');
var iTime = 400;
var iTime2 = 200;
var i = 0;
var duringA = function() {
css(this, 'marginLeft', -(css(this, 'width')) / 2 - 1);
};
for (i = 0; i < aLi.length; i++) {
aLi[i].onmouseover = function() {
var oImg = this.getElementsByTagName('img')[0];
var oA = this.getElementsByTagName('a')[0];
var oBg = this.getElementsByTagName('span')[1];
if (this.timer) {
clearTimeout(this.timer);
this.timer = null;
return;
}
oA.onmouseover = oImg.onmouseover = oBg.onmouseover = function(ev) {
if (this.parentNode.timer) {
clearTimeout(this.parentNode.timer);
this.parentNode.timer = null; (ev || event).cancelBubble = true;
}
};
oImg.onmouseout = oA.onmouseout = oBg.onmouseout = function(ev) {
var oParent = this.parentNode;
if (oParent.timer) clearTimeout(oParent.timer);
oParent.timer = setTimeout(function() {
oParent.onmouseout();
oParent.timer = null;
},
200); (ev || event).cancelBubble = true;
};
miaovStartMove2(oImg, {
width: 153
},
MIAOV_MOVE_TYPE.FLEX,
function() {
css(this, 'marginLeft', -78);
},
duringA);
miaovStartMove2(oA, {
top: 56,
paddingTop: 36,
paddingBottom: 36
},
MIAOV_MOVE_TYPE.FLEX);
miaovStartMove2(oBg, {
height: 115
},
MIAOV_MOVE_TYPE.BUFFER);
};
aLi[i].onmouseout = function() {
var oImg = this.getElementsByTagName('img')[0];
var oA = this.getElementsByTagName('a')[0];
var oBg = this.getElementsByTagName('span')[1];
miaovStartMove2(oImg, {
width: 0
},
MIAOV_MOVE_TYPE.BUFFER,
function() {
css(this, 'marginLeft', 0);
},
duringA);
miaovStartMove2(oA, {
top: 4,
paddingTop: 8,
paddingBottom: 0
},
MIAOV_MOVE_TYPE.BUFFER);
miaovStartMove2(oBg, {
height: 0
},
MIAOV_MOVE_TYPE.BUFFER);
};
}
};
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791