list.html 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6. <title>精美时尚</title>
  7. <link href="css/global.css?v=3f8cf811" rel="stylesheet"><link href="css/list.css?v=3f8cf811" rel="stylesheet"></head>
  8. <body>
  9. <div class="logo"><img src="images/logo.jpg" />精品购物指南</div>
  10. <div class="info-txt">这里加一行简介</div>
  11. <div class="tab" node-id="tab">
  12. <a class="li active"><span>预购杂志</span></a>
  13. <a class="li"><span>兑换码</span></a>
  14. </div>
  15. <div class="list pages" node-id="list">
  16. <div class="item">
  17. <img src="images/mag.png" class="default" />
  18. <div class="info">
  19. <h2>段宜恩电子刊段宜恩电子刊段宜恩电子刊</h2>
  20. </div>
  21. <div class="ctrls-cont">
  22. <p class="clearfix">
  23. <span class="price">免费</span>
  24. </p>
  25. <button class="button" node-act="read" data-src="images/qrcode.png">阅读</button>
  26. </div>
  27. </div>
  28. <div class="item">
  29. <img src="images/mag.png" class="default" />
  30. <div class="info">
  31. <h2>Yamy魔幻星际女战士的异度空间</h2>
  32. </div>
  33. <div class="ctrls-cont">
  34. <p class="clearfix">
  35. <span class="price">¥6.00</span>
  36. </p>
  37. <button class="button">订阅</button>
  38. </div>
  39. </div>
  40. </div>
  41. <div class="mask fn-hide" id="layer">
  42. <div class="layer read-layer">
  43. <div class="qrcode-wrap">
  44. <img src="images/qrcode.png" alt="" class="default" id="code">
  45. <p>长按识别<span id="product_name">小程序</span>阅读电子刊</p>
  46. </div>
  47. <a href="javascript:;" class="btn-close" id="close"></a>
  48. </div>
  49. </div>
  50. <script type="text/javascript" src="js/global.js?v=3f8cf811"></script><script type="text/javascript" src="js/list.js?v=3f8cf811"></script></body>
  51. <script>
  52. function init(){
  53. /*
  54. var tabIndex = 0;
  55. $('[node-id="tab"]').on('click','.li',function(){
  56. tabIndex = $(this).index();
  57. $(this).addClass('active').siblings('.li').removeClass('active');
  58. $('[node-id="list"]').hide().eq(tabIndex).show();
  59. });
  60. */
  61. $('[node-act="read"]').on('click',function(){
  62. $('#code').attr('src',$(this).data('src'));
  63. $('#layer').show();
  64. })
  65. $('[node-act="pay"]').on('click',function(){
  66. pay($(this).data('src'));
  67. })
  68. $('#close').on('click',function(){
  69. $('#layer').hide();
  70. });
  71. }
  72. init();
  73. function pay(url)
  74. {
  75. location.href = url;
  76. }
  77. </script>
  78. </html>