首页 > 上网技巧 > 电脑小技巧 > 本网页已闲置超过3分钟,按键盘任意键或点击空白...

本网页已闲置超过3分钟,按键盘任意键或点击空白处,即可回到网页

时间:2017-06-07 14:09 作者:QQ地带 我要评论

demo地址:http://www.oicqzone.com/tool/3min/index.html

打开页面,然后切换到其他页面,一分钟回来可以看到效果。

源码:

 

  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=gb2312" /> 
  5. <title>本网页已闲置超过3分钟,按键盘任意键或点击空白处,即可回到网页</title> 
  6.  
  7.  
  8. <script type="text/javascript" src="http://www.oicqzone.com/tool/3min/jquery-1.7.2.min.js"></script> 
  9.  
  10.  
  11. <base target="_blank"/> 
  12.  
  13. </head> 
  14. <body> 
  15. <style> 
  16. /*--页面停留推荐--*/ 
  17. #a_showhotnews_list_dia{ 
  18. width:100%; 
  19.     height:1000px; 
  20.     background-color: rgba(0,0,0,0.6); 
  21.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000); 
  22.     position: absolute; 
  23.     z-index: 999999999999999999999999; 
  24.     top: 0; 
  25.     left: 0; 
  26. .tj_box{ 
  27.     width:1000px; 
  28.     height:480px; 
  29.     background-color:rgb(250,250,250); 
  30.     margin:96px auto 0; 
  31.     border-radius: 10px; 
  32. .tj_top{ 
  33.     padding:10px 20px 10px 20px; 
  34.     height:40px; 
  35.     line-height:40px; 
  36.     color:#666; 
  37.     FONT-FAMILY:"Heiti", "Microsoft YaHei", "Arial Narrow"; 
  38.     font-size:20px; 
  39.     position:relative; 
  40. .tj_center{ 
  41.     height:250px; 
  42.     padding:0 20px; 
  43. .tj_center .tjleft{ 
  44.     width:300px; 
  45.     height:250px; 
  46.     float:left; 
  47. .tj_center .tjright{ 
  48.     width:637px; 
  49.     float:right; 
  50.     height:250px;    
  51. .tj_center h3{ 
  52.     display:block; 
  53.     height:36px; 
  54.     line-height:36px; 
  55.     font-weight:normal; 
  56.     color:#444; 
  57.     font-size:18px;  
  58. .tj_center h3 .centerleft{ 
  59.     float:left; 
  60.     height:35px; 
  61.     line-height:35px; 
  62.     border-bottom:2px solid #227ae1; 
  63. .tj_center h3 .centerright{ 
  64.     float:right; 
  65.     line-height:35px; 
  66.     padding-right:22px; 
  67.     background:url(http://www.oicqzone.com/tool/3min/arrow.png) no-repeat 117px 13px; 
  68. .tj_center h3 a{ 
  69.     color:#444; 
  70.     text-decoration:none !important; 
  71. .tj_center h3 a:visited{ 
  72.     color:#666; 
  73.     text-decoration:none; 
  74. .tj_center h3 a:hover{ 
  75.     color:#e51414; 
  76.     text-decoration:none; 
  77. }    
  78. .tjright li{ 
  79.     float: left; 
  80.     height: 40px; 
  81.     width: 610px; 
  82.     overflow: hidden; 
  83.     line-height: 40px !important; 
  84.     padding-left: 7px; 
  85. .tjright li a{   
  86.     display:inline-block; 
  87.     overflow:hidden; 
  88.     float:left; 
  89.     font-size:18px; 
  90.     padding:0 0 0 18px !important; 
  91.     background:url(http://www.oicqzone.com/tool/3min/circle.png) no-repeat 0 18px;       
  92.     } 
  93. .tjright a:link{ 
  94.     color: #164ace; 
  95.     text-decoration:underline;  
  96. .tjright a:visited { 
  97.     color: #aaa; 
  98. .tjright a:hover { 
  99.     color: #e51414; 
  100. .tjright span.t{ 
  101.     float:left; 
  102.     white-space:nowrap; 
  103.     color:#999; 
  104.     padding-left:55px; 
  105.     font-size:12px;  
  106. .tjright span.t font{ 
  107.     color:#F00; 
  108.     display:inline-block; 
  109.     padding-left2px; 
  110. .tj_bottom{ 
  111.     padding:25px 20px 0 20px; 
  112. /*--关闭--*/ 
  113. .close{ 
  114.     margin:7px 20px 0 0; 
  115.     height:23px; 
  116.     width:60px; 
  117.     float:right; 
  118.     background:url(http://www.oicqzone.com/tool/3min/close.png) no-repeat;  
  119. }    
  120. /*--滚动条--*/ 
  121. .hotnews_list{ 
  122.     width:637px; 
  123.     height:214px; 
  124.     /* overflow:scroll; */ 
  125.     float:left; 
  126.     /* overflow-x:hidden; */ 
  127.     overflow-y:auto; 
  128.     border-top:1px solid #ddd; 
  129.     border-bottom:1px solid #ddd;    
  130.     /* padding:12px 10px 10px; */ 
  131.     box-sizing: border-box; 
  132.     -webkit-box-sizing: border-box; 
  133.     -moz-box-sizing: border-box;     
  134. .tj_top .close1{ 
  135.     position:absolute; 
  136.     top:18px; 
  137.     right:25px; 
  138.     height:19px; 
  139.     width:19px; 
  140.     border:#F00; 
  141. .tj_top .close1 a{ 
  142.     height:19px; 
  143.     width:19px; 
  144.     display:inline-block; 
  145.     background:url(http://www.oicqzone.com/tool/3min/close1.png) no-repeat;  
  146. .tj_top .close1 a:hover{ 
  147.     background:url(http://www.oicqzone.com/tool/3min/close1.png) no-repeat -19px 0;  
  148. </style> 
  149. <div id="a_showhotnews_list_dia" style="display:none"> 
  150. <div id="a_showhotnews_list" class="tj_box"> 
  151.   <div class="tj_top">本网页已闲置超过3分钟,按键盘任意键或点击空白处,即可回到网页<div id="a_showhotnews_top_close" class="close1"><a target="_self" href="javascript:void(0)"></a></div></div> 
  152.   <div class="tj_center"> 
  153.     <div class="tjleft"> 
  154.  
  155. </div> 
  156.     <div class="tjright"> 
  157.       <h3> 
  158.       <div class="centerleft">最热新闻</div> 
  159.       <div class="centerright"><a href="http://www.oicqzone.com">更多热门新闻</a></div> 
  160.       </h3> 
  161.       <div id="a_hotnews_list_c" class="hotnews_list"> 
  162.         
  163.        </div> 
  164.     </div> 
  165.   </div> 
  166.   <div class="tj_bottom"> 
  167.  
  168.  
  169.   </div> 
  170.   <div id="a_showhotnews_list_close" class="close"></div> 
  171. </div> 
  172. </div> 
  173. <script> 
  174.     $(function() { 
  175.         var f = ((1 * 60) + 2) * 1000; 
  176.         var g; 
  177.         var e = 0
  178.         var b = $('#a_showhotnews_list_dia'); 
  179.         var d = $("#a_showhotnews_list"); 
  180.         var h = parseInt(d.css("margin-top").replace(/px/, "")); 
  181.         var a = $("#a_showhotnews_list_close"); 
  182.         a.click(function() { 
  183.             b.hide() 
  184.         }); 
  185.         var xf_top = $("#a_showhotnews_top_close"); 
  186.         xf_top.click(function() { 
  187.             b.hide() 
  188.         }); 
  189.         $(window).keypress(function() { 
  190.                 b.hide() 
  191.         }); 
  192.         b.click(function() { 
  193.             b.hide() 
  194.         }); 
  195.         d.click(function(i) { 
  196.             i.stopPropagation() 
  197.         }); 
  198.         $.fn.triggerPageRefresh = function() { 
  199.             location.reload() 
  200.         }; 
  201.         $.fn.resetIdleTimeup = function() { 
  202.             if (g !== null) { 
  203.                 clearTimeout(g) 
  204.             } 
  205.             g = setTimeout(function() { 
  206.                 if (b.css("display") === "none") { 
  207.                     var i = h + $(window).scrollTop(); 
  208.                     d.css({ 
  209.                         "margin-top": i 
  210.                     }); 
  211.                         b.css({ 
  212.                         "height":$(document).height() 
  213.                     }); 
  214.                      
  215.                     b.show(); 
  216.          
  217.          
  218. try { 
  219.         ga('send', 'event', 'xuanfu', 'show', 'xuanfu',1); 
  220.     } catch (e) {} 
  221.  
  222.                      
  223.                 } 
  224.             }, f) 
  225.         }; 
  226.         $("body").mousemove(function() { 
  227.             if (b.css("display") === "none") { 
  228.                 b.resetIdleTimeup() 
  229.             } 
  230.         }).resetIdleTimeup() 
  231.     }); 
  232. if(document.getElementById("a_hotnews_list_c")!=null) 
  233.     document.getElementById('a_hotnews_list_c').onclick = function() { 
  234.     try { 
  235.         ga('send', 'event', 'xuanfu_c', 'click', 'xuanfu_c',1); 
  236.     } catch (e) {} 
  237. </script> 
  238. </body> 
  239. </html> 

标签: 源码
顶一下
(37)
97.4%
踩一下
(1)
2.6%

Google提供的广告