繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一个可以随意添加多个序列的tag函数
- Javascript
- javascript 支持链式调用的异步调用框架Async.Operation
- JavaScript 异步调用框架 (Part 6 - 实例 & 模式)
- 让JavaScript 轻松支持函数重载 (Part 1 - 设计)
- 让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
- javascript dragable的Move对象
- 同一个表单 根据要求递交到不同页面的实现方法小结
- Extjs ajax同步请求时post方式参数发送方式
- 实现连缀调用的map方法(prototype)
- javascript Array.remove() 数组删除
- asp(javascript)全角半角转换代码 dbc2sbc
- jquery select(列表)的操作（取值/赋值）
- JavaScript 乱码问题
- js正确获取元素样式详解
- JQuery 小练习(实例代码)
- JavaScript 的方法重载效果
- JavaScript 变量作用域及闭包
- jQuery 解析xml文件
- javascript 当前日期加(天、周、月、年)
- Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
- 上传图片时JS自动显示图片
Javascript 中的 一个可以随意添加多个序列的tag函数
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 183 ::
收藏到网摘: 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
