Phiên bản đầy đủ: jsB@nk » Liên kết » Nhiều liên kết
URL: https://www.javascriptbank.com/multilinks.html
Hiệu ứng JavaScript này có chức năng hiển thị một khung tại vị trí cố định trong trang web, mỗi khi bạn nhấp chuột vào một liên kết được chỉ định; bên cạnh đó, khung này được tạo ra bằng cách dùng kĩ thuật Document Object Model (DOM).
Phiên bản đầy đủ: jsB@nk » Liên kết » Nhiều liên kết
URL: https://www.javascriptbank.com/multilinks.html
<style>DIV.multilink { padding: 16px; background: #FFFFFF; border: 2px solid #2266AA;}LI.multilink { list-style-position: inside;}</style><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><script>/*Created by: www.jtricks.com Web Site: www.jtricks.com/javascript/navigation/multilinks.html*/// Moves the div object to be directly beneath an object.function move_box(an, box) { var cleft = 0; var ctop = 0; var obj = an; while (obj.offsetParent) { cleft += obj.offsetLeft; ctop += obj.offsetTop; obj = obj.offsetParent; } box.style.left = cleft + 'px'; ctop += an.offsetHeight + 8; // Handle Internet Explorer body margins, // which affect normal document, but not // absolute-positioned stuff. if (document.body.currentStyle && document.body.currentStyle['marginTop']) { ctop += parseInt(document.body.currentStyle['marginTop']); } box.style.top = ctop + 'px';}// Shows a box if it wasn't shown yet or is hidden// or hides it if it is currentfunction show_hide_multilink(an, width, height, className, links) { var href = an.href; var boxdiv = document.getElementById(href); if (boxdiv != null) { if (boxdiv.style.display=='none') { // Show existing box, move it // if document changed layout move_box(an, boxdiv); boxdiv.style.display='block'; } else // Hide currently shown box. boxdiv.style.display='none'; return false; } // Create box object through DOM boxdiv = document.createElement('div'); // Assign id equalling to the document it will show boxdiv.setAttribute('id', href); boxdiv.className = className; boxdiv.style.position = 'absolute'; boxdiv.style.width = width + 'px'; boxdiv.style.height = height + 'px'; var linksarr = links.split(';'); var liobj; var anchorobj; for (var i = 0; i < linksarr.length; i = i + 2) { liobj = document.createElement('li'); liobj.className = className; anchorobj = document.createElement('a'); anchorobj.classname=className; anchorobj.href = linksarr[i]; anchorobj.target = '_top'; anchorobj.appendChild(document.createTextNode(linksarr[i + 1])); liobj.appendChild(anchorobj); boxdiv.appendChild(liobj); } document.body.appendChild(boxdiv); move_box(an, boxdiv); // The script has successfully shown the box, // prevent hyperlink navigation. return false;}</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><a href="www.javascriptbank.com" onclick="return show_hide_multilink(this,200,90,'multilink', '#;JavaScript Forum;#;The JavaScript Diaries')"><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->