溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Jquery 簡單提示框

發(fā)布時間：2020-07-23 15:46:43 來源：網(wǎng)絡 閱讀：295 作者：MaginaDF 欄目：web開發(fā)

   效果圖，如下

Jquery 簡單提示框

Jquery 簡單提示框

   代碼如下：

   

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
            
// 文字帶邊框提示條提示條
$('#masterTooltip1').hover(
    function(){
                
        // 鼠標懸浮經(jīng)過事件
        var title = "jQuery簡單提示條";
        //$(this).data('tipText', title);
        $('<p class="tooltip"></p>')
            .text(title)
            .appendTo('.container')
            .fadeIn('slow');
    },
    function() {
        // 鼠標懸浮離開事件
        $('.tooltip').remove();
    }).mousemove(
        function(e) {
            var mousex = e.pageX + 2; //獲得X軸坐標
            var mousey = e.pageY + 1; //獲得Y軸坐標
            $('.tooltip').css({ top: mousey, left: mousex });
});
});
</script>
<style>
            
.tooltip {
    display:none;
    position:absolute;
    border:1px solid #9abbe8;
    background-color:white;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: #9abbe8 1px 5px 20px;
    -moz-box-shadow: #9abbe8 1px 5px 20px;
    box-shadow: #9abbe8 1px 5px 20px;
    padding:10px;
    color:black;
    font-size:12px;
    width: 120px;
    white-space: normal;
    z-index: 1000;
}
</style>
<body>
<div class="container">
<h2>如何制作jQuery效果</h2>
<h3>jQuery簡單提示條</h3>
<h3>鼠標經(jīng)過</h3>
     <img id="masterTooltip1" src="aboutus.png"/>
<div class="container">
</div>
</body>


向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手