js实现标签下划线平移

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

html代码如下:

<header>
	   <div id="nav1">
	    <div id="id1" class="item">1</div>
	    <div id="id2" class="item">2</div>
	    <div id="id3" class="item">3</div>	   
	    </div>
	    <div id="line"></div>
  </header>

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代码如下:

<script>
function avtiveLineTop(n) {
  document.getElementById(‘line‘).style.top = n + ‘px‘;
};   
   var nav1 = document.getElementById("nav1");   
   var items = document.getElementsByClassName(‘item‘);  
   	   nav1.addEventListener("click",handle,false);   	  
    	 function handle(event){
    	 	 var event=event||window.event;
	       	 var target=event.target||event.srcElement;;
	       	 switch(target.id){
	       	 	case "id1": 	 	                       
                     avtiveLineTop(0);   
	       	         break;
	       	    case "id2":	       	       
	       	         avtiveLineTop(45);
	       	         break;
	       	     case "id3":
	       	         avtiveLineTop(90);
	       	         break;        	 	   
	       	 }
	       }
	</script>

效果图:

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

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

html代码如下:

<section>
	   <ul id="nav2">
		    <li  class="item1"><a href="#" id="id11">课程学习</a></li>
		    <li  class="item1"><a href="#" id="id21">课程笔记</a></li>
		    <li  class="item1"><a href="#" id="id31">课程练习</a></li>
		    <li  class="item1"><a href="#" id="id41">课程相关</a></li>
		    <li  class="item1"><a href="#" id="id51">课程拓展</a></li>
	    </ul>
	    <div id="line1"></div>
   </section> 
   <div style="clear:both;"></div>
  <div id="pic">
  	   <img src="./img/wallhaven3.png" alt="人物"> 
  </div>

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";
	  }

效果图:

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

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

时间: 2024-10-31 10:54:12

js实现标签下划线平移的相关文章

js往标签下插入标签的方法

js="document.getElementsByClassName('CodeMirror-line')[0].innerHTML = 'xxxxxx'"dr.execute_script(js) 原来 插入后 xxxx 也可以换成其他一连串标签 原文地址:https://www.cnblogs.com/kaibindirver/p/11657582.html

css基础 给p标签中的内容 加粗,斜体,下划线,字体大小

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ part code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8

超链接标签a样式生效,取消下划线,文字垂直(上下)居中

直接设置超链接标签a的属性时并不会生效, 需要将display属性改为inline-block, 即style="display:inline-block" 添加标签a时,默认是有下划线的, 如果想要取消则设置,style="text-decoration:none" 如果只设置了行高(height), 则无法设置垂直居中,文字会在标签上方显示. 如果想要垂直居中显示,则还需要设置line-height属性,与height等高即可.

a标签去掉下划线

转载自:http://jingyan.baidu.com/article/a17d52853095838099c8f24e.html <a>是默认有下划线的.所以有时候为了美观,我们需要去掉下划线,使网页更加美观 方法/步骤 正常状态下的a标签是这样的. 去掉下划线只需要在样式里面加入 a{ text-decoration:none; } 或者 <a href="www.kanbuchuan.com"style='text-decoration:none;'>这

Html学习(二)font 加粗 斜体 下划线标签学习

代码: <font size="10">6</font> <font size="2">6</font> <font color="red" size="10">红色 字号10的6</font> <font face="黑体" size="20" >这是黑色的字</font> <b>

如何去掉a标签的下划线

首先来了解下<a>标签的一些样式: <a>标签的伪类样式 一组专门的预定义的类称为伪类,主要用来处理超链接的状态.超链接文字的状态可以通过伪类选择符+样式规则来控制.伪类选择符包括: 总: a 表示所有状态下的连接 如 a{color:red} ① a:link:未访问链接 ,如 a:link {color:blue} ② a:visited:已访问链接 ,如 a:visited{color:blue} ③ a:active:激活时(链接获得焦点时)链接的颜色 ,如 a:activ

去掉a标签的下划线

<a>标签的伪类样式 一组专门的预定义的类称为伪类,主要用来处理超链接的状态.超链接文字的状态可以通过伪类选择符+样式规则来控制.伪类选择符包括: 总: a          表示所有状态下的连接 如 a{color:red} ① a:link:未访问链接 ,如 a:link {color:blue} ② a:visited:已访问链接 ,如 a:visited{color:blue} ③ a:active:激活时(链接获得焦点时)链接的颜色 ,如 a:active{color:blue} ④

js判断字符串是否有下划线

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js判断字符串是否有下划线</title> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> <

xss其他标签下的js用法总结大全

前段时间我遇到一个问题,就是说普通的平台获取cookie的语句为↓ Default 1 <script src=js地址></script> 实际上我们的测试语句可能为↓ Default 1 <script>alert("90sec")</script> 也就是说js语句实际上是位于↓<script></script>的中间. 包括<img>.<input>.<object>.&