Phiên bản đầy đủ: jsB@nk » Liên kết » Chú thích » Chú thích trượt kiểu bật/tắt
URL: https://www.javascriptbank.com/dropdown-description-toggle.html
Hiệu ứng sử dụng CSS để trang trí cho khung chú thích và JavaScript để thực hiện chức năng trượt kiểu bật/tắt cho các liên kết, người dùng nhấn liên kết lần đầu tiên để mở khung và nhấn cái thứ hai để đóng lại.
Phiên bản đầy đủ: jsB@nk » Liên kết » Chú thích » Chú thích trượt kiểu bật/tắt
URL: https://www.javascriptbank.com/dropdown-description-toggle.html
<style type="text/css">#dhtmlgoodies_contentBox { border:1px solid #317082; height:0px; visibility:hidden; position:absolute; background-color:#E2EBED; overflow:hidden; padding:2px; width:250px;}#dhtmlgoodies_content { position:relative; font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; width:100%; font-size:0.8em;}#dhtmlgoodies_slidedown { position:relative; width:250px;}</style><script type="text/javascript" name="dropDown.js">// Created by: Alf Magne Kalleland :: http://www.dhtmlgoodies.com//************************************************************************************************************(C) www.dhtmlgoodies.com, September 2005Terms of use: You are free to use this script as long as the copyright message is kept intact. However, you may not redistribute, sell or repost it without our permission.Alf Magne Kalleland************************************************************************************************************/var initHeight = 0;var slidedown_direction = 1;var slidedownContentBox = false;var slidedownContent = false;var slidedownActive = false;var contentHeight = false;var slidedownSpeed = 3; // Higher value = faster scriptvar slidedownTimer = 7; // Lower value = faster scriptfunction slidedown_showHide() { if(initHeight==0)slidedown_direction=slidedownSpeed; else slidedown_direction = slidedownSpeed*-1; if(!slidedownContentBox) { slidedownContentBox = document.getElementById('dhtmlgoodies_contentBox'); slidedownContent = document.getElementById('dhtmlgoodies_content'); contentHeight = document.getElementById('dhtmlgoodies_content').offsetHeight; } slidedownContentBox.style.visibility='visible'; slidedownActive = true; slidedown_showHide_start();}function slidedown_showHide_start() { if(!slidedownActive)return; initHeight = initHeight/1 + slidedown_direction; if(initHeight <= 0) { slidedownActive = false; slidedownContentBox.style.visibility='hidden'; initHeight = 0; } if(initHeight>contentHeight) { slidedownActive = false; } slidedownContentBox.style.height = initHeight + 'px'; slidedownContent.style.top = initHeight - contentHeight + 'px'; setTimeout('slidedown_showHide_start()',slidedownTimer); // Choose a lower value than 10 to make the script move faster}function setslidedownWidth(newWidth) { document.getElementById('dhtmlgoodies_slidedown').style.width = newWidth + 'px'; document.getElementById('dhtmlgoodies_contentBox').style.width = newWidth + 'px';}function setSlideDownSpeed(newSpeed) { slidedownSpeed = newSpeed;}</script><div id="dhtmlgoodies_slidedown"> <div id="dhtmlgoodies_control"> <a href="#" onclick="slidedown_showHide();return false;">Try it</a> </div> <div id="dhtmlgoodies_contentBox"> <div id="dhtmlgoodies_content"><!-- slide down content goes here -->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.<br><br><!-- End slide down content --> </div> </div></div><script type="text/javascript">setSlideDownSpeed(4);</script>