繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一个可以随意添加多个序列的tag函数
- Javascript
- JS+XML 省份和城市之间的联动实现代码
- ie与firefox下的event使用说明与详细区别
- Jquery 学习笔记（二）
- jQuery技巧大放送 学习jquery的朋友可以看下
- 使用jQuery简化Ajax开发 Ajax开发入门
- jQuery入门 构造函数
- JavaScript iframe的相互操作浅析
- JavaScript null和undefined区别分析
- JavaScript 替换Html标签实现代码
- jQuery 标题的自动翻转实现代码
- JavaScript读取中文cookie时的乱码问题的解决方法
- JavaScript 动态创建VML的方法
- JavaScript Array扩展实现代码
- javascript线性渐变一
- javascript 线性渐变二
- javascript 线性渐变三
- 滑动门式菜单 实现代码
- extjs 学习笔记（三） 最基本的grid
- javascript 操作cookies及正确使用cookies的属性
- JavaScript 基础知识 被自己遗忘的
Javascript 中的 一个可以随意添加多个序列的tag函数
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 188 ::
收藏到网摘: 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
