关于时间轴的效果解析
虽然时间轴早已不是什么新鲜事物了,个人只是感兴趣所以就研究一下,最近从网上搜索了一个个人感觉比较好的时间轴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>
Atas ialah kandungan terperinci 关于时间轴的效果解析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1393
52
1207
24
Pengguna menghadapi gangguan yang jarang berlaku: Jam tangan pintar Samsung Watch tiba-tiba mengalami isu skrin putih
Apr 03, 2024 am 08:13 AM
Anda mungkin menghadapi masalah garis hijau yang muncul pada skrin telefon pintar anda Walaupun anda tidak pernah melihatnya, anda mesti melihat gambar berkaitan di Internet. Jadi, pernahkah anda menghadapi situasi di mana skrin jam tangan pintar bertukar menjadi putih? Pada 2 April, CNMO mendapat tahu daripada media asing bahawa seorang pengguna Reddit berkongsi gambar di platform sosial, menunjukkan skrin jam tangan pintar siri Samsung Watch bertukar menjadi putih. Pengguna menulis: "Saya sedang mengecas apabila saya pergi, dan apabila saya kembali, ia adalah seperti ini. Saya cuba untuk memulakan semula, tetapi skrin masih seperti ini semasa proses mulakan semula skrin jam tangan pintar Samsung Watch." Pengguna Reddit tidak menyatakan model khusus. Walau bagaimanapun, jika dilihat dari gambar, ia sepatutnya Samsung Watch5. Sebelum ini, seorang lagi pengguna Reddit turut melaporkan
Berapakah kos papan tanda lampu tahap 10 Douyin? Berapa hari yang diperlukan untuk mencipta tanda kipas tahap 10?
Mar 11, 2024 pm 05:37 PM
Pada platform Douyin, ramai pengguna tidak sabar-sabar untuk mendapatkan pensijilan tahap, dan tanda cahaya tahap 10 menunjukkan pengaruh dan pengiktirafan pengguna pada Douyin. Artikel ini akan menyelidiki harga papan lampu tahap 10 Douyin dan masa yang diperlukan untuk mencapai tahap ini untuk membantu pengguna memahami proses tersebut dengan lebih baik. 1. Berapakah kos papan tanda lampu Douyin tahap 10? Harga papan tanda lampu 10 peringkat Douyin akan berbeza-beza bergantung pada turun naik pasaran dan penawaran dan permintaan Harga umum berjulat dari beberapa ribu yuan hingga sepuluh ribu yuan. Harga ini termasuk kos tanda lampu itu sendiri dan kemungkinan bayaran perkhidmatan. Pengguna boleh membeli papan tanda cahaya tahap 10 melalui saluran rasmi Douyin atau agensi perkhidmatan pihak ketiga, tetapi mereka harus memberi perhatian kepada saluran undang-undang semasa membeli untuk mengelakkan transaksi palsu atau penipuan. 2. Berapa hari yang diperlukan untuk mencipta tanda kipas tahap 10? Mencapai tahap 10 tanda cahaya
Kajian Radiator Kyushu Fengshen Assassin 4S Gaya 'Assassin Master' yang disejukkan dengan udara
Mar 28, 2024 am 11:11 AM
Bercakap tentang ASSASSIN, saya percaya pemain pasti akan memikirkan pembunuh utama dalam "Assassin's Creed". casis domestik/bekalan kuasa/penyejukan yang terkenal Siri ASSASSIN radiator penyejuk udara utama daripada jenama perkakas DeepCool bertepatan antara satu sama lain. Baru-baru ini, produk terbaharu siri ini, ASSASSIN4S, telah dilancarkan "Assassin in Suit, Advanced" membawakan pengalaman penyejukan udara baharu kepada pemain maju. Penampilannya penuh dengan perincian. Radiator Assassin 4S menggunakan struktur menara berkembar + reka bentuk terbina dalam kipas tunggal warna untuk memenuhi warna yang berbeza
Berapa lamakah masa yang diambil untuk membersihkan Cincin Elden?
Mar 11, 2024 pm 12:50 PM
Pemain boleh mengalami plot utama permainan dan mengumpul pencapaian permainan apabila bermain di Elden's Circle Ramai pemain tidak tahu berapa lama masa yang diambil untuk membersihkan Elden's Circle Proses pelepasan pemain adalah 30 jam. Berapa lama masa yang diambil untuk membersihkan Cincin Elden Jawapan: 30 jam. 1. Walaupun masa pelepasan 30 jam ini tidak merujuk kepada pas laju seperti induk, ia juga meninggalkan banyak proses. 2. Jika anda ingin mendapatkan pengalaman permainan yang lebih baik atau mengalami plot yang lengkap, maka anda pasti perlu meluangkan lebih banyak masa pada tempoh tersebut. 3. Jika pemain mengumpul kesemuanya, ia akan mengambil masa kira-kira 100-120 jam. 4. Jika anda hanya mengambil garisan utama untuk memberus BOSS, ia akan mengambil masa lebih kurang 50-60 jam. 5. Jika anda ingin mengalami semuanya: 150 jam masa asas.
Seni cahaya dan bayangan yang indah pada musim bunga, Haqu H2 ialah pilihan yang menjimatkan kos
Apr 17, 2024 pm 05:07 PM
Dengan ketibaan musim bunga, segala-galanya pulih dan segala-galanya penuh dengan daya hidup dan kecergasan. Dalam musim yang indah ini, bagaimana untuk menambah sentuhan warna pada kehidupan rumah anda? Projektor Haqu H2, dengan reka bentuk yang indah dan keberkesanan kos yang tinggi, telah menjadi keindahan yang sangat diperlukan pada musim bunga ini. Projektor H2 ini padat tetapi bergaya. Sama ada diletakkan di atas kabinet TV di ruang tamu atau di sebelah meja sisi katil di dalam bilik tidur, ia boleh menjadi landskap yang indah. Badannya diperbuat daripada tekstur matte putih susu Reka bentuk ini bukan sahaja menjadikan projektor kelihatan lebih maju, tetapi juga meningkatkan keselesaan sentuhan. Bahan bertekstur kulit kuning air menambah sentuhan kemesraan dan keanggunan pada penampilan keseluruhan. Gabungan warna dan bahan ini bukan sahaja menepati trend estetik rumah moden, tetapi juga boleh diintegrasikan ke dalam
Kajian bekalan kuasa modul penuh Huntkey MX750P: 750W kekuatan platinum pekat
Mar 28, 2024 pm 03:20 PM
Dengan saiznya yang padat, platform ITX telah menarik ramai pemain yang mengejar keindahan terunggul dan unik Dengan peningkatan proses pembuatan dan kemajuan teknologi, kedua-dua kad grafik siri Core dan RTX40 generasi ke-14 Intel boleh menggunakan kekuatan mereka pada platform ITX, dan. pemain juga Terdapat keperluan yang lebih tinggi untuk bekalan kuasa SFX. Penggemar permainan Huntkey telah melancarkan bekalan kuasa siri MX baharu Dalam platform ITX yang memenuhi keperluan berprestasi tinggi, bekalan kuasa modul penuh MX750P mempunyai kuasa penarafan sehingga 750W dan telah lulus pensijilan tahap platinum 80PLUS. Di bawah kami bawakan penilaian bekalan kuasa ini. Bekalan kuasa modul penuh Huntkey MX750P menggunakan konsep reka bentuk yang ringkas dan bergaya Terdapat dua model hitam dan putih untuk dipilih oleh pemain kedua-duanya menggunakan rawatan permukaan matte dan mempunyai tekstur yang baik dengan fon perak kelabu dan merah.
Memahami imej 4K HD dengan mudah! Model berbilang modal besar ini secara automatik menganalisis kandungan poster web, menjadikannya sangat mudah untuk pekerja.
Apr 23, 2024 am 08:04 AM
Model besar yang boleh menganalisis kandungan PDF, halaman web, poster dan carta Excel secara automatik tidak terlalu mudah untuk pekerja. Model InternLM-XComposer2-4KHD (disingkat IXC2-4KHD) yang dicadangkan oleh Shanghai AILab, Universiti China Hong Kong dan institusi penyelidikan lain menjadikan perkara ini menjadi kenyataan. Berbanding dengan model besar berbilang modal lain yang mempunyai had resolusi tidak lebih daripada 1500x1500, kerja ini meningkatkan imej input maksimum model besar berbilang mod kepada lebih resolusi 4K (3840x1600) dan menyokong sebarang nisbah aspek dan 336 piksel kepada 4K Perubahan resolusi dinamik. Tiga hari selepas dikeluarkan, model itu mengungguli senarai populariti model menjawab soalan visual HuggingFace. Mudah dikendalikan
Bagaimana untuk menetapkan masa untuk menerbitkan karya di Xiaohongshu? Adakah masa untuk menerbitkan karya itu tepat?
Mar 24, 2024 pm 01:31 PM
Xiaohongshu, platform yang penuh dengan kehidupan dan perkongsian pengetahuan, membolehkan semakin ramai pencipta untuk menyatakan pendapat mereka secara bebas. Untuk mendapatkan lebih banyak perhatian dan suka pada Xiaohongshu, selain kualiti kandungan, masa penerbitan juga penting. Jadi, bagaimana untuk menetapkan masa untuk Xiaohongshu menerbitkan karya? 1. Bagaimana untuk menetapkan masa untuk menerbitkan karya di Xiaohongshu? 1. Fahami masa aktif pengguna Pertama, adalah perlu untuk menjelaskan masa aktif pengguna Xiaohongshu. Secara umumnya, 8 malam hingga 10 malam dan tengah hari hujung minggu ialah masa apabila aktiviti pengguna tinggi. Walau bagaimanapun, tempoh masa ini juga berbeza bergantung pada faktor seperti kumpulan penonton dan geografi. Oleh itu, untuk lebih memahami tempoh aktif pengguna, adalah disyorkan untuk menjalankan analisis yang lebih terperinci tentang tabiat tingkah laku kumpulan yang berbeza. Dengan memahami kehidupan pengguna
