jquery右下角弹窗效果

 

复制代码保存到txt文本,改后缀为.html。注意引进两个js文件。jquery.js可以到官网下,jquery.messager.js我上篇博文发了,可以下载。

 

[html]  view plain copy
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <script type="text/javascript" src="jquery-1.7.1.js"></script>  
  6. <script type="text/javascript" src="jquery.messager.js"></script>  
  7. <title>jquery右下角弹窗效果</title>  
  8. <script language="javascript">  
  9. $(function () {  
  10.     $.messager.show(0,'一个Jquery Messager消息弹出插件!');   
  11.     $("#showMessager300x200").click(function(){   
  12.         $.messager.lays(300, 200);   
  13.         $.messager.show(0, '300x200的消息',40000);   
  14.     });   
  15.     $("#showMessagerFadeIn").click(function(){   
  16.         $.messager.anim('fade', 2000);   
  17.         $.messager.show(0, 'fadeIn动画消息');   
  18.     });   
  19.     $("#showMessagerShow").click(function(){   
  20.         $.messager.anim('show', 1000);   
  21.         $.messager.show(0, 'show动画消息');   
  22.     });   
  23.     $("#showMessagerDim").click(function(){   
  24.         $.messager.show('<font color=red>自定义标题</font>', '<font color=green style="font-size:14px;font-weight:bold;">自定义内容</font>');   
  25.     });   
  26.     $("#showMessagerSec").click(function(){   
  27.         $.messager.show(0, '一秒钟关闭消息', 1000);   
  28.     });   
  29. });  
  30.   
  31. </script>  
  32. </head>  
  33.   
  34. <body>  
  35. <p><strong>JQUEYR PLUGIN - Messager </strong></p>   
  36.   
  37. <p><input type="button" id="showMessager300x200" value="显示一个300x200的消息" /></p>   
  38. <p><input type="button" id="showMessagerFadeIn" value="显示一个fadeIn动画消息" /></p>   
  39. <p><input type="button" id="showMessagerShow" value="显示一个show动画消息" /></p>   
  40. <p><input type="button" id="showMessagerDim" value="显示定义内容和标题消息" /></p>   
  41. <p><input type="button" id="showMessagerSec" value="一秒钟关闭消息" /></p>   
  42. <br /><br />  
  43.   
  44. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>  
  45. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>  
  46. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>  
  47. <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>  
  48. </body>  
  49. </html>  

 

更多信息请查看 java进阶网 http://www.javady.com/index.php/category/thread

你可能感兴趣的:(html5)