这是html:
首頁 > web前端 > js教程 > 主體

JS CSS實作一個氣泡提示框_javascript技巧

WBOY
發布: 2016-05-16 17:25:17
原創
1559 人瀏覽過

分享一個氣泡提示框,練習的技術有:(1)JS響應滑鼠的事件;(2)純CSS製作三角形。

效果這樣:
JS CSS實作一個氣泡提示框_javascript技巧 
這是html:

複製代碼 代碼如下:





氣泡對話框 <br><script src="myBubbleTooltip.js"></script> <br><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.%20min.js"></script> <br><style type="text/css"> <BR>h1{ <BR>font-size: 60px; <BR>margin-top: 0; <BR>font- family: Arial, sans-serif; <BR>text-shadow: 2px 0px 10px #292929; <BR>letter-spacing: 0px; <BR>text-decoration: none; <BR>color: #DDDD>; } <BR>div#left{ <BR>border: 1px solid #CCCCCC; <BR>width: 200px; <BR>height: 300px; <BR>background-color: #EEEEEE <BR>; 🎜>margin: 0 0 0 20px; <BR>} <BR>div#content{ <BR>border: 1px solid #CCCCCC; <BR>width: 600px; <BR>coloright: 300pground; : #EEEEEE; <BR>float: left; <BR>margin: 0px 20px; <BR>} <BR>div#editor{ <BR>border: 1px solid #CCCCCC; width: 300px; <BR>height: 300px; <BR>} <BR>div#test{ <BR>border: 2px solid #cccccc; <BR>width: 400px; < <BR>.bubble_tooltip_common{ <BR>z-index: 1; <BR>color:#333333; <BR>width:150px; <BR>position:absolute; < solid #AAAAAA; <BR>box-shadow: 0px 0px 10px #AAAAAA; <BR>border-radius: 5px; <BR>padding: 5px 10px; <BR>background-color: #FEFAB8>; ><BR> <BR><BR><BR><BR><BR>複製程式碼<BR><BR><BR> 程式碼如下:<BR><BR> </style>
/**指向左側的三角形,外緣*/
.triRight{ left:-20px;
top: 5px;
}






複製程式碼


程式碼如下:

/*先端が内側の左を向いた三角形*/
.triRightInner{ z-index: 3 border: 8px;ソリッド #FEFAB8; border-color: 透明 #FEFAB8 透明 透明;/*色はプロンプト ボックスの背景色と一致している必要があります*/

幅: 0; 高さ: 0; 位置: 左:-16px;}
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板