tips.js提示框插件

本文转载自 g_blue_wind 查看原文 2016-07-18 11 插件/ 提示框/ tips

                        
                        
                            <!DOCTYPEhtml> 
<html> 
    <head> 
        <title>demo</title> 
        <metacharset="UTF-8"> 
        <scripttype="text/javascript"src="js/jquery.js"></script> 
        <scripttype="text/javascript"src="js/jquery.tips.js"></script> 
        <style> 
        #myinput{position:relative;top:200px;left:200px;} 
        </style> 
        <scripttype="text/javascript"> 
            $(function (){ 
                $('#myinput').click(function(){ 
                    $(this).tips({ 
                        side:1,  //1,2,3,4 分別代表 上右下左 
                        msg:'上方彈出消息，3秒后自動消失，鼠標懸浮時，自動延時',//tips的文本內容 
                        color:'#FFF',//文字顏色，默認為白色 
                        bg:'#FD9720',//背景色，默認為紅色 
                        time:3,//默認為2 自動關閉時間 單位為秒 0為不關閉 （點擊提示也可以關閉） 
                        x:0,// 默認為0 橫向偏移 正數向右偏移 負數向左偏移

 
                        y:0 // 默認為0 縱向偏移 正數向下偏移 負數向上偏移 
                    }).tips({ 
                        side:2, 
                        msg:'右方彈出消息，5秒后自動消失，鼠標懸浮時，自動延時', 
                        bg:'#AE81FF', 
                        time:5 
                    }).tips({ 
                        side:3, 
                        msg:'下方彈出消息，7秒后自動消失，鼠標懸浮時，自動延時', 
                        bg:'#307FC1', 
                        time:7 
                    }).tips({ 
                        side:4, 
                        msg:'左方彈出消息，不自動消失，鼠標點擊才會消失', 
                        time:0 
                    }); 
                }); 
            }); 
  
        </script>

 
    </head> 
    <body> 
        <inputid="myinput"/> 
    </body> 
</html>
                        
                        
                 

注意！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。

tips.js提示框插件仿網易郵箱5.0(四)：信息提示插件(tips.js) JQuery提示框tips插件：jquery.contip.js js+css跟隨鼠標的提示框(tips) js消息提示框插件 bootstrap-datepicker時間插件和chosen.jquery下拉模糊搜索和bootbox.min彈出框以及jquery.tips提示框和js的全選與取消的使用 bootstrap-datepicker時間插件和chosen.jquery下拉模糊搜索和bootbox.min彈出框以及jquery.tips提示框和js的全選與取消的使用 vue.js插件提示框模板寫法提示框插件jBox.js的使用示例 js插件-右下角彈出信息提示框