仿360新闻的热搜图片，win8风格随机九宫格布局

360新闻地址：http://sh.qihoo.com/i/

感觉这效果挺好的，随机九宫格，在不少地方可以用到，就研究了下他的源码，基本原理就是预先定义好几种布局模块，然后根据需要进行拼接，具体代码可以看下面的，复制下运行看效果吧。

源码打包下载地址：http://download.csdn.net/detail/sweetsuzyhyf/7107063

代码在这里：

[html] view plain copy

print?

  1. <html>
  2. <head>
  3. <title>win8九宫格随机布局</title>
  4. <style>
  5. #bd_toptab {
  6. width: 980px;
  7. margin: 0 auto;
  8. height: 256px;
  9. position: relative;
  10. }
  11. #bd_toptab .tabwrap {
  12. height: 234px;
  13. overflow: hidden;
  14. position: relative;
  15. width: 980px;
  16. }
  17. #bd_toptab .refresh {
  18. cursor: pointer;
  19. height: 38px;
  20. position: absolute;
  21. right: 0;
  22. top: 0;
  23. z-index: 1;
  24. width: 37px;
  25. background-color: green;
  26. }
  27. #bd_toptab .tabblock {
  28. background: #fff;
  29. height: 234px;
  30. overflow: hidden;
  31. position: absolute;
  32. width: 980px;
  33. }
  34. #bd_hot {
  35. position: relative;
  36. width: 980px;
  37. }
  38. #bd_hotimg .refresh:hover, #bd_hot .refresh:hover {
  39. background-position: -40px -200px;
  40. }
  41. #bd_hot .hot_wrap {
  42. height: 234px;
  43. position: relative;
  44. }
  45. #bd_hot .box {
  46. background: #ccc;
  47. color: #fff;
  48. overflow: hidden;
  49. position: absolute;
  50. text-align: center;
  51. }
  52. #bd_hot .box img {
  53. height: 100%;
  54. width: 100%;
  55. }
  56. #bd_hot .box a {
  57. color: #fff;
  58. display: block;
  59. height: 100%;
  60. text-decoration: none;
  61. overflow: hidden;
  62. width: 100%;
  63. }
  64. #bd_hot .box .main_title {
  65. cursor: pointer;
  66. display: inline-block;
  67. font-family: ‘Microsoft Yahei‘;
  68. padding: 0 10px;
  69. }
  70. #bd_hot .box .sub_title {
  71. color: #ccc;
  72. }
  73. #bd_hot .box div {
  74. background: rgba(0,0,0,.8);
  75. bottom: 0;
  76. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc000000,endColorstr=#cc000000) \9 height:100%;
  77. left: 0;
  78. position: absolute;
  79. width: 100%;
  80. height: 0;
  81. }
  82. #bd_hot .box div p {
  83. cursor: pointer;
  84. font-size: 12px;
  85. font-weight: 400;
  86. line-height: 18px;
  87. text-align: left;
  88. padding: 0 8px;
  89. }
  90. #bd_hot .box p strong {
  91. display: block;
  92. padding-bottom: 5px;
  93. }
  94. #bd_hot .box .tp_11 {
  95. font-size: 16px;
  96. }
  97. #bd_hot .box .tp_12 {
  98. font-size: 18px;
  99. }
  100. #bd_hot .box .tp_21 {
  101. font-size: 18px;
  102. }
  103. #bd_hot .box .tp_22 {
  104. font-size: 22px;
  105. }
  106. </style>
  107. </head>
  108. <body>
  109. <div id="bd_toptab">
  110. <div class="refresh">点击刷新</div>
  111. <div class="tabblock" id="tabblock"></div>
  112. </div>
  113. <script src="jquery-1.9.1.min.js"></script>
  114. <script>
  115. var tpl = [[{ size: [1, 1], pos: [0, 0] }, { size: [1, 1], pos: [1, 0] }, { size: [2, 2], pos: [0, 1] }], [{ size: [2, 2], pos: [0, 0] }, { size: [1, 1], pos: [0, 2] }, { size: [1, 1], pos: [1, 2] }], [{ size: [1, 1], pos: [0, 0] }, { size: [1, 1], pos: [1, 0] }, { size: [1, 2], pos: [0, 1] }, { size: [1, 1], pos: [1, 1] }, { size: [1, 1], pos: [1, 2] }], [{ size: [1, 1], pos: [0, 0] }, { size: [1, 1], pos: [1, 0] }, { size: [1, 1], pos: [0, 1] }, { size: [1, 1], pos: [0, 2] }, { size: [1, 2], pos: [1, 1] }], [{ size: [1, 2], pos: [0, 0] }, { size: [1, 1], pos: [1, 0] }, { size: [1, 1], pos: [1, 1] }, { size: [1, 1], pos: [0, 2] }, { size: [1, 1], pos: [1, 2] }], [{ size: [1, 1], pos: [0, 0] }, { size: [1, 1], pos: [0, 1] }, { size: [1, 2], pos: [1, 0] }, { size: [1, 1], pos: [0, 2] }, { size: [1, 1], pos: [1, 2] }], [{ size: [2, 1], pos: [0, 0] }, { size: [1, 1], pos: [0, 1] }, { size: [1, 1], pos: [1, 1] }, { size: [1, 1], pos: [0, 2] }, { size: [1, 1], pos: [1, 2] }], [{ size: [1, 1], pos: [0, 0] }, { size: [1, 1], pos: [1, 0] }, { size: [2, 1], pos: [0, 1] }, { size: [1, 1], pos: [0, 2] }, { size: [1, 1], pos: [1, 2] }], [{ size: [1, 1], pos: [0, 0] }, { size: [1, 1], pos: [1, 0] }, { size: [1, 1], pos: [0, 1] }, { size: [1, 1], pos: [1, 1] }, { size: [2, 1], pos: [0, 2] }]];
  116. var colors = ["#6e89a0", "#3e6181", "#f19b83", "#f3ab97", "#6696c1"];
  117. var data = [
  118. {
  119. "id": "12281",
  120. "title": "传刘德华加盟好声音",
  121. "ltitle": "传刘德华加盟好声音 收3千万顶替哈林",
  122. "url": "",
  123. "img": "http://p1.qhimg.com/dr/93_93_/t01626c454c447b2ec9.jpg?size=550x252"
  124. },
  125. {
  126. "id": "11886",
  127. "title": "麻花春晚小品再被毙",
  128. "ltitle": "开心麻花小品被毙 李敏镐现身春晚彩排现场",
  129. "url": "#",
  130. "img": ""
  131. },
  132. {
  133. "id": "12275",
  134. "title": "邓紫棋身价飙升25倍",
  135. "ltitle": "《我是歌手2》邓紫棋连夺两冠身价飙升25倍",
  136. "url": "",
  137. "img": "http://p3.qhimg.com/dr/93_93_/t018e3d49ab6025f006.jpg?size=550x380"
  138. },
  139. {
  140. "id": "12211",
  141. "title": "李娜表态不上春晚",
  142. "ltitle": "李娜表态坚决不会上春晚:冯小刚call我就关机",
  143. "url": "",
  144. "img": ""
  145. },
  146. {
  147. "id": "12276",
  148. "title": "第56届格莱美颁奖礼",
  149. "ltitle": "第56届格莱美颁奖礼落幕 电音入室显革新",
  150. "url": "",
  151. "img": "http://p4.qhimg.com/dr/93_93_/t01f028185fe6b09e79.jpg?size=600x374"
  152. },
  153. {
  154. "id": "12264",
  155. "title": "男子误点下跪求上车",
  156. "ltitle": "男子乘火车误点 向车站人员下跪求上车",
  157. "url": "",
  158. "img": ""
  159. },
  160. {
  161. "id": "12263",
  162. "title": "新华网发玉兔日记",
  163. "ltitle": "新华网发“玉兔”日记：可能熬不过这个月夜了",
  164. "url": "",
  165. "img": ""
  166. },
  167. {
  168. "id": "12119",
  169. "title": "杀医案被告获死刑",
  170. "ltitle": "温岭杀医案被告人获死刑 被认定有完全刑事责任能力",
  171. "url": "",
  172. "img": "http://p4.qhimg.com/dr/93_93_/t0147aa8f01295c6a20.jpg?size=400x264"
  173. },
  174. {
  175. "id": "12268",
  176. "title": "瑞典世界最古老树木",
  177. "ltitle": "瑞典发现世界最古老树木：活了9500岁 仍在生长",
  178. "url": "",
  179. "img": "http://p6.qhimg.com/dr/93_93_/t016c4c90a96bf75756.jpg?size=950x635"
  180. },
  181. {
  182. "id": "11074",
  183. "title": "中国失独家庭超百万",
  184. "ltitle": "中国失独家庭已超百万 每年约增长7.6万个",
  185. "url": "",
  186. "img": ""
  187. },
  188. {
  189. "id": "12273",
  190. "title": "巴西民众抵制世界杯",
  191. "ltitle": "再现打砸抢！巴西上千民众抵制世界杯",
  192. "url": "",
  193. "img": "http://p0.qhimg.com/dr/93_93_/t01f07017f6636f0ca4.jpg?size=845x566"
  194. },
  195. {
  196. "id": "12269",
  197. "title": "罗德曼因送大礼被查",
  198. "ltitle": "罗德曼送金正恩夫妇奢华大礼遭调查 超1万美元",
  199. "url": "",
  200. "img": "http://p7.qhimg.com/dr/93_93_/t01f9191af27087271b.jpg?size=550x309"
  201. },
  202. {
  203. "id": "12262",
  204. "title": "高富帅卖保时捷被埋",
  205. "ltitle": "高富帅网卖300万保时捷 被神秘买家电击后活埋",
  206. "url": "",
  207. "img": ""
  208. },
  209. {
  210. "id": "12266",
  211. "title": "斯诺登称将不再泄密",
  212. "ltitle": "斯诺登：不会也没有能力继续泄密",
  213. "url": "",
  214. "img": "http://p4.qhimg.com/dr/93_93_/t0110ee3195d656a495.jpg?size=460x276"
  215. },
  216. {
  217. "id": "12261",
  218. "title": "深圳车牌拍卖新高",
  219. "ltitle": "深圳车牌靓号拍卖新高:粤B8888R拍出172万",
  220. "url": "",
  221. "img": "http://p1.qhimg.com/dr/93_93_/t012bf84b38ad056a4f.jpg?size=550x372"
  222. },
  223. {
  224. "id": "12260",
  225. "title": "员工创业可停薪留职",
  226. "ltitle": "江西规定国企员工创业可停薪留职三年惹争议",
  227. "url": "",
  228. "img": ""
  229. },
  230. {
  231. "id": "12005",
  232. "title": "H7N9不排除人传人",
  233. "ltitle": "卫计委：H7N9不排除有限的非持续人传人",
  234. "url": "",
  235. "img": "http://p9.qhimg.com/dr/93_93_/t01bff3e08df1870ab1.jpg"
  236. },
  237. {
  238. "id": "12259",
  239. "title": "多省医保收不抵支",
  240. "ltitle": "人社部：多省医保当期收不抵支",
  241. "url": "",
  242. "img": "http://p5.qhimg.com/dr/93_93_/t013f2464192e661f46.jpg?size=298x400"
  243. },
  244. {
  245. "id": "12005",
  246. "title": "H7N9不排除人传人",
  247. "ltitle": "卫计委：H7N9不排除有限的非持续人传人",
  248. "url": "",
  249. "img": "http://p9.qhimg.com/dr/93_93_/t01bff3e08df1870ab1.jpg"
  250. },
  251. {
  252. "id": "12259",
  253. "title": "多省医保收不抵支",
  254. "ltitle": "人社部：多省医保当期收不抵支",
  255. "url": "",
  256. "img": "http://p5.qhimg.com/dr/93_93_/t013f2464192e661f46.jpg?size=298x400"
  257. }
  258. ];
  259. $("#bd_toptab .refresh").click(function () {
  260. $("#tabblock").empty();
  261. tpl.sort(function () { return 0.5 - Math.random() });
  262. data.sort(function () { return 0.5 - Math.random() });
  263. var html = ‘<div id="bd_hot">‘, count = 0, l = t = w = h = 0, s = 4;
  264. for (var i = 0; i < 4; i++) {
  265. for (var k = 0; k < tpl[i].length; k++) {
  266. if (count >= data.length) {
  267. break;
  268. }
  269. var item = tpl[i][k];
  270. w = item.size[0] == 1 ? 119 : 242;
  271. h = item.size[1] == 1 ? 75 : 154;
  272. l = item.pos[0] == 0 ? 246 * i : 246 * i + 123;
  273. if (item.pos[1] == 0) {
  274. t = 0;
  275. } else if (item.pos[1] == 1) {
  276. t = 79;
  277. } else {
  278. t = 158;
  279. }
  280. item = data[count];
  281. html += ‘<div class="box" style="width:‘ + w + ‘px;height:‘ + h + ‘px;top:‘ + t + ‘px;left:‘ + l + ‘px;background-color:‘ + colors.sort(function () { return 0.5 - Math.random() })[0] + ‘"><a href="‘ + item.url + ‘" target="_blank" class="img tp_12">‘;
  282. if (item.img) {
  283. html += ‘<img src="‘ + item.img + ‘" />‘;
  284. }
  285. html += ‘<span class="main_title">‘ + item.title + ‘</span><div><p><strong>‘ + item.title + ‘</strong><span class="sub_title">‘ + item.ltitle + ‘</span></p></div></a></div>‘;
  286. count++;
  287. }
  288. }
  289. html += ‘</div>‘;
  290. $("#tabblock").html(html);
  291. $(‘#tabblock .box‘).each(function () {
  292. var _this = $(this), _title = _this.find(‘.main_title‘), _p = _this.find(‘p‘), h = _this.height();
  293. _title.css(‘padding-top‘, (h - _title.height()) / 2 + ‘px‘);
  294. _p.css(‘padding-top‘, (h - _p.height()) / 2 + ‘px‘);
  295. _this.hover(function () {
  296. _this.find(‘div‘).animate({ height: ‘100%‘ }, 300);
  297. }, function () {
  298. _this.find(‘div‘).animate({ height: ‘0‘ }, 300);
  299. });
  300. });
  301. }).click();
  302. </script>
  303. </body>
  304. </html>
