一个可以随意添加多个序列的tag函数

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了一个可以随意添加多个序列的tag函数，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2513字，纯文字阅读大概需要4分钟。

内容图文

<script type="text/javascript"> 
var tag = function(parentTagId, sunTag){ 
var oldHtml = []; 
var spans=[]; 
var tagElemment = document.getElementById(parentTagId); 
var sunElems = tagElemment.getElementsByTagName(sunTag); 
for (var i = 0; i < sunElems.length; i++) { 
oldHtml[oldHtml.length] = sunElems[i].innerHTML; 
sunElems[i].style.display = "none"; 
} 
var newElem = document.createElement("div"); 
newElem.innerHTML = oldHtml[0]; //初始化div 
tagElemment.appendChild(newElem); 
var clearID = 0, index = 0; 
clearID = setInterval(function(){ 
if(index>=1) spans[index-1].style.border="1px dotted #ccc"; 
if(index==sunElems.length-1) index=0; 
newElem.innerHTML = oldHtml[index]; 
index++; 
spans[index-1].style.border="1px solid #666"; 
}, 2000); 
for (var i = 0; i < oldHtml.length; i++) { 
var span = document.createElement("span"); 
span.innerHTML = (i + 1).toString(); 
span.id="span_tab"+i; 
span.html = oldHtml[i]; //存儲對應的原來的div裏面的HTML 
spans[i]=span; 
span.onmouseover = function(){ 
if(index>=1) spans[index-1].style.border="1px dotted #ccc"; 
newElem.innerHTML = this.html; //對應賦值 
clearInterval(clearID); 
} 
span.onmouseout = function(){ 
index=parseInt(this.innerHTML); 
if(index>=1) spans[index-1].style.border="1px solid #666"; 
clearID = setInterval(function(){ 
if(index>=1) spans[index-1].style.border="1px dotted #ccc"; 
if(index==sunElems.length-1) index=0; 
newElem.innerHTML = oldHtml[index]; 
index++; 
spans[index-1].style.border="1px solid #666"; 
}, 2000); 
} 
tagElemment.appendChild(span); 
span = null; 
} 
spans[0].style.border="1px solid #666"; //初始化span 
} 
onload = function(){ 
tag("tag", "div"); //调用tag函数 
} 
</script> 
<style type="text/css"> 
#tag { 
border: 1px solid #eee; 
float: left; 
} #tag span { 
border: 1px dotted #ccc; 
background: #eee; 
padding: 1px 6px; 
margin-right: 8px; 
} #tag span:hover { 
background: #ccc; 
border: 1px solid #666; 
} 
</style> 
 
HTML代码： 
 代码如下:

<div id="tag"> 
<div> 
<p> 
<b>Tag demo 1,</b> 
I will achive it. 
</p> 
</div> 
<div> 
<p> 
<b>Tag demo 2,</b> 
I will achive it. 
</p> 
</div> 
<div> 
<p> 
<b>Tag demo 3,</b> 
I will achive it. 
</p> 
</div> 
<div> 
<p> 
<b>Tag demo 4,</b> 
I will achive it. 
</p> 
</div> 
<div> 
<p> 
<b>Tag demo 5,</b> 
I will achive it. 
</p> 
</div> 
<div> 
<p> 
<b>Tag demo 6,</b> 
I will achive it. 
</p> 
</div> 
<!--....可以随意添加多个tag....--> 
</div> 

            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的一个可以随意添加多个序列的tag函数全部内容，希望文章能够帮你解决一个可以随意添加多个序列的tag函数所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端