js实现标签下划线平移-创新互联

一.使用js实现导航行栏,点击时,下划线会跟着鼠标的点击移动。

成都创新互联是一家专业提供双滦企业网站建设,专注与成都做网站、成都网站制作、H5响应式网站、小程序制作等业务。10年已为双滦众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

html代码如下:

        1
    2
    3
        
       

css代码如下:

             *{
                 margin:0;
                 padding:0;
              }
              body{
		background: url("./img/wallhaven1.png");
		  }
            .item{
            	width: 100px;
            	height: 30px;
                margin-bottom: 5px;
                margin-left: 5px;
                padding: 5px 10px;
            	background: #B89C9B;
            	text-align: center;
                line-height: 30px;
            	color:white;
            	border-radius: 10px;

            }      
           
           
            #line{
                color:red;
                width: 4px;
                height: 40px;
                background: red;
                position: absolute;
                top:0px;
                padding-right: 1px;
            }

js代码如下:

效果图:

默认时,红色横线在1标签处,点击2时,红色标签,会根据移动函数进行移动,如图(2)

js实现标签下划线平移

js实现标签下划线平移

二.在此基础上,根据css3来实现横线的过度平滑效果。

html代码如下:

        课程学习     课程笔记     课程练习     课程相关     课程拓展              
                   

css代码如下:

        .item1{  
                width: 100px;
            	height: 30px;
                margin-bottom: 5px;
                margin-left: 5px;
                padding: 5px 10px;          	
            	background: #1E293B;             
            	float:left;
            	text-decoration:none; 
                color:white;
                 line-height: 30px;
            	border-radius: 10px;

            }             
            
             #line1{
                color:red;
                width: 120px;
                height: 2px;
                background: red;
                position: absolute;
                top:175px;
                left:5px;
                padding-top: 1px;
               
            }
            #nav2{
            	 list-style-type: none; 
            }
            #nav2 a{
            	display: block;
                text-decoration:none; 
                color:white;
            }
            #nav2 a:hover{
            	background-color: #1E291a;
            	color:red;
            }
            #pic{
            	margin-top:80px; 
            	margin-left: 10px;
            

            }
            img{
            	width: 200px;
            	height:200px;
            	border-radius: 15px;
            }
            .effect0{
            	transform: translateX(1px);
            	transition:all  2s;
            }
            .effect{             	
            	transform: translateX(125px);
            	transition:all  2s;
            }
             .effect2{             	
            	transform: translateX(250px);
            	transition:all  2s;
            }
             .effect3{             	
            	transform: translateX(375px);
            	transition:all  2s;
            }
             .effect4{             	
            	transform: translateX(500px);            	
            	transition:all  2s;
            }
           .piceffect{
                transform: translateX(600px) scale(1.5);
                transition: all 2s;
           }

js代码如下:

var nav2 = document.getElementById('nav2'); 
var pic = document.getElementById('pic');
nav2.addEventListener("click",move,false);
function move(event){
    	 	 var event=event||window.event;
	       	 var target=event.target||event.srcElement;;
	       	 switch(target.id){
	       	 	case "id11":           
                     line1.className = "effect0";
	       	         pic.className = "effect0";
	       	         break;
	       	    case "id21":       
	       	         line1.className = "effect";
	       	         pic.className = "effect";
	       	          break;
	       	    case "id31":
	       	         line1.className = "effect2";
	       	         pic.className = "effect2";
	       	         break;
	       	    case "id41":       	    
		       	      line1.className = "effect3";
		       	      pic.className = "effect3";
		       	      break;
	       	    case "id51":	       	      
	       	        line1.className = "effect4";
	       	        pic.className = "effect4";
	       	        break;	       	 	   
	       	 }
	       	    }    
	  pic.addEventListener("click",showbig,false);
	  function showbig(){	  	
	  	pic.className="piceffect";
	  }

效果图:

当鼠标没有点击标签时,横线默认是在第一个标签下,如图:

js实现标签下划线平移当点击任何一个标签,下划线和图片就会平滑的过度到点击的那个标签下,如图:

js实现标签下划线平移

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


当前文章:js实现标签下划线平移-创新互联
链接URL:http://scyanting.com/article/ccgjgo.html

其他资讯