时间： 2024-10-19 18:38:46

仿360新闻的热搜图片，win8风格随机九宫格布局的相关文章

常用的jQuery九宫格布局图片展示特效代码

jquery九宫格布局图片鼠标经过遮罩显示文字效果 jQuery图片九宫格布局鼠标悬停显示文字效果代码 jquery九宫格图片制作鼠标悬停图片滑动展示特效 jquery仿qq图片九宫格布局点击按钮图片换一换效果代码 jQuery响应式图片九宫格布局点击图片查看大图效果代码 jquery hover事件鼠标悬停九宫格图片高亮显示代码 jQuery百度新闻文字列表九宫格布局鼠标悬停文字滑动效果代码 jquery hover九宫格图片鼠标悬停上下滑动图片切换显示代码 jquery win8风格九宫格布

CSS3实战开发：百度新闻热搜词特效实战开发

各位网友,今天这篇文章,我将手把手带领大家开发百度新闻首页的"新闻热搜词"特效.在这个特效中应用的知识点都很基础,如果你对这些还不清楚,可以关注我以前写的详细教程.今天讲这个案例,也是希望告诉大家,在开发一个特效的时候,请不要将问题复杂化.可能有些人一开始真的不知道从哪下手,当你看完本次教程,你定会觉得,原来一切都这么简单. 可能有些人还不知道这个特效,啥也不说了,直接上效果图: 从上面的特效中,大家不难发现,当鼠标划过热搜词时,会有一个半透明的黑色背景滑上来,而且这个黑色区域中也是有

