js动态添加删除行
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>js添加删除行</title>
<script type="text/javascript">
//要确定行的唯一性(提示:你可以使用你的主键)
var id=1;
//添加行的方法
function addTr()
{
//获得表格对象
var tb=document.getElementById('testTab');
//添加一行
var newTr = tb.insertRow(-1);//在最下的位置
//给这个行设置id属性,以便于管理(删除)
newTr.id='tr'+id;
//设置对齐方式(只是告诉你,可以以这种方式来设置任何它有的属性)
newTr.align='center';
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
//设置列内容和属性
newTd0.innerHTML = "本行id为:"+id; //让你看到删除的是指定的行
newTd1.innerHTML= "<button οnclick=\"moveTr('"+id+"');\" >移除</button>";;
id++;
}
//移除行的方法
function moveTr(id)
{
//获得表格对象
var tb=document.getElementById('testTab');
//根据id获得将要删除行的对象
var tr=document.getElementById('tr'+id);
//取出行的索引,设置删除行的索引
tb.deleteRow(tr.rowIndex);
}
</script>
</head>
<body>
<center>
表格:
<table id="testTab" border="1" bordercolor="red" width="700px" height="300px">
<tr>
<td>
操控此表格
</td>
<td>
第二列
</td>
</tr>
</table>
<button οnclick="addTr();">添加一行</button>
</center>
</body>
</html>
==========================================================================================
滚动条触发CSS3动画
在这篇教程中,我将为你介绍如何在页面滚动时触发CSS动画。这种效果使用JavaScript和CSS就能做到。
Jeet Grid System website 就是使用这种小技巧的例子,当你向下滚动的时候,CSS的de style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em;" >transformde>、de style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em;" >animationde>就被触发了。
想要达到这种目的,有很多Javascript/jQuery 插件可以用,比如WOW,在这篇教程中,我将为你展示如何不适用插件做到这种效果。
模板
那么我们开始了,首先是写好HTML标签,de style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em;" >revealOnScrollde>类必须家在需要在滚动时触发的元素上面。
de style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-; background-repeat: initial;" ><div data-animation="flipInX" data-timeout="400">...some content here... de>
de style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em;" >data-animationde>这个属性声明了将会触发de style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em;" >animation.cssde>中animation的名字,当然添加额外的de style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em;" >timeoutde>参数也可以使用同样的方法,这样做当你有很多元素在同个位置被触发时很有用。
Javascript 和 CSS animation
然后,我们需要定义一些变量在JavaScript文件的顶部,(不要忘记加载jQuery和Modernizr需要检查是否为触摸设备)。还有为了实现动画效果,我加载了de style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em;" >animation.cssde>
de style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-; background-repeat: initial;" >var $window = $(window), win_height_padded = $window.height() * 1.1, isTouch = Modernizr.touch; de>
然后我们需要监听滚动事件,并触发我们的函数。
de style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-; background-repeat: initial;" >$window.on('scroll', revealOnScroll); de>
在de style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em;" >revealOnScrollde>函数里面我们检查元素是否需要执行动画,如果是,de style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em;" >animationde>类就会添加,并触发了CSS animation。
de style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-; background-repeat: initial;" >function revealOnScroll() { var scrolled = $window.scrollTop(); $(".revealOnScroll:not(.animated)").each(function () { var $this = $(this), offsetTop = $this.offset().top; if (scrolled + win_height_padded > offsetTop) { if ($this.data('timeout')) { window.setTimeout(function(){ $this.addClass('animated ' + $this.data('animation')); }, parseInt($this.data('timeout'),10)); } else { $this.addClass('animated ' + $this.data('animation')); } } }); de>
是不是很容易就完成了~ 还有另一个小技巧,当元素不可见的时候,de style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em;" >animationde>类被移掉,这样在一次请求里面多次de style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em;" >animatede>动画。
本文根据@Beno?t Boucart的《ANIMATIONS ON SCROLL》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://blog.webbb.be/trigger-css-animation-scroll/。
著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: http://www.w3cplus.com/css3/trigger-css-animation-scroll.html ? w3cplus.com