繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一个可以随意添加多个序列的tag函数
- Javascript
- 鼠标移动到一张图片时变为另一张图片
- JS画图(非VML)--兼容IE/FF
- 基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
- jQuery的一些注意
- 找到一点可怜的关于dojo资料，谢谢作者！
- JS获取IUSR_机器名和IWAM_机器名帐号的密码
- 用js计算页面执行时间的函数
- JS的IE和Firefox兼容性集锦
- 标准布局应用：对联与旗帜
- XHTML-Strict 内允许出现的标签
- 自动生成文章摘要[JavaScript 版本]
- 飞鱼(shqlsl) javascript作品集
- prototype 1.5相关知识及他人笔记
- XP折叠菜单&仿QQ2006菜单
- 用Javascript轻松制作一套简单的抽奖系统
- 使用脚本控制网页Table的显示隐藏(全代码)_AX
- Javascript代码混淆综合解决方案-Javascript在线混淆器
- 用 JavaScript 迁移目录
- 用简单的脚本实现一款漂亮的下拉菜单
- 建立完全独立的JS对象
Javascript 中的 一个可以随意添加多个序列的tag函数
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 297 ::
收藏到网摘: 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
