cari

Rumah >hujung hadapan web >tutorial js >Javascript melaksanakan kotak maklumat segera ringkas di sudut kanan bawah kemahiran page_javascript

Javascript melaksanakan kotak maklumat segera ringkas di sudut kanan bawah kemahiran page_javascript

WBOY
WBOYasal
2016-05-16 15:48:071239semak imbas

Oleh kerana saya menemui sumber terbuka yang sangat berguna dan boleh diperbaiki di sudut kanan bawah penyemak imbas juga sangat baik, ditambah dengan titik fungsi kecil yang akan menjejaskan aplikasi itu kemudian, saya memutuskan untuk menulis semula ia hanya boleh diperbaiki dalam Tambah ke bahagian bawah sebelah kanan halaman semasa Sistem ini mempunyai struktur atas-bawah yang memenuhi keperluan dan tidak dikembangkan Dua fungsi:
1.lay -- Tetapkan ketinggian dan lebar kotak gesaan (pilihan)
2.tunjukkan -- tetapkan tajuk, kandungan dan masa tinggal

notis.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>
Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Tukar rentetan JSON kepada kemahiran object_javascript JSONArtikel seterusnya：Tukar rentetan JSON kepada kemahiran object_javascript JSON

Artikel berkaitan

Lihat lagi