视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

[html5]html5手机端遮罩弹出菜单代码

时间:2017-06-14 16:55酷播
[html5]html5手机端遮罩弹出菜单代码

效果体验:
http://hovertree.com/texiao/html5/17/

代码如下：

  1. <!doctype html> 
  2. <html lang="zh"> 
  3. <head> 
  4. <meta charset="UTF-8"> 
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  7. <title>jQuery比bootstrap效果还帅的响应式模态窗口插件 - 何问起</title><base target="_blank" /> 
  8.  
  9. <link rel="stylesheet" href="http://hovertree.com/texiao/html5/17/reset.css"> <!-- CSS reset --> 
  10.  
  11. <link rel="stylesheet" href="http://hovertree.com/texiao/html5/17/style.css"> <!-- Resource style --> 
  12. <!--[if IE]> 
  13. <script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script> 
  14. <![endif]--> 
  15.  
  16. </head> 
  17. <body> 
  18.  
  19. <div class="sucaihuo-container"> 
  20. <section class="cd-section"> 
  21. <a class="cd-bouncy-nav-trigger" href="javascript:;" target="_self">显示菜单</a> 
  22. </section> 
  23. <div><a href="http://hovertree.com/h/bjaf/menulayer.htm">原文</a> <a href="http://hovertree.com/">首页</a> <a href="http://hovertree.com/texiao/">特效</a>  <a href="http://hovertree.com/texiao/keleyi/">向上弹出菜单</a> 
  24. </div> 
  25. <div class="cd-bouncy-nav-modal"> 
  26. <nav> 
  27. <ul class="cd-bouncy-nav"> 
  28. <li><a href="http://hovertree.com/">首页</a></li> 
  29. <li><a href="http://hovertree.com/menu/jquery/">jQuery</a></li> 
  30. <li><a href="http://hovertree.com/menu/php/">PHP</a></li> 
  31. <li><a href="http://hovertree.com/h/bjaf/hovertreebatch.htm">批量</a></li> 
  32. <li><a href="http://hovertree.com/texiao/easysector/">饼图</a></li> 
  33. <li><a href="http://tool.hovertree.com/">工具</a></li> 
  34. </ul> 
  35. </nav> 
  36. <a href="#0" class="cd-close" target="_self">关闭菜单</a> 
  37. </div> 
  38. </div> 
  39. <script src="http://hovertree.com/ziyuan/jquery/jquery-2.2.0.min.js"></script> 
  40. <script src="http://hovertree.com/texiao/html5/17/main.js"></script> <!-- Resource jQuery --> 
  41. </body> 
  42. </html> 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器