繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 一个可以随意添加多个序列的tag函数
- Javascript
- 给初学者提供几本学习js值得看的书
- Javascript----文件操作
- Vml+Js算法:完成5个小球在网页运动(碰壁返回)的游戏,详细注释
- Vml+Dhtml:制作一个应用渐变颜色效果不错的进度条
- Dhtml+Js算法:5个小球运动的简化版,变通实现更简单的飞行的图片
- Vml+Dhtml:小小的页面效果,叫它"淘气鬼"好了
- 判断客户浏览器是否支持cookie
- 几种常用的表单输入判断
- CSDN无限级树数据库版(ASP+ACCESS)
- JavaScript 寫遊戲 : 俄羅斯方塊
- JavaScript 寫遊戲 : 搬吖
- JavaScript 遊戲 : 貪吃蛇
- JavaScript 寫時鍾日曆
- VML:经典的图片叠加效果(灰色调)
- 一个简单的仿xp的js下拉菜单
- JScript 寫 sortNode
- 关于javascript中数组元素删除问题的讨论
- IE中非模式对话框(showModelessDialog)应用
- Dhtml:用ondrag事件简单的实现鼠标拖动物件.
- 对WebUI技术感兴趣的说
Javascript 中的 一个可以随意添加多个序列的tag函数
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 156 ::
收藏到网摘: 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
