关于时间轴的效果解析
虽然时间轴早已不是什么新鲜事物了,个人只是感兴趣所以就研究一下,最近从网上搜索了一个个人感觉比较好的时间轴demo,下载下来研究了一下并做了下修改.具体的效果如下图:(该demo实现的是滚动加载图片)
代码地址：响应式时间轴.zip
如何实现滚动加载图片的?最主要是以下的代码部分:
(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了.通过看以上代码，这个地方实际上是有个小算法的.
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)为真的情况下，我们看到执行了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")之后，以下样式起作用了.
.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; }transition(css3标签)定义了类选择器.timeline.animated .timeline-row .timeline-content的包含对象只有有任何样式更改都会有一个0.8.s时间的过渡效果，当然这个时间
我们可以重新去修改。
因为我们在执行$(this).addClass("active")之前，我们时间轴左边的对象的样式如下(我们暂且先说时间轴左边的)
.timeline.animated .timeline-row:nth-child(odd) .timeline-content {opacity: 0; :; }
执行之后样式如下:
.timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }所以会有一个从左到右的一个实现效果，因为透明度和左边距都变了。
时间轴右边的对象为什么是从右到左的一个切入效果呢，首先执行$(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; }我们看到left为20px,opacity(透明度为0)，执行$(this).addClass("active")之后
.timeline.animated .timeline-row.active .timeline-content {opacity: 1;left: 0; }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>其中p:nth-child(2)表示p的父元素中第二个子元素，并且这个子元素是p，这时候第二个子元素正好是P所以显示效果如下
如果改为以下
<h1>这是标题</h1><h2>第一个段落。</h2><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p>
这时候效果如下
因为p:nth-child(2)第二个子元素是h2,而不是p所以没找到匹配的元素，所以背景色也没生效.
先研究到这里，后续有时间准备让页面元素动态加载，而不是在页面上早早显示出来，只是通过控制透明度来显示或者隐藏.
<br>
<br><br>
以上是关于时间轴的效果解析的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
用户遭遇罕见故障 三星 Watch 智能手表突现白屏问题
Apr 03, 2024 am 08:13 AM
你可能遇到过智能手机屏幕出现绿色线条的问题，即使没见过，也一定在网络上看到过相关图片。那么，智能手表屏幕变白的情况你遇见过吗？4月2日，CNMO从外媒了解到，一名Reddit用户在社交平台上分享了一张图片，展示了三星Watch系列智能手表屏幕变白的情况。该用户写道："我离开时正在充电，回来时就这样了，我尝试重启，但重启过程中屏幕还是这样。"三星Watch智能手表屏幕变白这位Reddit用户并未指明这款智能手表的具体型号。不过，从图片上看，应该是三星Watch5。此前，另一位Reddit用户也报告
抖音10级灯牌多少钱？10级粉丝灯牌需要几天？
Mar 11, 2024 pm 05:37 PM
在抖音平台上，许多用户都渴望获得等级认证，其中10级灯牌更是展示用户在抖音上的影响力和认可度。本文将深入探讨抖音10级灯牌的价格以及达到这一等级所需的时间，以帮助用户更好地了解这一过程。一、抖音10级灯牌多少钱？抖音10级灯牌的价格会受市场波动和供需情况的影响而有所差异，一般价格在几千元到万元之间。这个价格主要包括灯牌本身的成本和可能的服务费用。用户可以通过抖音官方渠道或第三方服务机构购买10级灯牌，但在购买时要留意选择合法渠道，以免遭遇虚假或欺诈交易。二、10级粉丝灯牌需要几天？达到10级灯牌
九州风神阿萨辛 4S 散热器评测 风冷'刺客大师”范儿
Mar 28, 2024 am 11:11 AM
说起阿萨辛ASSASSIN，相信玩家们一定会想到《刺客信条》中的各位刺客大师，不仅身手了得，而且"躬身于黑暗、服务于光明"的信条，与国内知名机箱/电源/散热器品牌九州风神（DeepCool）旗下的阿萨辛ASSASSIN系列旗舰级风冷散热器不谋而合。最近，该系列的最新产品阿萨辛ASSASSIN4S重磅上线，"西装刺客，再进阶"为高级玩家带来全新的风冷散热体验。外观一览细节满满阿萨辛4S散热器采用双塔构造+单风扇内嵌设计，外面包覆立方体造型的整流罩，整体感极强，并提供白、黑两种配色可选，满足不同色系
艾尔登法环通关需要多久
Mar 11, 2024 pm 12:50 PM
玩家在艾尔登法环中进行游戏时可以体验游戏主线剧情，以及收集游戏成就，有很多玩家不知道艾尔登法环通关需要多久，玩家的通关流程在30个小时。艾尔登法环通关需要多久答：30个小时。1、这个30个小时的通关时长指的虽然不是高手般的速通，但是也省略了很多的流程。2、如果你想获得更好的游戏体验或者是体验完整的剧情，那么时长上肯定要花费更多的时间。3、如果玩家是全收集大约要100-120小时。4、如果是只走主线刷BOSS大约：50-60小时。5、如果是想全部体验：150小时打底。
春日里的精致光影艺术，哈趣 H2 性价比之选
Apr 17, 2024 pm 05:07 PM
随着春天的到来，万物复苏，一切都充满了生机与活力。在这个美好的季节里，如何为家居生活增添一抹别样的色彩？哈趣H2投影仪，以其精致的设计和超高的性价比，成为了这个春天里不可或缺的一道亮丽风景。这款H2投影仪小巧玲珑却不失时尚。无论是放在客厅的电视柜上，还是卧室的床头柜旁，都能成为一道亮丽的风景线。它的机身采用了奶白色的磨砂质地，这种设计不仅让投影仪的外观更显高级，同时也增加了触感的舒适度。米色仿皮纹材质，更是为整体外观增添了一抹温馨与雅致。这种色彩与材质的搭配，既符合现代家居的审美趋势，又能够融入
航嘉 MX750P 全模组电源评测：750W 的白金实力浓缩
Mar 28, 2024 pm 03:20 PM
ITX平台以小巧的身形吸引了不少追求极致和独特美感的玩家，随着制程的提升和技术的进步，英特尔第14代酷睿和RTX40系显卡都可以在ITX平台中发挥实力，游戏玩家也对SFX电源有了更高的要求。游戏爱好者航嘉推出新的MX系列电源，在满足高性能需求的ITX平台中，MX750P全模组电源的定额功率高达750W，同时通过了80PLUS白金级认证。以下我们就带来这款电源的评测。航嘉MX750P全模组电源采用了简约时尚的设计理念，共有黑白两款供玩家选择，均采用磨砂表面处理，搭配银灰色和红色的字体有很好的质感，
轻松拿捏 4K 高清图像理解！这个多模态大模型自动分析网页海报内容，打工人简直不要太方便
Apr 23, 2024 am 08:04 AM
一个可以自动分析PDF、网页、海报、Excel图表内容的大模型，对于打工人来说简直不要太方便。上海AILab，香港中文大学等研究机构提出的InternLM-XComposer2-4KHD（简写为IXC2-4KHD）模型让这成为了现实。相比于其他多模态大模型不超过1500x1500的分辨率限制，该工作将多模态大模型的最大输入图像提升到超过4K（3840x1600）分辨率，并支持任意长宽比和336像素～4K动态分辨率变化。发布三天，该模型就登顶HuggingFace视觉问答模型热度榜单第一。轻松拿捏
小红书发布作品时间怎么设置？发布作品时间准确吗？
Mar 24, 2024 pm 01:31 PM
小红书，一个充满生活气息与知识分享的平台，让越来越多的创作者在此畅所欲言。要想在小红书上获得更多的关注和点赞，除了内容质量之外，发布作品的时间也是至关重要的。那么，如何设置小红书发布作品的时间呢？一、小红书发布作品时间怎么设置？1.了解用户活跃时间首先，需要明确小红书用户的活跃时间。通常来说，晚上8点到10点以及周末下午是用户活跃度较高的时段。然而，这个时间段也会受到受众群体和地域等因素的影响而有所不同。因此，为了更好地把握用户活跃时段，建议对不同群体的行为习惯进行更详细的分析。通过了解用户的活