基于jquery仿360网站图片选项卡切换代码

今天给大家分享一款基于jquery仿360网站图片选项卡切换代码.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="slides"> <div class="in widget-slide" data-jss="tabSelector : '.slide-nav li', viewSe

关于仿网易新闻中详细页图文混排功能的实现

最近在了解关于新闻内容的图文混排的效果,网上有人开源一个仿网易新闻的代码,本文就是简单记录学习其详细页面显示的效果实现: 下载地址:https://github.com/dsxNiubility/SXNews 效果图: 其原理:通过网络请求获得相关的信息,再通过手机端进行拼HTML,然后在WebView进行展示,此处还对文章中的图片增加点击效果,可以保存到相册中:文章的样式已经存在项目中,直接去调用: 1:首先了解两个相关的实体对象,一个是新闻的主体内容,另外一个就是图片的相关信息实体: 1:主

高仿360手机卫士——Android源码

高仿360手机卫士 高仿360手机卫士界面android源码,左右滑动效果,超炫. 下载地址:http://www.devstore.cn/code/info/1173.html 运行截图:    热门源码下载: 高仿京东商城 Android快速开发不可或缺的11个工具类 Android快速开发框架LoonAndroid Android应用源码比较不错的新闻客户端 版权声明:本文为博主原创文章,未经博主允许不得转载.

