js动态添加删除行。滚动条触发CSS3动画

js动态添加删除行

<html>

<head>

<title>js添加删除行</title>

//要确定行的唯一性（提示：你可以使用你的主键）

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 onclick=\"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>

表格：

<tr>

<td>

操控此表格

</td>

<td>

第二列

</td>

</tr>

</table>

</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