全球主机交流论坛

标题: 键盘左右键控制翻页到底怎么弄! [打印本页]

作者: 云生    时间: 2012-6-11 17:17
标题: 键盘左右键控制翻页到底怎么弄!
本帖最后由 云生 于 2012-6-11 21:06 编辑

很久以前就想实现这个功能了。一直学不会。

网上看到这段代码,但还是不会。
  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. <title>上一页下一页地址</title>
  6. <style type="text/css">

  7. #new_b{
  8.         display: none;
  9.         }
  10. #pre{
  11.         height: 50px;
  12.         width: 400px;
  13.         background-color:#dedede;
  14. }
  15. #next{
  16.         height: 50px;
  17.         width: 400px;
  18.         background-color:#dedede;
  19. }
  20.        
  21. </style>
  22. </head>

  23. <body>
  24. <div id="new_b">
  25.              总数:<a title="Total record">&nbsp;<b>16</b> </a>&nbsp;&nbsp;<a href="/xinwen/index.html">首页</a>&nbsp;<a href="http://www.baidu.com">上一页</a>&nbsp;<a href="/xinwen/index.html">1</a>&nbsp;<b>2</b>&nbsp;<a href="/xinwen/index_3.html">3</a>&nbsp;<a href="/xinwen/index_4.html">4</a>&nbsp;<a href="/xinwen/index_3.html">下一页</a>&nbsp;<a href="/xinwen/index_4.html">尾页</a>
  26.             </div>
  27.             
  28. 本文件向你展示如果获取帝国CMS上一页下一页的地址:<br />
  29. 上一页的地址是:<br />
  30. <div id="pre"></div>
  31. 下一页的地址是:<br />
  32. <div id="next"></div>
  33. <a href="#" id="p">上一页</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" id="n">上一页</a>
  34. <br /><br /><br /><br /><br />
  35. *************************************云客yunke原创&nbsp;云游天下 做客四方  qq:1012574684 *************************************
  36. <script type="text/javascript">
  37.     var str;
  38.         var pre;
  39.         var next;
  40.                 str=document.getElementById("new_b").innerHTML;
  41.         var preex;
  42.         var nextex;
  43.                 preex='[A-Za-z0-9_\./:]+(?=">上一页)';
  44.                 //preex='[\w\.]+(?=">上一页)'; 注意js不支持此写法
  45.                 nextex='[A-Za-z0-9_\./:]+(?=">下一页)';
  46.                 pre=str.match(preex);
  47.                 next=str.match(nextex);
  48.           document.getElementById("pre").innerHTML=pre;
  49.           document.getElementById("next").innerHTML=next;          
  50.           alert(pre[0]);
  51.          // alert(next[0]);
  52.           if(pre!=null)
  53.           {
  54.           document.getElementById("p").href=pre;
  55.              }
  56.           if(next!=null)
  57.           {
  58.           document.getElementById("n").href=next;
  59.              }
  60. </script>
  61. </body>
  62. </html>
复制代码

作者: iyuheng    时间: 2012-6-11 17:20
我也不会
作者: iking    时间: 2012-6-11 17:26
js还挺复杂
作者: 否要    时间: 2012-6-11 17:33
看不来。不过觉得这是DIV+css实现的吧,或许html+css3效果会更好
作者: GameOver    时间: 2012-6-11 17:35
我也不会
作者: atrong    时间: 2012-6-11 17:39
不会
作者: wdlth    时间: 2012-6-11 18:19
js,鼠标事件。
作者: 云生    时间: 2012-6-11 19:42
就没人会吗?
作者: micto    时间: 2012-6-11 20:52
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="gb2312" />
  5. <title>上一页下一页测试</title>
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9.     $(document).click(function(e){
  10.         var prevUrl = $('.prev').attr('href');        
  11.         
  12.         if (e.which == 0 || e.which == 1) {
  13.             window.location.href = prevUrl;
  14.         }
  15.     });
  16.    
  17.     $(document).bind("contextmenu",function(){
  18.         var nextUrl = $('.next').attr('href');
  19.         window.location.href = nextUrl;
  20.     });
  21. });
  22. </script>
  23. </head>

  24. <body>
  25. <footer id="footer">
  26.     <div class="pager">
  27.         <a href="http://www.163.com" class="prev">上一页</a>
  28.         <a href="http://www.google.com" class="next">下一页</a>
  29.     </div>
  30. </footer>
  31. </body>
  32. </html>
复制代码
另外,楼主在武汉读的大学?




欢迎光临 全球主机交流论坛 (https://sunk.eu.org/) Powered by Discuz! X3.4