Phiên bản đầy đủ: jsB@nk » Chữ » Phân đoạn cho khung chữ
URL: https://www.javascriptbank.com/fly-out-textbox.html
Với hiệu ứng JavaScript này, các đoạn văn bản sẽ được phân chia vào các khung khác nhau, mỗi lần chỉ một khung được hiển thị.
Phiên bản đầy đủ: jsB@nk » Chữ » Phân đoạn cho khung chữ
URL: https://www.javascriptbank.com/fly-out-textbox.html
<style>h2 { font-weight: normal; font-size: 1.4em; clear: both;}body > h2 { clear: none;}.section h2 { cursor: pointer; }#flyout .section { float: left; width: 20em; height: 25em; background: url('mback.jpg') #444 repeat-y; margin-left: 0; color: white; padding: 0; overflow: hidden;}#flyout h2 { font-family: monospace; width: 1em; font-size: 1.2em; padding-top: 1ex; float: left; padding-left: 1ex; padding-right: 0.2ex; height: 100%; clear: none; position: relative;}#flyout .section div { margin-left: 2em; padding: 1em; background: #B4E9FF; color: black; height: 100%; border-bottom: solid 1px #777; border-right: solid 1px #777; border-top: solid 1px #ccc;}#flyout + * { clear: both;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script>// Created by: Jacqueline Porjes :: http://porjes.com/example_css.htmlfunction show(Me) { var section = Me.parentNode; var menu = section.parentNode; for(var i = 0; i < menu.childNodes.length; i++) { if (menu.childNodes[i].length == 0) continue; if (typeof menu.childNodes[i].style != 'object') continue; menu.childNodes[i].style.width = '2em'; menu.childNodes[i].style.background = 'url(mback.jpg) #B4E9FF repeat-y'; menu.childNodes[i].style.color = '#000'; } section.style.width = '20em'; section.style.background = "url(mback2.jpg) #00E0FF repeat-y"; section.style.color = '#ff0000'; return true;}function showfirst() { if (!document.getElementsByTagName) return; var a = document.body.getElementsByTagName("div"); for (i = 0; i < a.length; i++) { if (a[i].id == "flyout") { if (typeof a[i].style != 'object') continue; var x = a[i].getElementsByTagName("h2"); for (j = 0; j < x.length; j++) { if (x[j].className == "showfirst") { if (typeof x[j].style != 'object') continue; show(x[j]); return; } } } }}window.onload=showfirst;</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><div id="flyout"> <div class="section" > <h2 onclick="show(this);" class="showfirst">s o m e s t u f f</h2> <div> <h3>Some stuff</h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam scelerisque lacinia justo. Integer in dolor nec turpis vestibulum luctus . Sed condimentum. Aliquam cursus molestie nunc. Donec eu nunc. Integer tristique erat euismod justo. Proin nec odio. Sed quam eros, vestibulum a, blandit eu, pretium at, nisl. Quisque ut.</p> <p> Tristique erat euismod justo. Proin nec odio. Sed quam eros, vestibulum.</p> </div> </div> <!-- section --> <div class="section"> <h2 onclick="show(this);">o t h e r s t u f f</h2> <div> <h3>Other stuff</h3> <p>Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito.</p> </div> </div> <!-- section --> <div class="section"> <h2 onclick="show(this);">m o r e s t u f f</h2> <div> <h3>More stuff</h3> <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit? de un nov lingua franca: on refusa continuar payar custosi traductores.</p> <p>Tristique erat euismod justo. Proin nec odio. Sed quam eros, vestibulum.</p> </div> </div> <!-- section --> <div class="section"> <h2 class="showfirst" onclick="show(this);">y e t m o r e s t u f f</h2> <div> <h3>And yet more stuff</h3> <p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental.</p> </div> </div> <!-- section --></div> <!-- flyout --><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->