仿360加速球。（实现内存释放）

FloatCircleView的实现自定义view 创建WindowManager窗体管理类管理悬浮小球和底部大窗体 MyProgreeView手机底部窗体中小球的实现 FloatMenuView的实现 MyFloatService MainActivity的实现 现在手机上的悬浮窗应用越来越多,对用户来说,最常见的悬浮窗应用就是安全软件的悬浮小控件,拿360卫士来说,当开启悬浮窗时,它是一个小球,小球可以拖动,当点击小球出现大窗体控件,可以进行进一步的操作如:释放手机内存等等.于是借着慕课网的

WinForm 仿360界面控件

因为经常要做一些1.2千行的小工具,WinForm自带的TabCtrl又不美观,所以想做成360的样子,在网上找来找去,都只有散乱的代码,没有可以通用的结构,所以自己写了一个简易的通用控件. 控件主要功能 添加按钮和对应的Userctrl页面,或者相应的Action函数:整个控件是透明背景,窗体的背景将被作为整体背景,即支持类似换肤功能:可自定义按钮的遮罩函数. 支持Userctrl页面切换 支持Action(无参数无返回值)委托 主要类型实现 切换按钮派生自RatioButton,因为已经实现

前端的小玩意（9.3）——做一个仿360工具箱的web页面（我的工具里的模板和样式）

前端的小玩意(9.1)--做一个仿360工具箱的web页面(Tab按钮切换) http://blog.csdn.net/qq20004604/article/details/52216203 前端的小玩意(9.2)--做一个仿360工具箱的web页面(全部工具里面的模板) http://blog.csdn.net/qq20004604/article/details/52226223 (三)我的工具页面布局 如图: 首先将其分为二部分: 第一部分是上方整体红色方框区域: 包含若干个独立按钮,按钮

Android静默安装实现方案，仿360手机助手秒装和智能安装功能

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/47803149 之前有很多朋友都问过我,在Android系统中怎样才能实现静默安装呢?所谓的静默安装,就是不用弹出系统的安装界面,在不影响用户任何操作的情况下不知不觉地将程序装好.虽说这种方式看上去不打搅用户,但是却存在着一个问题,因为Android系统会在安装界面当中把程序所声明的权限展示给用户看,用户来评估一下这些权限然后决定是否要安装该程序,但如果使用了静默安装的方式,也就没