纯js实现富有弹性的横向菜单效果像弹簧一样向右弹出 |
| 2021-01-21 23:00:48 35资源网(www.35d.net) |
| js |
下载本资源原文网址：http://www.daima.org/js/js17197.html 纯js实现的左侧横向弹出式菜单效果，鼠标放上去，感觉菜单像弹簧一样的向右弹出，经测试相当不错简单实用。
CSS样式：
[code]
<style>
*{ margin:0px; padding:0px;} body { background:#fff;} .naver{list-style-type:
none; width:700px; overflow:hidden; margin:100px auto 0;} .naver li{ width:100px;
height:50px; overflow:hidden; font-size:16px; text-align:center; cursor:
pointer; } .naver li a,.naver li a:hover{display: block;width:100px; height:50px;
line-height: 50px; color:#FFF; text-decoration: none; } .co1{ background:#649e37}
.co2{ background:#028fbc}
</style>
[/code]
JS脚本：
[code]
<script type="text/javascript">
window.onload = function() {
var oUl = document.getElementById("nav");
var aLi = oUl.getElementsByTagName("li");
var i = 0;
for (i = 0; i < aLi.length; i++) {
aLi[i].timer = null;
aLi[i].speed = 0;
aLi[i].onmouseover = function() {
startMove(this, 250);
};
aLi[i].onmouseout = function() {
startMove2(this, 100);
};
}
};
function startMove(obj, iTarget) {
if (obj.timer) {
clearInterval(obj.timer);
}
obj.timer = setInterval(function() {
doMove(obj, iTarget);
}, 30)
};
function doMove(obj, iTarget) {
obj.speed += 3;
if (Math.abs(iTarget - obj.offsetWidth) < 1 && Math.abs(obj.speed) < 1) {
clearInterval(obj.timer);
obj.timer = null;
}
else {
if (obj.offsetWidth + obj.speed >= iTarget) {
obj.speed *= -0.7;
obj.style.width = iTarget + "px";
}
else {
obj.style.width = obj.offsetWidth + obj.speed + "px";
}
}
};
function startMove2(obj, iTarget) {
if (obj.timer) {
clearInterval(obj.timer);
}
obj.timer = setInterval(function() {
doMove2(obj, iTarget);
}, 30)
};
function doMove2(obj, iTarget) {
obj.speed -= 3;
if (Math.abs(iTarget - obj.offsetWidth) < 1 && Math.abs(obj.speed) < 1) {
clearInterval(obj.timer);
obj.timer = null;
}
else {
if (obj.offsetWidth + obj.speed <= iTarget) {
obj.speed *= -0.7;
obj.style.width = iTarget + "px";
}
else {
obj.style.width = obj.offsetWidth + obj.speed + "px";
}
}
};
</script>
[/code] |
|
|
|
|
|
资源大全_资源下载网站：www.35d.net 本站资源仅限研究学习使用，如需商用请联系版权方， 本站事务联系QQ：939804642
|
|
