recherche

Maison  >  Article  >  interface Web  >  Javascript implémente une simple boîte d'informations d'invite dans le coin inférieur droit des compétences page_javascript

Javascript implémente une simple boîte d'informations d'invite dans le coin inférieur droit des compétences page_javascript

WBOY
WBOYoriginal
2016-05-16 15:48:071220parcourir

Parce que j'en ai trouvé un open source qui est très utile et qui peut être corrigé dans le coin inférieur droit du navigateur ; la compatibilité est également très bonne plus un petit point fonctionnel qui affectera l'application plus tard, j'ai décidé de réécrire ; cela ; cela ne peut être corrigé que dans Ajouter en bas à droite de la page actuelle. Le système a une structure haut-bas qui répond aux besoins et n'est pas étendu ; Deux fonctions :
1.lay -- Définissez la hauteur et la largeur de la zone d'invite (facultatif)
2.show -- définir le titre, le contenu et le temps d'arrêt

avis.js

var time;
var delayTime;
$(function(){
  // 增加浮动DIV
  $('body').append("<div id='notice' onselectstart='return false'><span class='notice_title'> </span><span class='cbtn'>[关闭]</span><div class='notice_content'></div></div>");
   
  // 更改样式
  $('#notice').css({right:"0",bottom:"0",cursor:"default",position:"fixed","background-color":"#CFDEF4",color:"#1F336B","z-index":"999",border:"1px #1F336B solid",margin:"2px",padding:"10px","font-weight":"bold","line-height":"25px",display:"none"});
  $('#notice .cbtn').css({color:"#FF0000",cursor:"pointer","padding-right":"5px",float:"right",position:"relative"});
  $('#notice .notice_content').css({margin:"3px","font-weight":"normal",border:"1px #B9C9EF solid","line-height":"20px","margin-bottom":"10px",padding:"10px"});
   
  /* 绑定事件*/
  $('#notice').hover(
    function(){
      $(this).stop(true,true).slideDown();
      clearTimeout(time);
    },
    function(){
      time = setTimeout('_notice()',delayTime);
    }
  );
   
  //绑定关闭事件
  $('.cbtn').bind('click',function(){
    $('#notice').slideUp('fast');
    clearTimeout(time);
  });
});
$.extend({
  lay:function(_width,_height){
    $('#notice').css({width:_width,height:_height});
  },
  show:function(_title,_msg,_time){
     delayTime = _time;
     $('.notice_title').html(_title);
     $('.notice_content').html(_msg);
     $('#notice').slideDown(2000);
     time = setTimeout('_notice()',delayTime);
  },
});
function _notice(){
  $('#notice').slideUp(2000);
}
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
 <head>
  <title>index.html</title>
   
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
  <meta http-equiv="description" content="this is my page"/>
  <meta http-equiv="content-type" content="text/html; charset=GBK"/>
   
  <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 
 </head>
  
 <body onload='initPage();'>
 </body>
 <script type="text/javascript">
  function initPage(){
    var returnMsg = "<p>信息1 jquery-1.7.2.min.js</p><p>信息2 notice.js</p><p>信息3</p>";
    $.show('提示信息',returnMsg,10000);
  }
 </script>
 <script src="jquery-1.7.2.min.js" type="text/javascript" ></script>
 <script src="notice.js" type="text/javascript" ></script>
</html>
Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Convertir la chaîne JSON en compétences JSON object_javascriptArticle suivant：Convertir la chaîne JSON en compétences JSON object_javascript

Articles Liés

Voir plus