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

/** * @author Supersha * @QQ:770104121 */ 由于在没有规划好的情况下写的这个代码，写的比较粗糙，也没有添加注释。主要特点：JavaScript代码和HTML完全分离；可以随意添加多个子div标签，自动扩展 JavaScript代码：复制代码代码如下: <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>  </div>

　　推荐阅读

　　JQuery 学习笔记选择器之二

复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta >>>详细阅读

本文标题：一个可以随意添加多个序列的tag函数

地址：http://www.17bianji.com/kaifa2/JS/28397.html

1/2 1