js弹性运动滑动的菜单
<!DOCTYPE html>
<html lang="en">
<head>
?<meta charset="UTF-8">
?<title>彈性運動效果下滑的菜單</title>
?<script>
??window.onload = function(){
???var oUl = document.getElementById('oul');
???var oLi = oul.getElementsByTagName('li');
???var oLine = document.getElementById('#underline');
???var oLine= oLi[oLi.length-1]
???for(var i = 0; i < oLi.length-1; i++){
????oLi[i].onmouseover = function(){
?????move(oLine,this.offsetLeft);
?????console.log(this.offsetLeft)
????}
???}
??}
//封裝好的函數(shù)：
??var speed = 0;
??var left = 0;
??function move(obj,target){
???clearInterval(obj.timer);
???obj.timer = setInterval(function(){
????speed += (target - obj.offsetLeft)/5;
????speed *= 0.7;
????left += speed;
????obj.style.left = left + "px";
????if(Math.abs(speed)<1&&Math.abs(target-left)<1){
?????obj.style.left = target + "px";
?????clearInterval(obj.timer);
????}
????document.title = obj.style.left + '|' + target;
???}, 30)
??}
?</script>
?<style>
??*{
???margin: 0;
???padding: 0;
??}
??li{
???list-style: none;
???float: left;
???width: 100px;
???height: 30px;
???border: 1px solid #ccc;
???position: relative;
???text-align: center;
???line-height: 30px;
???z-index: 2;
???cursor: pointer;
??}
??#underline{
???width: 101px;
???height: 5px;
???background-color: red;
???position: absolute;
???overflow: hidden;
???border: none;
???top: 26px;
???left: 0;
???z-index: 1;
??}
??ul{
???width: 508px;
???height: 30px;
???position: relative;
???margin: 100px auto 0;
??}
?</style>
</head>
<body>
?<ul id="oul">
??<li>首頁</li>
??<li>關(guān)于我們</li>
??<li>產(chǎn)品</li>
??<li>聯(lián)系方式</li>
??<li id="underline"></li>
?</ul>
</body>
</html>
轉(zhuǎn)載于:https://www.cnblogs.com/zy88zj91/p/7083035.html
總結(jié)
以上是生活随笔為你收集整理的js弹性运动滑动的菜单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PAI分布式机器学习平台编程模型演进之路
- 下一篇： hdu 4850 字符串构造---欧拉回