jquery模拟今日头条（选项卡）

来源：互联网发布：mac如何用搜狗输入法编辑：程序博客网时间：2024/05/16 13:48
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>测试</title><style>*{margin: 0;padding: 0;}.body{height: 564px;overflow:hidden;position:absolute;}.body_d{width: 415px;height: 100%;margin: 0 auto;position:relative;background-color: #fff;}.top{width: 100%;height: 44px;background-color:rgb(44,154,89);}i{display:inline-block;}.top>i{width: 19px;height: 19px;background: url(page.png) -453px -42px;position:absolute;top:10px;left:380px;}.nav{height: 37px;width: 100%;background-color: #f6f6f6;font-size: 0;overflow:hidden;position:relative;}.na{font-size: 17px;color:rgb(80,80,80);text-decoration: none;line-height: 37px;margin-left: 16px;margin-right: 10px;}.active{color:rgb(110,178,234);}.undline{width: 54px;height: 2px;background-color:rgb(110,178,234) ;position:absolute;top:33px;left:6px;transition:all .3s linear;transform:translateX(0px);}.nei{height: 483px;padding: 0 15px;}.mk{display:none;}.k{margin-top: 17px;padding-bottom: 17px;border-bottom: 1px solid rgb(246,246,246);font-size: 14px;line-height: 20px;}a{color:#000;text-decoration: none;}.k>img{margin-top: 5px;width: 124px;height: 74px;margin-right: 2px;}.k>span{font-size: 9px;line-height: 9px;color:rgb(167,167,167);}</style><script src="jquery.js"></script><script src="move1.js"></script><script>$(function(){var data =[    [{        "author":"海外网",        "comment_num":"20",        "send_time":"1500858000000",        "title":"细数《权力的游戏》中的经典台词，每一句都震撼人心",        "url":"https://m.toutiao.com/i6437322602192044545",        "photo":[                    "http://p1.pstatp.com/list/2c2f0004f8d91f4d38ba",                    "http://p3.pstatp.com/list/2c250003164f3746ae05",                    "http://p1.pstatp.com/list/2c2e0002b7cd139a76ec"                    ]      },      {        "author":"字媒体",        "comment_num":"14",        "send_time":"1500849000000",        "title":"舅服你！那些把人笑趴下的广告牌错字！",        "url":"https://m.toutiao.com/i6445046131561857550/",        "photo":[                    "https://p3.pstatp.com/list/2ee200043dec783c4c0c",                    "https://p3.pstatp.com/list/2ed800043d616e3b1cd2",                    "https://p3.pstatp.com/list/2ee200043deff20ca1bd"                    ]      },      {        "author":"字媒体",        "comment_num":"25",        "send_time":"1500829000000",        "title":"风景图集：杜马盖地风景美图",        "url":"https://m.toutiao.com/i6436569816970035714",        "photo":[                    "https://p3.pstatp.com/list/2a440002d0f868114798",                    "https://p3.pstatp.com/list/2c2f00007e03929848b3",                    "https://p3.pstatp.com/list/2a4500042d203e5a8298"                    ]      }    ],    [{        "author":"趣图天下",        "comment_num":"82",        "send_time":"1500852600000",        "title":"全球有趣的国界线 最后一个尴尬了！",        "url":"https://m.toutiao.com/i6445037085408625165",        "photo":[                    "https://p3.pstatp.com/list/2c62000074b8783600df",                    "https://p3.pstatp.com/list/2c680011dc37fbb6ff41",                    "https://p3.pstatp.com/list/2c610011d53340e1b45a"                    ]      },      {        "author":"趣图天下",        "comment_num":"20",        "send_time":"1500820200000",        "title":"全国各地这么热，降暑我只服王凯，杨紫发的图也是很绝",        "url":"https://m.toutiao.com/i6445073656933515790",        "photo":[                    "https://p3.pstatp.com/list/2c61001222c8ecbe80a0",                    "https://p3.pstatp.com/list/2c6f0016a6d05aa97618",                    "https://p3.pstatp.com/list/2c6f0016a6be7a6ca512"                    ]      }],    [{        "author":"海外网",        "comment_num":"804",        "send_time":"1500859440000",        "title":"41岁赵薇360亿身家，究竟有多少是来自马云？",        "url":"https://m.toutiao.com/i6444774085598642702",        "photo":[                    "https://p3.pstatp.com/list/16ab000356fe275cf157",                    "https://p3.pstatp.com/list/17820009b04987f9350b",                    "https://p3.pstatp.com/list/191b0004697278772e40"                    ]      },      {        "author":"星言星语",        "comment_num":"1245",        "send_time":"1500837300000",        "title":"小黄车万众瞩目的公主车终于来了，还没下载过的都在抢",        "url":"http://www.toutiaopage.com/tetris/page/64000160679",        "photo":[                    "https://p3.pstatp.com/list/2c5b000e6c5ee96ad31b",                    "https://p3.pstatp.com/list/2e6f0001f2e9123a5984",                    "https://p3.pstatp.com/list/2c5b000e6cc55066125d"                    ]      }]]var time=new Date();var hs=Date.parse(time); for(var i=0;i<data.length;i++){ for(var j=0;j<data[i].length;j++){ var a=".mk"+i+">.k"; var ab=$("<a></a>").text(data[i][j].title).attr("href",data[i][j].url)var h3=$("<h3></h3>").append(ab); $(a).eq(j).append(h3); for(var m=0;m<3;m++){ var img=$("<img>").attr("src",data[i][j].photo[m]); $(a).eq(j).append(img); } var str=data[i][j].author+" 评论 "+data[i][j].comment_num+' '+sj(data[i][j].send_time); var span=$("<span></span>").text(str); $(a).eq(j).append(span);  } } $(".mk").eq(0).show(0); $(".na").click(function(){ $(this).addClass("active").siblings().removeClass("active"); $(".mk").eq($(this).index()).show(0).siblings().hide(0); var num="translateX("+$(this).index()*60+"px)"; $(".undline").css("transform",num); })move($(".body")[0]);function sj(timer){var time=hs-Number(timer);var fen=Math.floor(time/1000/60)%60;var shi=Math.floor(time/1000/60/60)%24;var tian=Math.floor(time/1000/60/60/24);var str='';if(tian!=0){str=tian+'天前';}else if(shi!=0){str=shi+'小时前';}else if(fen!=0){str=fen+'分钟前';}return str;}})</script></head><body bgcolor="#f6f6f6"><div class="body"><div class="body_d"><div class="top"><i></i></div><div class="nav"><a href="javascript:;" class="na active">新闻</a><a href="javascript:;" class="na">教程</a><a href="javascript:;" class="na">娱乐</a><div class="undline"></div></div><div class="nei"><div class="mk mk0"><div class="k"></div><div class="k"></div><div class="k"></div></div><div class="mk mk1"><div class="k"></div><div class="k"></div></div><div class="mk mk2"><div class="k"></div><div class="k"></div></div></div></div></div></body></html>
阅读全文
0 0