光阴轴效果分析。时间轴效果分析。

光阴轴效果分析。时间轴效果分析。

则日子轴早已不是呀独特事物了,个人只有是感谢兴趣所以尽管研究一下,最近于网上查找了一个个人感觉比较好的时日轴demo,下载下来研究了瞬间并开了下修改.具体的作用使下图:(该demo实现的凡滚加载图片)

尽管时间轴早已不是呀异样事物了,个人只是感谢兴趣所以就算钻研一下,最近打网上搜了一个个人感觉比较好之时间轴demo,下载下来研究了瞬间连开了下修改.具体的法力使下图:(该demo实现之是滚加载图片)

代码地址:http://files.cnblogs.com/files/cby-love/html5响应式时间轴.zip

代码地址:http://files.cnblogs.com/files/cby-love/html5响应式时间轴.zip

图片 1

图片 2

什么贯彻滚动加载图片的?最重大是以下的代码有:

哪实现滚动加载图片的?最要是以下的代码有:

(function() {
  $(document).ready(function() {
    var timelineAnimate;
    timelineAnimate = function(elem) {
      return $(".timeline.animated .timeline-row").each(function(i) {
        var bottom_of_object, bottom_of_window;
        bottom_of_object = $(this).position().top + $(this).outerHeight();
        bottom_of_window = $(window).scrollTop() + $(window).height();
        if (bottom_of_window > bottom_of_object) {
          return $(this).addClass("active");
        }
      });
    };
    timelineAnimate();
    return $(window).scroll(function() {
      return timelineAnimate();
    });
  });

}).call(this);
(function() {
  $(document).ready(function() {
    var timelineAnimate;
    timelineAnimate = function(elem) {
      return $(".timeline.animated .timeline-row").each(function(i) {
        var bottom_of_object, bottom_of_window;
        bottom_of_object = $(this).position().top + $(this).outerHeight();
        bottom_of_window = $(window).scrollTop() + $(window).height();
        if (bottom_of_window > bottom_of_object) {
          return $(this).addClass("active");
        }
      });
    };
    timelineAnimate();
    return $(window).scroll(function() {
      return timelineAnimate();
    });
  });

}).call(this);

因为我们的样例中实际还非是彻头彻尾的动态加载图片(即动态生成html标签和dom元素,后续可以还错过贯彻),只是把本页面中之隐蔽或者说管opacity属性值由0变吗1了.通过看以上代码,这个地方实在是发只小算法的.

盖我们的样例中其实还未是纯的动态加载图片(即动态生成html标签以及dom元素,后续可以重新失去实现),只是把原页面被的隐蔽或者说将opacity属性值由0变也1了.通过看以上代码,这个地方莫过于是产生个小算法的.

if (bottom_of_window > bottom_of_object) 才会去给当前对象(即类控制器为.timeline.animated .timeline-row的对象)添加类选择器active(暂且先不具体该类选择器实现什么效果)
我们先讨论下这两个值bottom_of_window和bottom_of_object

bottom_of_window = $(window).scrollTop() + $(window).height();

$(window).scrollTop()表示当前滚动条的位置距离页面顶端的距离,其实可以理解为页面滚动条拉到某个位置,顶部隐藏的页面内容的高度;

$(window).height()表示当前可视页面区域的高度;

bottom_of_object = $(this).position().top + $(this).outerHeight();

$(this).position().top表示当前元素距离父元素的距离,个人理解为应该就是margintop的值吧,

$(this).outerHeight()表示当前元素的高度还有padding+border,但不包括margin
如下盒子模型:
if (bottom_of_window > bottom_of_object) 才会去给当前对象(即类控制器为.timeline.animated .timeline-row的对象)添加类选择器active(暂且先不具体该类选择器实现什么效果)
我们先讨论下这两个值bottom_of_window和bottom_of_object

bottom_of_window = $(window).scrollTop() + $(window).height();

$(window).scrollTop()表示当前滚动条的位置距离页面顶端的距离,其实可以理解为页面滚动条拉到某个位置,顶部隐藏的页面内容的高度;

$(window).height()表示当前可视页面区域的高度;

bottom_of_object = $(this).position().top + $(this).outerHeight();

$(this).position().top表示当前元素距离父元素的距离,个人理解为应该就是margintop的值吧,

$(this).outerHeight()表示当前元素的高度还有padding+border,但不包括margin
如下盒子模型:

图片 3

图片 4

当if (bottom_of_window > bottom_of_object)为真的情况下,我们看到执行了return $(this).addClass("active"),这段代码起什么作用呢,其实作用就是
用户在拖动滚动条时时间轴内容的过渡效果,我们可以看到添加效果是向.timeline.animated .timeline-row添加的,我们查看样式文件关于这个类选择器的所在对象都有什么
样式效果:

.timeline.animated .timeline-row .timeline-content {
    opacity: 0;
    left: 20px;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transition: all 0.8s; }
  .timeline.animated .timeline-row:nth-child(odd) .timeline-content {
    left: -20px; }
  .timeline.animated .timeline-row.active .timeline-content {
    opacity: 1;
    left: 0; }
  .timeline.animated .timeline-row.active:nth-child(odd) .timeline-content {
    left: 0; }
当if (bottom_of_window > bottom_of_object)为真的情况下,我们看到执行了return $(this).addClass("active"),这段代码起什么作用呢,其实作用就是
用户在拖动滚动条时时间轴内容的过渡效果,我们可以看到添加效果是向.timeline.animated .timeline-row添加的,我们查看样式文件关于这个类选择器的所在对象都有什么
样式效果:

.timeline.animated .timeline-row .timeline-content {
    opacity: 0;
    left: 20px;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transition: all 0.8s; }
  .timeline.animated .timeline-row:nth-child(odd) .timeline-content {
    left: -20px; }
  .timeline.animated .timeline-row.active .timeline-content {
    opacity: 1;
    left: 0; }
  .timeline.animated .timeline-row.active:nth-child(odd) .timeline-content {
    left: 0; }

怪引人注目在实践$(this).addClass(“active”)之后,以下体起作用了.

坏显然在推行$(this).addClass(“active”)之后,以下体起作用了.

.timeline.animated .timeline-row.active .timeline-content {
    opacity: 1;
    left: 0; }
.timeline.animated .timeline-row.active .timeline-content {
    opacity: 1;
    left: 0; }

何以会生一个连缀的飘入效果啊,其实就是是概念了

胡会来一个对接的飘入效果啊,其实就是是概念了

.timeline.animated .timeline-row .timeline-content {
    opacity: 0;
    left: 20px;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transition: all 0.8s; }
.timeline.animated .timeline-row .timeline-content {
    opacity: 0;
    left: 20px;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transition: all 0.8s; }

transition(css3签)定义了类似选择器.timeline.animated .timeline-row
.timeline-content的含有对象只是发生起其他样式更改都见面发出一个0.8.s时刻之连效果,当然是时

transition(css3签)定义了看似选择器.timeline.animated .timeline-row
.timeline-content的含对象只是来发出其他样式更改都见面发一个0.8.s年华之连通效果,当然这个时空

我们可以再去窜。

咱得以又去窜。

因我们当履行$(this).addClass(“active”)之前,我们时刻轴左边的目标的体裁如下(我们临时还先说日子轴左边的)

坐咱们以执行$(this).addClass(“active”)之前,我们时刻轴左边的靶子的体制如下(我们暂时还先说时轴左边的)

.timeline.animated .timeline-row:nth-child(odd) .timeline-content {

opacity: 0;

left: -20px; }
.timeline.animated .timeline-row:nth-child(odd) .timeline-content {

opacity: 0;

left: -20px; }

履下样式如下:

尽下样式如下:

.timeline.animated .timeline-row.active .timeline-content {
    opacity: 1;
    left: 0; }
.timeline.animated .timeline-row.active .timeline-content {
    opacity: 1;
    left: 0; }

为此会起一个从左到右的一个兑现效益,因为透明度和左侧距都更换了。

从而会见发生一个从左到右的一个落实力量,因为透明度与左距都易了。

 

 

岁月轴右边的对象为什么是打右边至左的一个切入效果呢,首先实施$(this).addClass(“active”)之前,时间轴右边对象样式也

时刻轴右边的靶子为什么是从右侧至左的一个切入效果也,首先实施$(this).addClass(“active”)之前,时间轴右边对象样式也

.timeline.animated .timeline-row .timeline-content {
    opacity: 0;
    left: 20px;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transition: all 0.8s; }
.timeline.animated .timeline-row .timeline-content {
    opacity: 0;
    left: 20px;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transition: all 0.8s; }

咱们来看left为20px,opacity(透明度也0),执行$(this).addClass(“active”)之后

俺们视left为20px,opacity(透明度为0),执行$(this).addClass(“active”)之后

 .timeline.animated .timeline-row.active .timeline-content {
    opacity: 1;
    left: 0; }
 .timeline.animated .timeline-row.active .timeline-content {
    opacity: 1;
    left: 0; }

left为0,opacity(透明度也1),transition为0.8s,所以发生一个从右到左的一个连着效果了.

left为0,opacity(透明度也1),transition为0.8s,所以有一个从右到左的一个连效果了.

上述代码有一个考证的地方

如上代码有一个考证的地方

.timeline-row:nth-child(odd)中的nth-child(odd)选择器,因为css的解析顺序是从右到左,所以这个地方的意思表示.timeline-row为奇数的对象(属于其父元素的第奇数个timeline-row)

假如有以下代码,

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

<p><b>注释:</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>
</html>
.timeline-row:nth-child(odd)中的nth-child(odd)选择器,因为css的解析顺序是从右到左,所以这个地方的意思表示.timeline-row为奇数的对象(属于其父元素的第奇数个timeline-row)

假如有以下代码,

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>

<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

<p><b>注释:</b>Internet Explorer 不支持 :nth-child() 选择器。</p>

</body>
</html>

 其中p:nth-child(2)表示p的父元素中第二只子元素,并且这子元素是p,这时候第二独子元素正好是P所以显示效果如下

 其中p:nth-child(2)表示p的父元素中第二独子元素,并且这个子元素是p,这时候第二个子元素正好是P所以显示效果如下

图片 5

图片 6

假若改变吗以下

设若改动呢以下

<h1>这是标题</h1>
<h2>第一个段落。</h2>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<h1>这是标题</h1>
<h2>第一个段落。</h2>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>

这时效果如下

这时候效果如下

图片 7

图片 8

因为p:nth-child(2)第二单子元素是h2,而不是p所以没找到匹配的元素,所以背景色也从来不好效.

坐p:nth-child(2)第二单子元素是h2,而休是p所以没找到匹配的元素,所以背景色也没有坏效.

先期研究到此处,后续有日准备于页面元素动态加载,而休是以页面及早早显示出来,只是通过决定透明度来显示或者隐藏.

先期研究暨此,后续有时空准备吃页面元素动态加载,而不是于页面及早早显示出来,只是通过决定透明度来显示或者隐藏.

 
 
admin

网站地图xml地图