导航栏案例1

最新推荐文章于 2022-05-17 18:12:43 发布

勇敢的小凡

最新推荐文章于 2022-05-17 18:12:43 发布

阅读量238

点赞数

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_41485725/article/details/103020582

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

导航栏案例：用到缓动函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{
        margin: 0;
        padding: 0;
    }
    .nav{
        width: 800px;
        height: 58px;
        border: 1px solid #ccc;
        margin: 50px auto;
        border-radius: 15px;
        position: relative;
        background-color: #ccc;
        /* color: #fff; */
    }
    
    #navbar li{
        list-style: none;
        height: 50px;
        width: 80px;
        line-height: 50px;
        color: #fff;
        text-align: center;
        float: left;
        margin: 3px 10px;
        font-weight: 400;
        font-size: 18px;
        /* border: 1px solid red; */
        border-radius: 10px;
        /* background-color: #888888; */
        /* box-shadow: ; */
        text-shadow: 5px #000;
    }
    #cloud{
        width: 80px;
        height: 50px;
        border: 1px solid #fff;
        border-radius: 10px;
        /* background-image: url("cloud.gif") no-repeat; */
        position: absolute;
        top: 2px;
        left: 8px;
        /* background-color: rgba(182, 169, 169,0.5); */
        /* background-image: url("cloud.gif") no-repeat; */

    }
    </style>
</head>
<body>
    <div class="nav">
        <span id="cloud"></span>
        <ul id="navbar">
            <li>北京校区</li>
            <li>上海校区</li>
            <li>广州校区</li>
            <li>武汉校区</li>
            <li>杭州校区</li>
            <li>天津校区</li>
            <li>联系我们</li>
            <li>关于我们</li>
        </ul>
    </div>

    <script src="../../function/function.js"></script>
    <script>
    function animate(element,target){
	clearInterval(element.timeId);
	element.timeId=setInterval(function(){
		var current = element.offsetLeft;
		var step = (target-current)/10;
		step=step>0?Math.ceil(step):Math.floor(step);
		current+=step;
		element.style.left=current+"px";
		if(current==target){
			clearInterval(element.timeId);
		}
	},20);
}
function getStyle(element,attr){
	if(window.getComputedStyle){
		return window.getComputedStyle(element,null)[attr];
	}else{
		return element.currentStyle[attr];
	}
	//return window.getComputedStyle?window.getComputedStyle(element,attr).[attr]:element.currentStyle[attr];
}
function animate1(element,json,fn){
	clearInterval(element.timeId);
	element.timeId=setInterval(function(){
		var flag=true;//默认，假设全部到达目标
		for(var attr in json){
			//判断是普通属性还是层级、透明度
			if(attr=="opacity"){//判断是透明度
				var current=getStyle(element,attr)*100;
				var target=json[attr]*100;
				//移动步数
				var step=(target-current)/10;
				step=step>0?Math.ceil(step):Math.floor(step);
				current+=step;//移动后的值
				element.style[attr]=current/100;
				if(current!=target){
					flag=false;}
			}else if(attr=="z-index"){//判断是层级
				element.style[attr]=json[attr];
			}else if(attr=="font-weight"){
            //获取元素当前的值
				var current=parseInt(getStyle(element,attr));
				var target=json[attr];
				//移动步数
				var step=(target-current)/10;
				step=step>0?Math.ceil(step):Math.floor(step);
				current+=step;//移动后的值
				element.style[attr]=current;
				if(current!=target){
					flag=false;}
            
            }else if(attr=="backgroundColor"){
                //获取元素当前的值
                var current=parseInt(getStyle(element,attr));
				var target=json[attr];
				//移动步数
				var step=(target-current)/10;
				step=step>0?Math.ceil(step):Math.floor(step);
				current+=step;//移动后的值
				element.style[attr]="#"+current;
				if(current!=target){
					flag=false;}

            }else{//判断是普通属性
				//获取元素当前的值
				var current=parseInt(getStyle(element,attr));
				var target=json[attr];
				//移动步数
				var step=(target-current)/10;
				step=step>0?Math.ceil(step):Math.floor(step);
				current+=step;//移动后的值
				element.style[attr]=current+"px";
				if(current!=target){
					flag=false;}}
				}
			if(flag){
				clearInterval(element.timeId);
				//当所有到达目标后执行函数
				if(fn){
					fn();
				}
			}
        },20);}
    var cloud=my$("cloud");
    var list=my$("navbar").children;
    for(var i=0;i<list.length;i++){   
        list[i].onmousemove=mouseoverHand;
        list[i].onclick=mouseclickHand;
        list[i].onmouseout=mouseoutHand;
    }
    var json={"font-weight":900,"opacity":0.8,"font-size":20,"backgroundColor":393019};
    var json1={"font-weight":400,"opacity":1,"font-size":18,"backgroundColor":888818};
    function mouseoverHand(){
        animate(cloud,this.offsetLeft);
        animate1(this,json);
        console.log("22222222");
    }
    var currentPosition=8;
    function mouseclickHand(){
        currentPosition=this.offsetLeft;
    }
    function mouseoutHand(){
        animate(cloud,currentPosition);
        animate1(this,json1);
    }
    </script>
</body>
</html>

效果图：

勇敢的小凡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
导航栏案例1

导航栏案例：用到缓动函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...
复制链接

扫一扫