devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

javascript 循环遍历绑定事件问题

作者：我家自动化 | 2024-02-26 17:57:32

赞

踩

javascript 循环遍历绑定事件问题
  1. <!DOCTYPE html>
  2. <html manifest="/browser_page_mng/html/4/1000266/cache.manifest">
  3. <head>
  4.     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  5.     <meta charset="utf-8">
  6.     <title>浏览器导航</title>
  7.     <meta http-equiv="Cache-Control" content="no-cache">
  8.     <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  9.     <script type="text/javascript">
  10.         /** 调用终端统计接口 */
  11.         (function () {
  12.             var ext = window.mopontv;
  13.             if (ext != undefined) {
  14.                 try {
  15.                     ext.isRealTimePVSupport();
  16.                 } catch (err) {
  17.  
  18.  
  19.                 }
  20.             }
  21.         })();
  22.         /** 搜索 */
  23.         function postJSON(url, data, successHandler, errorHandler) {
  24.             var request = new XMLHttpRequest();
  25.             //
  26.             request.open("POST", url, true);
  27.             request.onreadystatechange = function () {
  28.                 // 事件监听
  29.                 // console.log(request.readyState);
  30.                 if (request.readyState === XMLHttpRequest.DONE) {
  31.                     if (request.status === 200) {
  32.                         var type = request.getResponseHeader("Content-Type");
  33.                         if (successHandler && type === "application/json") {
  34.                             successHandler(JSON.parse(request.responseText));
  35.                         }
  36.                         if (successHandler && type.match(/^text/)) {
  37.                             successHandler(request.responseText);
  38.                         }
  39.  
  40.  
  41.                     } else {
  42.                         console.log("error:" + request.status);
  43.                         // throw new Error(request.status);
  44.                         if (errorHandler) {
  45.                             errorHandler(request);
  46.                         }
  47.                     }
  48.                 }
  49.  
  50.  
  51.             };
  52.             request.send("data=" + JSON.stringify(data));
  53.         };
  54.  
  55.  
  56.         var param = {
  57.             optype: "ntvsearchstatistic",
  58.             tag: "SDFQ34RKL",
  59.             browserid: 1000266,
  60.             advids: "83",
  61.             version: 1,
  62.             action: "",
  63.             word: ""
  64.         }
  65.  
  66.  
  67.         function search($this) {
  68.             var word = "";
  69.             var $sbox = $this.parentNode;
  70.             word = $sbox.getElementsByTagName("input")[0].value;
  71.             if (word.replace(/(^\s*)|(\s*$)/g, "") !== "") {
  72.                 var form = $sbox.parentNode;
  73.                 var action = form.action;
  74.                 action = action + word;
  75.                 window.location.href = action;
  76.                 // statistic
  77.                 param.word = word;
  78.                 param.action = form.action;
  79.                 postJSON("http://swift.51mrp.com/ntvsearchstatistic", param, function (rsp) {
  80.                     //console.log(rsp);
  81.                 });
  82.             }
  83.             return false;
  84.         }
  85.         /*APN切换*/
  86.         function isAPNSupport() {
  87.             var ext = window.mopontv;
  88.             return ext != undefined && ext.isAPNSelectionSupport();
  89.         }
  90.         function bindAPNUrls(c) {
  91.             var apnUrlsJson = changeUrl(["http://baidu.com", "http://dddddd", "http://s", "http://s1", "http://s2", "http://s3", "http://s4", "http://sdfsdf", "https://s", "http://swift.51mrp.com/", "http://swift.51mrp.com/1", "http://swift.51mrp.com/10", "http://swift.51mrp.com/11", "http://swift.51mrp.com/12", "http://swift.51mrp.com/13", "http://swift.51mrp.com/14", "http://swift.51mrp.com/15", "http://swift.51mrp.com/16", "http://swift.51mrp.com/17", "http://swift.51mrp.com/2", "http://swift.51mrp.com/3", "http://swift.51mrp.com/4", "http://swift.51mrp.com/5", "http://swift.51mrp.com/6", "http://swift.51mrp.com/7", "http://swift.51mrp.com/8", "http://swift.51mrp.com/9", "http://swift.51mrp.com/android_browser_mng/home/getHomePage?bid\u003d1000206", "http://swift.51mrp.com/urlMappingHandler?code\u003d-1428599978\u0026type\u003dbrowser_griditem_download/hhh.apk", "http://swift.51mrp.com/urlMappingHandler?code\u003d-718892215", "http://t.moonbasa.com/rd/rdm?e\u003d999\u0026adtype\u003d1\u0026unionid\u003dskymobi\u0026subunionid\u003d\u0026other\u003dunionid:skymobi|adtype:1|adid:999\u0026url\u003dhttp://t.moonbasa.com", "http://www.baidu.com", "http://www.google.cn/", "http://www.renren.com", "http://www.renren.com/"]);
  92.             var t = (c || document).getElementsByTagName("a");
  93.             for (i in t) {
  94.                 var a = t[i];
  95.                 if (apnUrlsJson.indexOf(a.href) != -1) {
  96.                     a.onclick = function (e) {
  97.                         e.preventDefault();
  98.                         window.mopontv.onLoadSpecificURL(this.href);
  99.                     };
  100.                 }
  101.             }
  102.         }
  103.         function changeUrl(APNList) {
  104.             var tagA = document.createElement("a");
  105.             for (i in APNList) {
  106.                 tagA.href = APNList[i];
  107.                 APNList[i] = tagA.href;
  108.             }
  109.             return APNList;
  110.         }
  111.         var appCache = window.applicationCache;
  112.         appCache.onupdateready = function () {
  113.             window.location.reload();
  114.         }
  115.  
  116.  
  117.  
  118.  
  119.         /*新增*/
  120.         window.onload = function () {
  121.             /**
  122.             var ul=document.getElementsByClassName("fenlei")[0];
  123.             var lis=ul.getElementsByTagName("li");
  124.             for(var i=0;i<lis.length;i++){
  125.             var li=lis[i];
  126.             li.onclick=click_nav;
  127.             }
  128.             lis[0].click();
  129.                  
  130.             var ul=document.getElementsByClassName("fenlei")[1];
  131.             var lis=ul.getElementsByTagName("li");
  132.             for(var i=0;i<lis.length;i++){
  133.             var li=lis[i];
  134.             li.onclick=click_nav1;
  135.             }
  136.             lis[0].click();
  137.             **/
  138.  
  139.  
  140.  
  141.  
  142.  
  143.  
  144.             var add_the_handlers = function (nodes) {
  145.  
  146.  
  147.                 var click_nav_fix = function (liElement) {
  148.                     debugger;
  149.                     var url = liElement.dataset.url;
  150.                     var show = liElement.dataset.show;
  151.                     var index=0;
  152.  
  153.  
  154.                   var uls=  document.getElementsByClassName("fenlei");
  155.                     for (var i = 0; i < uls.length; i++) {
  156.                         if(liElement.parentNode===uls[i]){
  157.                             index=i
  158.                         }
  159.                     }
  160.  
  161.  
  162.                     var form = document.getElementsByTagName("form")[index];
  163.                     var input = form.getElementsByTagName("input")[0];
  164.                     var p = liElement.parentNode.children;
  165.                     for (var i = 0; i < p.length; i++) {
  166.                         var chi = p[i];
  167.                         chi.setAttribute("class", "");
  168.                     }
  169.                     liElement.setAttribute("class", "fenlei_click");
  170.  
  171.  
  172.                     input.setAttribute("placeholder", show);
  173.                     form.setAttribute("action", url);
  174.                 }
  175.  
  176.  
  177.                 for (var i = 0; i < nodes.length; i++) {
  178.                     //alert("父元素个数："+ul.length);
  179.                     //var ul_temp=document.getElementsByClassName("fenlei")[i];
  180.                     doc = nodes[i]
  181.                     doc.onclick = function (e) {
  182.                         e = e || window.event;
  183.                         var tagChild = e.srcElement || e.target;
  184.                         if (tagChild.nodeType == 1 && tagChild.tagName.toLowerCase() == "li") {
  185.                             click_nav_fix(tagChild);
  186.                         }
  187.                         tagChild = null;
  188.                     }
  189.                     var lis = nodes[i].getElementsByTagName("li");
  190.                     lis[0].click();
  191.                 }
  192.  
  193.  
  194.             };
  195.  
  196.  
  197.  
  198.  
  199.  
  200.  
  201.  
  202.  
  203.             //  父元素循环调用
  204.             var ul = document.getElementsByClassName("fenlei");
  205.             add_the_handlers(ul);
  206.  
  207.  
  208.  
  209.  
  210.  
  211.  
  212.         };
  213.  
  214.  
  215.  
  216.  
  217.  
  218.  
  219.  
  220.  
  221.  
  222.  
  223.  
  224.  
  225.  
  226.  
  227.  
  228.  
  229.         function click_nav() {
  230.             var url = this.dataset.url;
  231.             var show = this.dataset.show;
  232.             var form = document.getElementsByTagName("form")[0];
  233.             var input = form.getElementsByTagName("input")[0];
  234.             var p = this.parentNode.children;
  235.             for (var i = 0; i < p.length; i++) {
  236.                 var chi = p[i];
  237.                 chi.setAttribute("class", "");
  238.             }
  239.             this.setAttribute("class", "fenlei_click");
  240.  
  241.  
  242.             input.setAttribute("placeholder", show);
  243.             form.setAttribute("action", url);
  244.         }
  245.  
  246.  
  247.         /*新增修改*/
  248.         function click_nav1() {
  249.             var url = this.dataset.url;
  250.             var show = this.dataset.show;
  251.             var form = document.getElementsByTagName("form")[1];
  252.             var input = form.getElementsByTagName("input")[0];
  253.             var p = this.parentNode.children;
  254.             for (var i = 0; i < p.length; i++) {
  255.                 var chi = p[i];
  256.                 chi.setAttribute("class", "");
  257.             }
  258.             this.setAttribute("class", "fenlei_click");
  259.  
  260.  
  261.             input.setAttribute("placeholder", show);
  262.             form.setAttribute("action", url);
  263.         }
  264.  
  265.  
  266.  
  267.  
  268.     </script>
  269.     <style type="text/css">
  270.         body, div, a, p, input, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form
  271.         {
  272.             margin: 0;
  273.             padding: 0;
  274.             list-style: none;
  275.             vertical-align: middle;
  276.             font-size: 14px;
  277.             font-family: Arial,Helvetica;
  278.             -webkit-text-size-adjust: none;
  279.         }
  280.         a
  281.         {
  282.             text-decoration: none;
  283.         }
  284.         body
  285.         {
  286.             background: #fafafa;
  287.             min-width: 320px;
  288.             max-width: 350px;
  289.             margin: 0 auto;
  290.             color: #666;
  291.         }
  292.         .header
  293.         {
  294.             background: url(http://plugins.mrpcdn.com/down/714253d4-8b1d-458d-8770-9bc33c4625d9/320x447.jpg) #fafafa no-repeat center center;
  295.             background-size: 100% 447px;
  296.             height: 447px;
  297.             margin-bottom: -393px;
  298.         }
  299.         .header .logo
  300.         {
  301.             padding: 19px 0 0 10px;
  302.             background: url(data:image/png;base64,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) no-repeat right bottom;
  303.             height: 30px;
  304.             width: 100px;
  305.         }
  306.         .search
  307.         {
  308.             padding: 7px 16px 5px 16px;
  309.         }
  310.         .search .sbox
  311.         {
  312.             margin: 0 auto;
  313.             overflow: hidden;
  314.             position: relative;
  315.             width: 100%;
  316.             height: 32px;
  317.         }
  318.         .search .sbox .sinput
  319.         {
  320.             border: 1px solid #999;
  321.             border-right: none;
  322.             border-radius: 2px;
  323.             height: 30px;
  324.             position: absolute;
  325.             right: 44px;
  326.             left: 0;
  327.             top: 0;
  328.             background: rgba(255,255,255,0.6);
  329.         }
  330.         .search .sbox .sinput input
  331.         {
  332.             display: block;
  333.             width: 100%;
  334.             line-height: 18px;
  335.             border: 0;
  336.             padding: 6px 10px 5px 8px;
  337.             background-color: transparent;
  338.             -moz-box-sizing: border-box;
  339.             -webkit-box-sizing: border-box;
  340.         }
  341.         .search .sbox .sbutton
  342.         {
  343.             background: #55b2fe;
  344.             background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAgCAMAAACxWgF2AAACZ1BMVEW/dwvJgxnkigLbhgb//fz/8+LPgAj/nQD/mwX/+fD/+vT+1Zj+rznGgBf/sjXvpzn9ohn+5cD8oyH92aH/oBL/5Lv9rTX+4rf//Pn91Zr8t0//mwT///79pB/+x3b+qy3/mAL/tET/+/X/sTz/uVH9t07+rDD+157/wWT+mQL+x3X83rD+7M/+79j/xGz/oxz9skH+4LP++/b+9un96Mr+oRf/0Ir/mgP++fH9pyj+9+z98d7/oBH/qSjiiQLjnzbrnCb/pyH/rzXghgD+yXb+nQ7+7NL/9Ob+7tX+nAr/+e79wGP+t0z++PD+pR7+t03/vFf9ohr//v398uD+ng39w2z+ulX+5sL/nAr+1JX+rDX94bb/1Jb9wWX++O792KDhiALMfgn+3av/47n/2J//mQP+xnP/0Yz/8dz+pB79ohv/8+D/oBP8v2P/79f/uVD/+/b+2J7//fv/79j/y3/9oRb95cH+pBz+mQH/8t78rzv83K391Zn+/v3/oRj9vl3+v2D/1Zj+8eD9qCn+7ND9v2P++vX9vl//u1T/9ef/mAH/piT+vmD+mwf9vVz+8+P+w2n95L3+/fv+z4j/8t/9skL8y4L9sD3+ox3+nAn/+e/+3q7//fr+tUn9xnP+skH/ulH+8uD/ulP+tkr+8+L/9OP+sj7/lwHGeQf/mwD+tEX/nAf/7tT++fH+/Pn+y37/+vL/4rb+lgD/mQX/9OT+47r+zIH/mQT/79b+sT3/+fL+/Pj/nQr/kwD/lAD/mAD/lQD/lwDGegfiiAL/mgDjnTP/rjLHegf/lgD/nAD/mQCmBw7kAAAABHRSTlODg4ODyxPDhAAAAd9JREFUeNqN0/VTFVEYxvG1E+zGAOxGwW4U7O4OQEXsTmxFVEAssJPu5l7vnvOa78P+UbojA4fRc7jf387sZ959Z8NqOW/uDz/r0sKKnL/gp58FBlhzBDdJ/o3/k8i2vn131Dgr78uf2jM5/1T3takW9uBObQo9ng75oyPs5jSVL5wMtPZ0DAKiVrEwatocA4QP6tx1YO6UCnjjSBj1dniLF/lYkPSt3IsTiWzQ9kZgh4/qD7HHcf0GazWt34RdjTfnKzfxlLSaN2DnVtl4zb6Fx89Jp8U+bFOwQ8kpj56wdu+T2KI+Y/EgDff1+jxOSVWfu4hU/SY1uKbOpiVn8FA7m0pRqV7k2dFFF7Sa7+D2M2W4HI/Fp4V2dkYlXlRTA+4+DsWkf5fy1UtU3eP6Q89eGDuB9dopqwIuHZTMLLN6d0NRf8ekqTz9Mg7tXz19+Mh+JUDfMWHLWa8dUX31QAHWzpgGFPTp4QWS3timf0eePVx6ZN3M/BHDBuROAvCulnXajWReQvyaWVOlnLgCAD59tvXa9cTsfrhldwtd/rFW6rW61fsSl1d8IK1Wuf020+U1wqBVfnQpcOy1abbKfUNDsMw27q02JDR4lKPo3XWmcohzGg7tsq1We375W1vrN55vHbpDsWaoAAAAAElFTkSuQmCC) #ff9900 no-repeat center center;
  345.             height: 32px;
  346.             width: 45px;
  347.             position: absolute;
  348.             right: 0;
  349.             top: 0;
  350.             text-indent: -9999em;
  351.             z-index: 2;
  352.         }
  353.         .imgad
  354.         {
  355.             width: 320px;
  356.             height: 50px;
  357.             margin: 0 auto;
  358.         }
  359.         .imgad img
  360.         {
  361.             width: 100%;
  362.             height: 45px;
  363.             display: block;
  364.         }
  365.         .textad
  366.         {
  367.             background: rgba(243,243,243,0.5);
  368.             height: 27px;
  369.             line-height: 27px;
  370.             width: 100%;
  371.             margin-top: 2px;
  372.         }
  373.         .textad a
  374.         {
  375.             padding-left: 16px;
  376.             overflow: hidden;
  377.             white-space: nowrap;
  378.             text-overflow: ellipsis;
  379.             display: block;
  380.             color: #656565;
  381.         }
  382.         .grid
  383.         {
  384.             padding: 0 5px 10px;
  385.         }
  386.         .grid ul .icon_item
  387.         {
  388.             display: table;
  389.             width: 100%;
  390.             table-layout: fixed;
  391.             padding: 15px 0 5px;
  392.         }
  393.         .grid ul .icon_item .icon_link
  394.         {
  395.             display: table-cell;
  396.             text-align: center;
  397.             vertical-align: middle;
  398.         }
  399.         .grid ul .icon_item .icon_link img
  400.         {
  401.             width: 54px;
  402.             height: 54px;
  403.         }
  404.         .grid ul .icon_item .icon_link span
  405.         {
  406.             display: block;
  407.             margin: 1px auto 0 auto;
  408.             white-space: nowrap;
  409.             font-size: 13px;
  410.             color: #828282;
  411.         }
  412.         .custom
  413.         {
  414.             margin: 10px 0 0 0;
  415.             border-bottom: 1px solid #b4b4b4;
  416.         }
  417.         .custom .common-block
  418.         {
  419.             border-bottom: 1px dashed #B4B4B4;
  420.         }
  421.         .custom .common-block:last-of-type
  422.         {
  423.             border-bottom: medium none;
  424.         }
  425.         .custom.c1 .common-header .title
  426.         {
  427.             background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAQCAMAAADtX5XCAAAAKlBMVEV/sjGFujR/sjGFujSFujSFujR/sTGEuTOFujR8rjCCtjMAAAB8rjCFujStRQKFAAAADHRSTlPONdItNiDUoXj7swCnZqw2AAAAKklEQVR42rXFwQEAIAjDQBAVLLr/upYhyCMnIQAG/yrQqzYXPcnajO3lBxsaBIcD15uYAAAAAElFTkSuQmCC) no-repeat left center;
  428.         }
  429.         .custom.c1 .common-header .title span
  430.         {
  431.             color: #85BA34;
  432.         }
  433.         .custom.c1 .break-line
  434.         {
  435.             border-bottom-color: #85BA34;
  436.         }
  437.         .custom.c2 .common-header .title
  438.         {
  439.             background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAQCAMAAADtX5XCAAAAKlBMVEXJnmnSpW7JnWnSpW7SpW7SpW7InWnRpG3SpW7EmmbNoWsAAADInWnSpW4My1hoAAAADHRSTlPOPtI3QCfUoXj7swASMUUEAAAAKklEQVR42rXFwQEAIAjDQBAVLLr/upYhyCMnIQAG/yrQqzYXPcnajO3lBxsaBIcD15uYAAAAAElFTkSuQmCC) no-repeat left center;
  440.         }
  441.         .custom.c2 .common-header .title span
  442.         {
  443.             color: #d2a56e;
  444.         }
  445.         .custom.c2 .break-line
  446.         {
  447.             border-bottom-color: #d2a56e;
  448.         }
  449.         .custom.c3 .common-header .title
  450.         {
  451.             background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAQCAMAAADtX5XCAAAALVBMVEXTiZzcj6PSiJzcj6Pcj6PQh5rajaHcj6Pcj6Pcj6PNhZjXjJ8AAADNhZjcj6PL/EyBAAAADXRSTlPODdIIfuCoCgZ4+7MA6d5P9AAAACxJREFUeNqtxckBACAIxEA8ERbtv1xXbcE8MmICIPPrBDpT0UE92Hdr69d4bTYdBO+RhMKAAAAAAElFTkSuQmCC) no-repeat left center;
  452.         }
  453.         .custom.c3 .common-header .title span
  454.         {
  455.             color: #dc8fa3;
  456.         }
  457.         .custom.c3 .break-line
  458.         {
  459.             border-bottom-color: #dc8fa3;
  460.         }
  461.         .custom.c4 .common-header .title
  462.         {
  463.             background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAQCAMAAADtX5XCAAAAJ1BMVEVNq85Nq85Mp8lRs9dQstZNq81Nq81Rs9dLp8lPr9IAAABQstZRs9ep3IsfAAAAC3RSTlPO0fSJodTSePuzABbOCnoAAAApSURBVHjatcXBAQAgCMNAEAUq7j+vZQjyyEkIAOdfB1quy2heNmac3X4DOgQenj8HKgAAAABJRU5ErkJggg==) no-repeat left center;
  464.         }
  465.         .custom.c4 .common-header .title span
  466.         {
  467.             color: #51b3d7;
  468.         }
  469.         .custom.c4 .break-line
  470.         {
  471.             border-bottom-color: #51b3d7;
  472.         }
  473.         .custom.c0 .common-header .title
  474.         {
  475.             background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAQCAMAAADtX5XCAAAAKlBMVEXOm8zMmcrNm8vMmsrXotXWodTNmsvXotXJl8fSntAAAADWodTJl8fXotX9AKdTAAAAC3RSTlPO4NLdkaHUePuzAM20KekAAAAqSURBVHjatcXBAQAgCMNABBWKuv+6liHIIycuAJR/FegZdieNZG36XuUHCg4ENjgPzmgAAAAASUVORK5CYII=) no-repeat left center;
  476.         }
  477.         .custom.c0 .common-header .title span
  478.         {
  479.             color: #d7a2d5;
  480.         }
  481.         .custom.c0 .break-line
  482.         {
  483.             border-bottom-color: #d7a2d5;
  484.         }
  485.         .custom .common-header
  486.         {
  487.             zoom: 1;
  488.             height: 30px;
  489.             padding-right: 13px;
  490.         }
  491.         .custom .common-header:before, .custom .common-header:after
  492.         {
  493.             display: table;
  494.             content: "";
  495.         }
  496.         .custom .common-header:after
  497.         {
  498.             clear: both;
  499.         }
  500.         .custom .common-header .title
  501.         {
  502.             float: left;
  503.             height: 20px;
  504.             margin: 5px 1px 5px 7px;
  505.         }
  506.         .custom .common-header .title span
  507.         {
  508.             font-size: 16px;
  509.             color: #85BA34;
  510.             text-align: left;
  511.             padding-left: 12px;
  512.             height: 22px;
  513.             line-height: 22px;
  514.         }
  515.         .custom .common-header a
  516.         {
  517.             float: right;
  518.             display: block;
  519.             height: 30px;
  520.             line-height: 30px;
  521.             color: #666;
  522.             max-width: 180px;
  523.             overflow: hidden;
  524.             white-space: nowrap;
  525.             text-overflow: ellipsis;
  526.         }
  527.         .custom .break-line
  528.         {
  529.             height: 0;
  530.             font-size: 0;
  531.             margin-left: 26.5%;
  532.             border-bottom: 1px solid #85BA34;
  533.         }
  534.         .textlink
  535.         {
  536.             border-bottom: 1px dashed #b4b4b4;
  537.         }
  538.         .textlink .dot li
  539.         {
  540.             background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAAA1BMVEXIyMiuWu3mAAAAFUlEQVR42q3BAQEAAACAkP6vdiKaAABIAAGDHiG2AAAAAElFTkSuQmCC) no-repeat 20px center;
  541.             background-size: 5px 5px;
  542.             padding-left: 20px;
  543.         }
  544.         .textlink .dot a
  545.         {
  546.             text-align: left;
  547.             padding-left: 28px;
  548.         }
  549.         .textlink li
  550.         {
  551.             display: table;
  552.             table-layout: fixed;
  553.             height: 17px;
  554.             line-height: 17px;
  555.             width: 100%;
  556.             padding: 12px 0;
  557.             border-bottom: 1px dashed #b4b4b4;
  558.         }
  559.         .textlink li a
  560.         {
  561.             display: table-cell;
  562.             border-right: 1px solid #999;
  563.             text-align: center;
  564.             font-size: 16px;
  565.             color: #666;
  566.             -webkit-font-smoothing: antialiased;
  567.         }
  568.         .textlink li a:last-of-type
  569.         {
  570.             border-right: medium none;
  571.         }
  572.         .textlink li:last-of-type
  573.         {
  574.             border-bottom: medium none;
  575.         }
  576.         .scroll-text
  577.         {
  578.             overflow: hidden;
  579.             position: relative;
  580.         }
  581.         .scroll-text .gallery
  582.         {
  583.             zoom: 1;
  584.             width: 400%;
  585.             overflow: hidden;
  586.             position: relative;
  587.         }
  588.         .scroll-text .gallery:before, .scroll-text .gallery:after
  589.         {
  590.             display: table;
  591.             content: "";
  592.         }
  593.         .scroll-text .gallery:after
  594.         {
  595.             clear: both;
  596.         }
  597.         .scroll-text .gallery a
  598.         {
  599.             position: relative;
  600.             display: block;
  601.             float: left;
  602.             width: 25%;
  603.             height: 50px;
  604.             line-height: 50px;
  605.             -webkit-tap-highlight-color: rgba(0,0,0,0);
  606.             text-align: center;
  607.             font-size: 15px;
  608.             color: #666;
  609.         }
  610.         .scroll-text .scroll-control
  611.         {
  612.             position: absolute;
  613.             bottom: 4px;
  614.             left: 50%;
  615.             margin-left: -20px;
  616.             text-align: center;
  617.             font-size: 0;
  618.         }
  619.         .scroll-text .scroll-control li
  620.         {
  621.             height: 3px;
  622.             width: 6px;
  623.             display: inline-block;
  624.             background: #dcdcdc;
  625.             margin: 0 2px;
  626.             overflow: hidden;
  627.         }
  628.         .scroll-text .scroll-control li.active
  629.         {
  630.             background: #bebebe;
  631.         }
  632.         .double-image .img, .image-text .img
  633.         {
  634.             display: -webkit-box;
  635.         }
  636.         .double-image .img a, .image-text .img a
  637.         {
  638.             display: block;
  639.             position: relative;
  640.             color: white;
  641.         }
  642.         .double-image .img a p, .image-text .img a p
  643.         {
  644.             position: absolute;
  645.             bottom: 0;
  646.             left: 0;
  647.             width: 100%;
  648.             height: 25px;
  649.             line-height: 25px;
  650.             background-color: rgba(0,0,0,0.5);
  651.             overflow: hidden;
  652.             color: white;
  653.             text-align: center;
  654.             font-size: 13px;
  655.         }
  656.         .double-image ul
  657.         {
  658.             width: 288px;
  659.             margin: 13px auto;
  660.             display: -webkit-box;
  661.         }
  662.         .double-image .img
  663.         {
  664.             width: 134px;
  665.             height: 101px;
  666.         }
  667.         .double-image .img:first-of-type
  668.         {
  669.             margin-right: 20px;
  670.         }
  671.         .image-text ul
  672.         {
  673.             width: 289px;
  674.             margin: 13px auto;
  675.             display: -webkit-box;
  676.         }
  677.         .image-text .img
  678.         {
  679.             width: 121px;
  680.             height: 91px;
  681.         }
  682.         .image-text .img:first-of-type
  683.         {
  684.             margin-right: 8px;
  685.         }
  686.         .image-text .text
  687.         {
  688.             width: 160px;
  689.         }
  690.         .image-text .text a
  691.         {
  692.             display: block;
  693.             height: 30px;
  694.             line-height: 30px;
  695.             font-size: 13px;
  696.             white-space: nowrap;
  697.             text-overflow: ellipsis;
  698.             overflow: hidden;
  699.             color: #666;
  700.         }
  701.         .image-text .text a label
  702.         {
  703.             padding: 0 3px;
  704.         }
  705.         .app-download
  706.         {
  707.             width: 320px;
  708.             margin: 0 auto;
  709.         }
  710.         .app-download .app
  711.         {
  712.             zoom: 1;
  713.             margin: 0 10px 0 16px;
  714.         }
  715.         .app-download .app:before, .app-download .app:after
  716.         {
  717.             display: table;
  718.             content: "";
  719.         }
  720.         .app-download .app:after
  721.         {
  722.             clear: both;
  723.         }
  724.         .app-download .app li
  725.         {
  726.             float: left;
  727.             display: -webkit-box;
  728.             margin: 13px 3px 13px 0;
  729.         }
  730.         .app-download .app li img
  731.         {
  732.             display: -webkit-box;
  733.             margin-right: 6px;
  734.         }
  735.         .app-download .app li .desc
  736.         {
  737.             width: 75px;
  738.             white-space: nowrap;
  739.             overflow: hidden;
  740.         }
  741.         .app-download .app li .desc .size
  742.         {
  743.             height: 21px;
  744.             line-height: 21px;
  745.         }
  746.         .app-download .app li .desc a
  747.         {
  748.             width: 67px;
  749.             height: 26px;
  750.             line-height: 26px;
  751.             display: block;
  752.             text-align: center;
  753.             background: #7cb8eb;
  754.             color: #fff;
  755.         }
  756.         .footer
  757.         {
  758.             background: url(http://plugins.mrpcdn.com/down/1ea47d57-c1ae-40fc-9aad-0ec9df79b892/320x117.jpg) #fafafa no-repeat center center;
  759.             background-size: 100% 117px;
  760.             height: 117px;
  761.             position: relative;
  762.         }
  763.         .footer .nav
  764.         {
  765.             position: absolute;
  766.             left: 50%;
  767.             top: 48px;
  768.             margin-left: -30px;
  769.             text-align: center;
  770.         }
  771.         .footer .nav .gotop
  772.         {
  773.             height: 27px;
  774.             line-height: 27px;
  775.             padding-right: 13px;
  776.             font-size: 16px;
  777.             background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAgCAMAAAA/gEgKAAAAk1BMVEU5e8I5e8I5e8I5e8I5e8M5e8I6fsc6fsc9hNA5fMM5fcU6fsc5fcU5fMM9hNA9hNA7gMo6fsc9hNA9hNA9hNA5fMM9hNA9hNA9hNA9hNA9hNA9hNA9hNA9hNA9hNA9hNA9hNA9hNA9hNA9hNA9hNA5e8M5fMQ5e8IAAAA5e8M5e8M5fMM5e8M7gcs8g885fMQ9hNB+ACi/AAAAKXRSTlP+/vz5/vvS0TXt4s3d8iArvM4cJzLxeFGOAUQ/LzM8OF46JF9h9Oz+AE3+iG8AAACWSURBVHja1dDJDoIwFIVhg0EFxZFBBQfG2AXlvv/TyaVY2ktJjDv/XfkW9HT2mugnyG2g2TlCA+MahNoANUJRAq0svrzVZQLOLDZC2P7zboAnx2s+RhBxMeBG4PpZwxIN0mGltVPAV59lfpKQWfrurIdjAHreVsAaaBsBB9YmP+Jhr+yQ0J3+HzgFpweXQrqosOWKAu0N1lV8/JSeNS8AAAAASUVORK5CYII=) no-repeat top right;
  778.             background-size: 12px 16px;
  779.             color: #3C83CF;
  780.         }
  781.         
  782.         /*新增加的*/
  783.         .fenlei li
  784.         {
  785.             float: left;
  786.             font-size: 18px;
  787.             margin-left: 26px;
  788.             padding-bottom: 6px;
  789.             box-sizing: border-box;
  790.             height: 29px;
  791.         }
  792.         .fenlei_click
  793.         {
  794.             border-bottom: rgb(130,188,208) 2px solid;
  795.             color: rgb(130,188,208);
  796.         }
  797.     </style>
  798. </head>
  799. <body>
  800.     <div class="header">
  801.         <div class="logo">
  802.         </div>
  803.     </div>
  804.     <div class="grid">
  805.         <ul>
  806.             <li class="icon_item">
  807.                 <p class="icon_link">
  808.                     <a href="http://latu.3g.cn/index.html">
  809.                         <img src="http://f.mrpcdn.com/down/b441eae3-5a05-47df-814e-647f627ef560/86x86.png">
  810.                     </a><span>美女辣图</span>
  811.                 </p>
  812.                 <p class="icon_link">
  813.                     <a href="http://www.qq.com">
  814.                         <img src="http://plugins.mrpcdn.com/down/54675916-5c8b-4a57-955b-7e24d479b889/93x93.png">
  815.                     </a><span>fanke fanke </span>
  816.                 </p>
  817.                 <p class="icon_link">
  818.                     <a href="http://172.16.3.208/mid_autumn_2013/index.html?code=123abc">
  819.                         <img src="http://plugins.mrpcdn.com/down/fb97ac5f-d143-4f34-8d53-4a959d490026/86x86.png">
  820.                     </a><span>中秋夜</span>
  821.                 </p>
  822.                 <p class="icon_link">
  823.                     <a href="http://swift.51mrp.com/urlMappingHandler?code=-183075846258&mpbrw_param_browserid=1000266">
  824.                         <img src="http://plugins.mrpcdn.com/down/ca3b4270-f11d-4b10-9cc6-45842f7f67fc/86x86.png">
  825.                     </a><span>赶集</span>
  826.                 </p>
  827.             </li>
  828.             <li class="icon_item">
  829.                 <p class="icon_link">
  830.                     <a href="http://ad2.easou.com:8080/j10ad/ea2.jsp?channel=11&cid=bicn3516_48810_D_1&key=">
  831.                         <img src="http://f.mrpcdn.com/down/12924c40-8392-4abf-94a7-f67ca22de222/86x86.png">
  832.                     </a><span>宜搜搜索</span>
  833.                 </p>
  834.                 <p class="icon_link">
  835.                     <a href="http://t.moonbasa.com/?type=0&cn=13960&adsiteid=10000007&other=unionid:skymobi%7Cadtype:1%7Cadid:999%7Cwaptype:1&guid=d9e72623a3b147d9a2e454623fda92c0">
  836.                         <img src="http://f.mrpcdn.com/down/8df941d7-041f-4ecb-a57d-80c5ae47d690/86x86.jpg">
  837.                     </a><span>性感危机</span>
  838.                 </p>
  839.                 <p class="icon_link">
  840.                     <a href="http://swift.51mrp.com/urlMappingHandler?code=1808537326美丽美丽&mpbrw_param_browserid=1000266">
  841.                         <img src="http://plugins.mrpcdn.com/down/d3a88c82-51eb-4ec4-a284-7bb09e6a53b8/170x170.png">
  842.                     </a><span>炎亚纶</span>
  843.                 </p>
  844.                 <p class="icon_link">
  845.                     <a href="http://172.16.3.208/grid/online-game.html">
  846.                         <img src="http://plugins.mrpcdn.com/down/ba99ad0a-e73e-4fc0-8928-f10c10278313/86x86.png">
  847.                     </a><span>爱购物</span>
  848.                 </p>
  849.             </li>
  850.             <li class="icon_item">
  851.                 <p class="icon_link">
  852.                     <a href="http://swift.51mrp.com/urlMappingHandler?code=1427964715534&mpbrw_param_browserid=1000266">
  853.                         <img src="http://plugins.mrpcdn.com/down/a0bbc1da-73d0-4a0e-a44c-2894e05a2756/240x166.png">
  854.                     </a><span>红花</span>
  855.                 </p>
  856.                 <p class="icon_link">
  857.                     <a href="http://swift.51mrp.com/urlMappingHandler?code=-183075846258&mpbrw_param_browserid=1000266">
  858.                         <img src="http://plugins.mrpcdn.com/down/ca3b4270-f11d-4b10-9cc6-45842f7f67fc/86x86.png">
  859.                     </a><span>赶集</span>
  860.                 </p>
  861.                 <p class="icon_link">
  862.                     <a href="#"><span></span></a>
  863.                 </p>
  864.                 <p class="icon_link">
  865.                     <a href="#"><span></span></a>
  866.                 </p>
  867.             </li>
  868.         </ul>
  869.     </div>
  870.     <div class="custom c1">
  871.         <div class="common-header">
  872.             <div class="title">
  873.                 <span>五仁月饼</span>
  874.             </div>
  875.         </div>
  876.         <div class="break-line">
  877.         </div>
  878.         <div class="textlink common-block">
  879.             <ul>
  880.                 <li><a href="http://swift.hzfeineng.com/urlMappingHandler?code=1401949555107">NO不酷</a>
  881.                     <a href="http://www.qq.com">美丽</a> <a href="http://172.16.3.208:8110/urlMappingHandler?code=1515903210">
  882.                         七夕</a> <a href="http://wap.ip138.com/sim.html">手机号</a> <a href="http://swift.51mrp.com/urlMappingHandler?code=-1686635499&mpbrw_param_browserid=1000266">
  883.                             QQ</a> </li>
  884.                 <li><a href="http://swift.51mrp.com/urlMappingHandler?code=-273045354&mpbrw_param_browserid=1000266">
  885.                     铁血</a> <a href="http://www.08060.com.cn/access/index.php?ht=2000202&ptype=1000">看书网</a>
  886.                     <a href="http://dp.sina.cn/dpool/tools/translate/texttranslate.php">翻译</a> <a href="http://w.sohu.com/t2">
  887.                         搜狐</a> <a href="http://wap.huanqiu.com/pd.html?id=23">环球</a> </li>
  888.                 <li><a href="http://3g.163.com/t">网易</a> <a href="http://dp.sina.cn/dpool/tools/citytraffic/index.php?">
  889.                     路况</a> <a href="http://wap.8684.cn/">公交</a> <a href="http://wap.yuanlai.com">缘来</a>
  890.                     <a href="http://wap.kuaidi100.com/">快递</a> </li>
  891.                 <li><a href="http://wap.ip138.com/sim.html">手机号</a> <a href="http://wap.pcpop.com/">
  892.                     泡泡</a> <a href="http://yy.ttpod.com/?">动听</a> <a href="http://map.baidu.com">地图</a>
  893.                     <a href="http://wap.huochepiao.com/">火车</a> </li>
  894.                 <li><a href="http://dp.sina.cn/dpool/tools/translate/texttranslate.php">翻译</a> <a
  895.                     href="http://live.sina.cn/dpool/sports/live/livelist.php">直播</a> <a href="http://m.360buy.com/">
  896.                         京东</a> <a href="http://m.letv.com/">乐视</a> <a href="http://wap.it168.com/">IT168</a>
  897.                 </li>
  898.                 <li><a href="http://wap.stockstar.com/rootnet/index3.aspx?t1=1212184018850y7a">证券</a>
  899.                     <a style="display: none;"></a><i style="border: none; display: table-cell;"></i>
  900.                     <i style="border: none; display: table-cell;"></i><i style="border: none; display: table-cell;">
  901.                     </i><i style="border: none; display: table-cell;"></i></li>
  902.             </ul>
  903.         </div>
  904.     </div>
  905.     <div class="ad83" name="ad" style="display: none;">
  906.     </div>
  907.     <div class="search">
  908.         <ul class="fenlei">
  909.             <li data-url="http://www.baidu.com" data-show="特价夏季连衣裙3">淘宝</li>
  910.             <li data-url="http://www.baidu.com" data-show="搜狗游戏1111">应用</li>
  911.             <li data-url="http://www.ssa.com" data-show="sbassasb">sbb</li>
  912.             <li data-url="http://www.as.com" data-show="asasasASaaa">ADAS</li>
  913.             <div style="clear: left;">
  914.             </div>
  915.         </ul>
  916.         <form method="get" action="http://m.yz.sm.cn/s?from=wm689351&q=" onsubmit="return search(this.getElementsByClassName(&#39;sbutton&#39;)[0]);">
  917.         <div class="sbox">
  918.             <div class="sinput">
  919.                 <input type="text" value="" name="word">
  920.             </div>
  921.             <div onclick="search(this);" class="sbutton">
  922.             </div>
  923.         </div>
  924.         </form>
  925.     </div>
  926.     <div class="search">
  927.         <ul class="fenlei">
  928.             <li data-url="http://www.baidu.com" data-show="特价夏季连衣裙3">淘宝</li>
  929.             <li data-url="http://www.baidu.com" data-show="搜狗游戏1111">应用</li>
  930.             <li data-url="http://www.ssa.com" data-show="sbassasb">sbb</li>
  931.             <li data-url="http://www.as.com" data-show="asasasASaaa">ADAS</li>
  932.             <div style="clear: left;">
  933.             </div>
  934.         </ul>
  935.         <form method="get" action="http://m.yz.sm.cn/s?from=wm689351&q=" onsubmit="return search(this.getElementsByClassName(&#39;sbutton&#39;)[0]);">
  936.         <div class="sbox">
  937.             <div class="sinput">
  938.                 <input type="text" value="" name="word">
  939.             </div>
  940.             <div onclick="search(this);" class="sbutton">
  941.             </div>
  942.         </div>
  943.         </form>
  944.     </div>
  945.     <div class="search">
  946.         <ul class="fenlei">
  947.             <li data-url="http://www.baidu.com" data-show="特价夏季连衣裙3">淘宝</li>
  948.             <li data-url="http://www.baidu.com" data-show="搜狗游戏1111">应用</li>
  949.             <li data-url="http://www.ssa.com" data-show="sbassasb">sbb</li>
  950.             <li data-url="http://www.as.com" data-show="asasasASaaa">ADAS</li>
  951.             <div style="clear: left;">
  952.             </div>
  953.         </ul>
  954.         <form method="get" action="http://m.yz.sm.cn/s?from=wm689351&q=" onsubmit="return search(this.getElementsByClassName(&#39;sbutton&#39;)[0]);">
  955.         <div class="sbox">
  956.             <div class="sinput">
  957.                 <input type="text" value="" name="word">
  958.             </div>
  959.             <div onclick="search(this);" class="sbutton">
  960.             </div>
  961.         </div>
  962.         </form>
  963.     </div>
  964.     <div class="footer">
  965.         <div class="nav">
  966.             <a href="javascript:void(0);" onclick="scrollTo(0,0)" class="gotop">回顶部</a>
  967.         </div>
  968.     </div>
  969.     <script type="text/javascript">        if (isAPNSupport()) bindAPNUrls();</script>
  970.     <script type="text/javascript">        window.Swipe = function (element, options) { if (!element) { return null } var _this = this; this.options = options || {}; this.index = this.options.startSlide || 0; this.speed = this.options.speed || 300; this.callback = this.options.callback || function () { }; this.delay = this.options.auto || 0; this.container = element; this.element = this.container.children[0]; this.container.style.overflow = "hidden"; this.element.style.listStyle = "none"; this.setup(); this.begin(); if (this.element.addEventListener) { this.element.addEventListener("touchstart", this, false); this.element.addEventListener("touchmove", this, false); this.element.addEventListener("touchend", this, false); this.element.addEventListener("webkitTransitionEnd", this, false); window.addEventListener("resize", this, false) } }; Swipe.prototype = { setup: function () { this.slides = this.element.children; this.length = this.slides.length; if (this.length < 2) { return null } this.width = this.container.getBoundingClientRect().width; if (!this.width) { return null } this.container.style.visibility = "hidden"; this.element.style.width = (this.slides.length * this.width) + "px"; var index = this.slides.length; while (index--) { var el = this.slides[index]; el.style.width = this.width + "px"; el.style.display = "table-cell"; el.style.verticalAlign = "top" } this.slide(this.index, 0); this.container.style.visibility = "visible" }, slide: function (index, duration) { var style = this.element.style; style.webkitTransitionDuration = duration + "ms"; style.webkitTransform = "translate3d(" + -(index * this.width) + "px,0,0)"; this.index = index }, begin: function () { var _this = this; _this.isTouch = false; setInterval(function () { if (!_this.isTouch) { if (_this.index < _this.length - 1) { _this.slide(_this.index + 1, _this.speed) } else { _this.slide(0, _this.speed) } } }, _this.delay) }, handleEvent: function (e) { switch (e.type) { case "touchstart": this.onTouchStart(e); break; case "touchmove": this.onTouchMove(e); break; case "touchend": this.onTouchEnd(e); break; case "webkitTransitionEnd": this.transitionEnd(e); break; case "resize": this.setup(); break } }, transitionEnd: function (e) { this.callback(this.index) }, onTouchStart: function (e) { this.start = { pageX: e.touches[0].pageX, pageY: e.touches[0].pageY, time: Number(new Date()) }; this.isScrolling = undefined; this.isTouch = true; this.deltaX = 0; this.element.style.webkitTransitionDuration = 0 }, onTouchMove: function (e) { if (e.touches.length > 1 || e.scale && e.scale !== 1) { return } this.deltaX = e.touches[0].pageX - this.start.pageX; if (typeof this.isScrolling == "undefined") { this.isScrolling = !!(this.isScrolling || Math.abs(this.deltaX) < Math.abs(e.touches[0].pageY - this.start.pageY)) } if (!this.isScrolling) { e.preventDefault(); this.deltaX = this.deltaX / ((!this.index && this.deltaX > 0 || this.index == this.length - 1 && this.deltaX < 0) ? (Math.abs(this.deltaX) / this.width + 1) : 1); this.element.style.webkitTransform = "translate3d(" + (this.deltaX - this.index * this.width) + "px,0,0)" } }, onTouchEnd: function (e) { this.isTouch = false; var isValidSlide = Number(new Date()) - this.start.time < 250 && Math.abs(this.deltaX) > 20 || Math.abs(this.deltaX) > (this.width / 2), isPastBounds = !this.index && this.deltaX > 0 || this.index == this.length - 1 && this.deltaX < 0; if (!this.isScrolling) { this.slide(this.index + (isValidSlide && !isPastBounds ? (this.deltaX < 0 ? 1 : -1) : 0), this.speed) } } };</script>
  971.     <script type="text/javascript">
  972.         /*APN切换*/
  973.         function isAPNSupport() {
  974.             var ext = window.mopontv;
  975.             return ext != undefined && ext.isAPNSelectionSupport();
  976.         }
  977.         // Local Storage 扩展
  978.         if (localStorage) {
  979.             Storage.prototype.getObject = function (key) {
  980.                 try {
  981.                     var s = localStorage.getItem(key);
  982.                     return JSON.parse(s);
  983.                 } catch (e) {
  984.                     console.error(e);
  985.                 }
  986.                 return null;
  987.             };
  988.             Storage.prototype.setObject = function (key, obj) {
  989.                 var s = JSON.stringify(obj)
  990.                 return localStorage.setItem(key, s);
  991.             };
  992.         }
  993.         var N = function () {
  994.             this.init();
  995.         };
  996.         //基础配置
  997.         N.conf = {
  998.             HOST: "http://172.16.3.208/advert",
  999.             DEFAULT_RETRY_TIMES: 300000,
  1000.             version: 20150605183738
  1001.         }
  1002.         //广告请求json对象
  1003.         N.param = {
  1004.             optype: "advert",
  1005.             tag: "SDFQ34RKL",
  1006.             browserid: 1000266,
  1007.             advids: "83",
  1008.             version: 1
  1009.         }
  1010.         N.prototype = {
  1011.             init: function () {
  1012.                 var st_objs = this.cls('scroll-text');
  1013.                 this.removeBorder();
  1014.                 for (var i = 0; i < st_objs.length; i++) {
  1015.                     this.slide(st_objs[i]);
  1016.                 };
  1017.                 this.fillAds();
  1018.                 //隐藏地址栏(全屏)
  1019.                 window.scrollTo(0, 1);
  1020.             },
  1021.             id: function (b) {
  1022.                 return document.getElementById(b)
  1023.             },
  1024.             tag: function (b, c) {
  1025.                 return [].slice.call((c || document).getElementsByTagName(b) || [], 0)
  1026.             },
  1027.             cls: function (b, c) {
  1028.                 return [].slice.call((c || document).getElementsByClassName(b) || [], 0)
  1029.             },
  1030.             removeBorder: function () {
  1031.                 var t_objs = this.cls('custom');
  1032.                 for (var i = 0; i < t_objs.length; i++) {
  1033.                     if (!this.hasClass(t_objs[i].nextElementSibling, "custom")) {
  1034.                         t_objs[i].style.borderBottom = "none";
  1035.                     }
  1036.                 }
  1037.             },
  1038.             hasClass: function (elem, className) {
  1039.                 return !!elem.className && (' ' + elem.className + ' ').indexOf(' ' + className + ' ') > -1;
  1040.             },
  1041.             showAds: function (obj) {
  1042.                 if (obj.code !== 200 || obj.tag !== N.param.tag) return;
  1043.                 //判断是否匹配到广告
  1044.                 var c = obj.adblocks;
  1045.                 if (undefined == c || 0 == c.length) return;
  1046.                 //向页面写入广告
  1047.                 this.addAds(c);
  1048.                 //存储广告json对象
  1049.                 obj.version = N.conf.version;
  1050.                 obj.lastModified = new Date().getTime();
  1051.                 localStorage.setObject("ads.data", obj);
  1052.             },
  1053.             fillAds: function () {
  1054.                 //判断页面是否有广告
  1055.                 if (!document.getElementsByName("ad").length) return;
  1056.                 //判断是否断网
  1057.                 if (!navigator.onLine) return;
  1058.                 //判断是否加载本地存储
  1059.                 var cache = localStorage.getObject("ads.data");
  1060.                 if (cache) {
  1061.                     if (N.conf.version === cache.version) {
  1062.                         var lt = new Date().getTime() - cache.lastModified,
  1063.                 expire = cache.expire - 0;
  1064.                         if (lt >= 0 && lt < expire) {
  1065.                             this.addAds(cache.adblocks);
  1066.                             return;
  1067.                         }
  1068.                     }
  1069.                 }
  1070.                 //本地存储无效，异步请求广告内容
  1071.                 this.updateAdAsync();
  1072.             },
  1073.             updateAdAsync: function () {
  1074.                 var t = this;
  1075.                 // Trying to load data from AJAX.
  1076.                 var xhr = new XMLHttpRequest();
  1077.                 xhr.onreadystatechange = function () {
  1078.                     if (XMLHttpRequest.DONE == xhr.readyState) {
  1079.                         if (200 == xhr.status) {
  1080.                             var json = xhr.responseText;
  1081.                             t.showAds(JSON.parse(json));
  1082.                         }
  1083.                     }
  1084.                 };
  1085.                 xhr.onerror = function (e) {
  1086.                     xhr.abort();
  1087.                 };
  1088.                 var url = N.conf.HOST;
  1089.                 xhr.open("POST", url, true);
  1090.                 xhr.send(JSON.stringify(N.param));
  1091.             },
  1092.             addAds: function (c) {
  1093.                 var t = this;
  1094.                 if (undefined == c || 0 == c.length) {
  1095.                     return;
  1096.                 }
  1097.                 for (i in c) {
  1098.                     var adid = c[i].adblockid;
  1099.                     if (adid == 0) {
  1100.                         continue;
  1101.                     }
  1102.                     var ads = c[i].content;
  1103.                     if (undefined == ads || 0 == ads.length) {
  1104.                         continue;
  1105.                     }
  1106.                     var type = c[i].type;
  1107.                     var pAds = t.cls("ad" + adid);
  1108.                     if (pAds.length) {
  1109.                         for (j in pAds) {
  1110.                             if (t.tag("div", pAds[j]).length) {
  1111.                                 break;
  1112.                             }
  1113.                             t.buildAd(ads, pAds[j], type);
  1114.                         }
  1115.                     }
  1116.                 }
  1117.             },
  1118.             buildAd: function (ads, node, type) {
  1119.                 if (type == 1) {
  1120.                     node.className = "imgad";
  1121.                     for (i in ads) {
  1122.                         var ad = ads[i];
  1123.                         if (ad.image == "" || ad.href == "") {
  1124.                             continue;
  1125.                         }
  1126.                         var a = document.createElement("a");
  1127.                         a.href = ad.href;
  1128.                         var img = document.createElement("img");
  1129.                         img.src = ad.image;
  1130.                         a.appendChild(img);
  1131.                         var div = document.createElement("div");
  1132.                         if (i - 0) div.style.display = "none";
  1133.                         div.appendChild(a);
  1134.                         node.appendChild(div);
  1135.                     }
  1136.  
  1137.  
  1138.                 } else {
  1139.                     node.className = "textad";
  1140.                     for (i in ads) {
  1141.                         var ad = ads[i];
  1142.                         if (ad.href == "" || ad.text == "") {
  1143.                             continue;
  1144.                         }
  1145.                         var a = document.createElement("a");
  1146.                         a.href = ad.href;
  1147.                         if (ad.color) a.style.color = ad.color;
  1148.                         a.innerHTML = ad.text;
  1149.                         var div = document.createElement("div");
  1150.                         if (i - 0) div.style.display = "none";
  1151.                         div.appendChild(a);
  1152.                         node.appendChild(div);
  1153.                     }
  1154.                 }
  1155.                 this.moveToNext(node);
  1156.                 node.style.display = "";
  1157.                 //广告链接绑定APN切换
  1158.                 if (isAPNSupport()) bindAPNUrls(node);
  1159.             },
  1160.             moveToNext: function (obj) {
  1161.                 var divs = this.tag('div', obj);
  1162.                 var len = divs.length;
  1163.                 if (len == 1) {
  1164.                     return;
  1165.                 }
  1166.                 var num = 1;
  1167.                 setInterval(function () {
  1168.                     divs[num == 0 ? len - 1 : num - 1].style.display = "none";
  1169.                     divs[num].style.display = "block";
  1170.                     num++;
  1171.                     if (num > len - 1) {
  1172.                         num = 0;
  1173.                     }
  1174.                 }, 6E3);
  1175.             },
  1176.             slide: function (obj) {
  1177.                 var bullets = this.tag("li", this.cls("scroll-control", obj)[0]);
  1178.                 new Swipe(obj, {
  1179.                     speed: 400,
  1180.                     auto: 6E3,
  1181.                     callback: function (pos) {
  1182.                         var i = bullets.length;
  1183.                         while (i--) {
  1184.                             bullets[i].className = ' ';
  1185.                         }
  1186.                         bullets[pos].className = 'active';
  1187.                     }
  1188.                 });
  1189.             }
  1190.         }
  1191.         window.addEventListener("load", function () {
  1192.             new N();
  1193.         }, !1);
  1194.     </script>
  1195.     <script>
  1196.         var _hmt = _hmt || [];
  1197.         (function () {
  1198.             var hm = document.createElement("script");
  1199.             // hm.src = "//hm.baidu.com/hm.js?ac1a596afeee80b9b26eeff564969ede";
  1200.             var s = document.getElementsByTagName("script")[0];
  1201.             s.parentNode.insertBefore(hm, s);
  1202.         })();
  1203.     </script>
  1204.     <script type="text/javascript">        var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cdiv id='cnzz_stat_icon_1000006857'%3E%3C/div%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/q_stat.php%3Fid%3D1000006857' type='text/javascript'%3E%3C/script%3E"));</script>
  1205. </body>
  1206.  
  1207. </html>
  1208.  
  1209.  
  1210.  
  1211.  
  1212.  
  1213. 代码是结合实例做的， 核心的思想是，   在javascript原生代码中   循环绑定事件，一般都是会有 闭包+变量升级的问题。   事件的冒泡和继承是javascript 核心， 此处应用于委托就是  因为ul 中li的事件冒泡机制，在闭包中失效。委托是一种另类的继承，在闭包中是允许的。  冒泡的机制在闭包中也是允许的但是必须是显示的声明，就是ul
  1214.  
  1215.   li  都要绑定同类型的事件。   我是一个javascript 初学者，也是一个原生javascript的爱好研究者，理论不强，有不对的地方请 发意见到 1015003209. 求给我大神给我指点。
  1216.  
  1217.  
  1218.  
  1219.  
  1220.

 

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/145613
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号