繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一个可以随意添加多个序列的tag函数
- Javascript
- 我也种棵OO树JXTree[js+css+xml]
- 新浪中用来显示flash的函数
- JXTree对象，读取外部xml文件数据，生成树的函数
- 用js来格式化字符串示例模仿css
- js prototype 格式化数字 By shawl.qiu
- 新浪刚打开页面出来的全屏广告代码
- 记录几个javascript有关的小细节
- Some tips of wmi scripting in jscript (1)
- JavaScript Try...Catch 声明的 使用方法
- JS版获取字符串真实长度和取固定长度的字符串函数
- Javascript中的数学函数
- ArrayList类（增强版）
- javascript中巧用“闭包”实现程序的暂停执行功能
- javascript判断单选框或复选框是否选中方法集锦
- FireFox的getYear的注意事项
- JavaScript For...In 使用方法
- JavaScript Switch 声明
- JavaScript If...Else 声明
- JavaScript For 循环
- JavaScript While 循环 教程
Javascript 中的 一个可以随意添加多个序列的tag函数
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 381 ::
收藏到网摘: n/a
由于在没有规划好的情况下写的这个代码，写的比较粗糙，也没有添加注释。 JavaScript代码和HTML完全分离；可以随意添加多个子div标签，自动扩展 /**
* @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>
<!--....可以随意添加多个tag....-->
</div>
评论 (0) All
