当前位置:   article > 正文

HTML5 心形图片墙 鼠标悬停放大图片_html爱心照片墙

html爱心照片墙

转自:http://www.codefans.net/jscss/code/5025.shtml  (有Demo)

  • 由jquery和HTML5技术共同实现的图片墙效果,鼠标悬停即放大效果,单就把图片排列成的“心形”图案来说,已经是亮点了,你知道是怎么实现的吗?若鼠标放在图片墙的任意一张图片上,该图片会向前放大显示,而且是带动画效果的。在IE8+下也可以,但效果不流畅,在支持HTML5的Chrome或火狐浏览器中,运行效果极佳。
  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=gb2312" />
  5. <title>
  6. jQuery心型图片墙鼠标悬浮变大
  7. </title>
  8. <style type="text/css">
  9. *{padding:0; margin:0;} ul,li{list-style:none;} body{font:12px/20px "Microsoft
  10. Yahei","SimSun",Arial,sans-serif; background:#CCC;} .heartPic{width:749px;height:630px;margin:60px
  11. auto 0 auto;} .heartPic ul{float:left;width:749px;} .heartPic ul li{float:left;width:100px;height:100px;padding:2px;cursor:pointer;}
  12. .heartPic ul li.on{z-index:99;} .heartPic ul li.on .in{position:relative;left:-50px;top:-50px;padding:5px
  13. 5px 20px 5px;background:#666;} .heartPic ul li .pTxt{display:none;width:100px;height:15px;text-align:center;color:#fff;overflow:hidden;}
  14. .heartPic .showDiv{display:block;}
  15. </style>
  16. </head>
  17. <body>
  18. <div class="heartPic">
  19. <ul>
  20. <li>
  21. </li>
  22. <li>
  23. <div class="in">
  24. <img width="100" height="100" src="/jscss/demoimg/201404/index_01.jpg"
  25. />
  26. <p class="pTxt">
  27. 可爱的女娃娃
  28. </p>
  29. </div>
  30. </li>
  31. <li>
  32. <div class="in">
  33. <img width="100" height="100" src="/jscss/demoimg/201404/index_02.jpg"
  34. />
  35. <p class="pTxt">
  36. 呆萌的小熊
  37. </p>
  38. </div>
  39. </li>
  40. <li>
  41. </li>
  42. <li>
  43. <div class="in">
  44. <img width="100" height="100" src="/jscss/demoimg/201404/index_03.jpg"
  45. />
  46. <p class="pTxt">
  47. 卡哇伊的小熊
  48. </p>
  49. </div>
  50. </li>
  51. <li>
  52. <div class="in">
  53. <img width="100" height="100" src="/jscss/demoimg/201404/index_04.jpg"
  54. />
  55. <p class="pTxt">
  56. 女巫骑着扫帚
  57. </p>
  58. </div>
  59. </li>
  60. <li>
  61. </li>
  62. </ul>
  63. <ul>
  64. <li>
  65. <div class="in">
  66. <img width="100" height="100" src="/jscss/demoimg/201404/index_05.jpg"
  67. />
  68. <p class="pTxt">
  69. 女娃娃
  70. </p>
  71. </div>
  72. </li>
  73. <li>
  74. <div class="in">
  75. <img width="100" height="100" src="/jscss/demoimg/201404/index_06.jpg"
  76. />
  77. <p class="pTxt">
  78. 星星可爱
  79. </p>
  80. </div>
  81. </li>
  82. <li>
  83. <div class="in">
  84. <img width="100" height="100" src="/jscss/demoimg/201404/index_07.jpg"
  85. />
  86. <p class="pTxt">
  87. 呆萌女
  88. </p>
  89. </div>
  90. </li>
  91. <li>
  92. <div class="in">
  93. <img width="100" height="100" src="/jscss/demoimg/201404/index_08.jpg"
  94. />
  95. <p class="pTxt">
  96. 狗狗
  97. </p>
  98. </div>
  99. </li>
  100. <li>
  101. <div class="in">
  102. <img width="100" height="100" src="/jscss/demoimg/201404/index_09.jpg"
  103. />
  104. <p class="pTxt">
  105. 绿树
  106. </p>
  107. </div>
  108. </li>
  109. <li>
  110. <div class="in">
  111. <img width="100" height="100" src="/jscss/demoimg/201404/index_10.jpg"
  112. />
  113. <p class="pTxt">
  114. 粉爱粉爱的
  115. </p>
  116. </div>
  117. </li>
  118. <li>
  119. <div class="in">
  120. <img width="100" height="100" src="/jscss/demoimg/201404/index_11.jpg"
  121. />
  122. <p class="pTxt">
  123. 蜡笔小新
  124. </p>
  125. </div>
  126. </li>
  127. </ul>
  128. <ul>
  129. <li>
  130. <div class="in">
  131. <img width="100" height="100" src="/jscss/demoimg/201404/index_12.jpg"
  132. />
  133. <p class="pTxt">
  134. 震不碎的心
  135. </p>
  136. </div>
  137. </li>
  138. <li>
  139. <div class="in">
  140. <img width="100" height="100" src="/jscss/demoimg/201404/index_13.jpg"
  141. />
  142. <p class="pTxt">
  143. 很有意境
  144. </p>
  145. </div>
  146. </li>
  147. <li>
  148. <div class="in">
  149. <img width="100" height="100" src="/jscss/demoimg/201404/index_14.jpg"
  150. />
  151. <p class="pTxt">
  152. 樱木花道最爱啊
  153. </p>
  154. </div>
  155. </li>
  156. <li>
  157. <div class="in">
  158. <img width="100" height="100" src="/jscss/demoimg/201404/index_15.jpg"
  159. />
  160. <p class="pTxt">
  161. 俩骷髅
  162. </p>
  163. </div>
  164. </li>
  165. <li>
  166. <div class="in">
  167. <img width="100" height="100" src="/jscss/demoimg/201404/index_16.jpg"
  168. />
  169. <p class="pTxt">
  170. 萌妹子
  171. </p>
  172. </div>
  173. </li>
  174. <li>
  175. <div class="in">
  176. <img width="100" height="100" src="/jscss/demoimg/201404/index_17.jpg"
  177. />
  178. <p class="pTxt">
  179. 可爱的小狗
  180. </p>
  181. </div>
  182. </li>
  183. <li>
  184. <div class="in">
  185. <img width="100" height="100" src="/jscss/demoimg/201404/index_18.jpg"
  186. />
  187. <p class="pTxt">
  188. 夫妇俩白头偕老
  189. </p>
  190. </div>
  191. </li>
  192. </ul>
  193. <ul>
  194. <li>
  195. </li>
  196. <li>
  197. <div class="in">
  198. <img width="100" height="100" src="/jscss/demoimg/201404/index_19.jpg"
  199. />
  200. <p class="pTxt">
  201. 刷子
  202. </p>
  203. </div>
  204. </li>
  205. <li>
  206. <div class="in">
  207. <img width="100" height="100" src="/jscss/demoimg/201404/index_20.jpg"
  208. />
  209. <p class="pTxt">
  210. 偶的头像
  211. </p>
  212. </div>
  213. </li>
  214. <li>
  215. <div class="in">
  216. <img width="100" height="100" src="/jscss/demoimg/201404/index_21.jpg"
  217. />
  218. <p class="pTxt">
  219. 树叶子
  220. </p>
  221. </div>
  222. </li>
  223. <li>
  224. <div class="in">
  225. <img width="100" height="100" src="/jscss/demoimg/201404/index_22.jpg"
  226. />
  227. <p class="pTxt">
  228. 星星
  229. </p>
  230. </div>
  231. </li>
  232. <li>
  233. <div class="in">
  234. <img width="100" height="100" src="/jscss/demoimg/201404/index_23.jpg"
  235. />
  236. <p class="pTxt">
  237. 浅色哦
  238. </p>
  239. </div>
  240. </li>
  241. <li>
  242. </li>
  243. </ul>
  244. <ul>
  245. <li>
  246. </li>
  247. <li>
  248. </li>
  249. <li>
  250. <div class="in">
  251. <img width="100" height="100" src="/jscss/demoimg/201404/index_24.jpg"
  252. />
  253. <p class="pTxt">
  254. 太阳帅哥
  255. </p>
  256. </div>
  257. </li>
  258. <li>
  259. <div class="in">
  260. <img width="100" height="100" src="/jscss/demoimg/201404/index_25.jpg"
  261. />
  262. <p class="pTxt">
  263. 大笑脸
  264. </p>
  265. </div>
  266. </li>
  267. <li>
  268. <div class="in">
  269. <img width="100" height="100" src="/jscss/demoimg/201404/index_26.jpg"
  270. />
  271. <p class="pTxt">
  272. 企鹅
  273. </p>
  274. </div>
  275. </li>
  276. <li>
  277. </li>
  278. <li>
  279. </li>
  280. </ul>
  281. <ul>
  282. <li>
  283. </li>
  284. <li>
  285. </li>
  286. <li>
  287. </li>
  288. <li>
  289. <div class="in">
  290. <img width="100" height="100" src="/jscss/demoimg/201404/index_27.jpg"
  291. />
  292. <p class="pTxt">
  293. 小兔子
  294. </p>
  295. </div>
  296. </li>
  297. <li>
  298. </li>
  299. <li>
  300. </li>
  301. <li>
  302. </li>
  303. </ul>
  304. </div>
  305. <script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js">
  306. </script>
  307. <script type="text/javascript">
  308. $(function() {
  309. $(".heartPic li").hover(function() {
  310. $(this).addClass("on");
  311. $(this).find("img").animate({
  312. "width": "200px",
  313. "height": "200px"
  314. });
  315. $(this).find("div").animate({
  316. "width": "200px",
  317. "height": "200px"
  318. });
  319. $(this).find(".pTxt").animate({
  320. "width": "200px",
  321. "height": "20px"
  322. });
  323. $(this).find("p").addClass("showDiv");
  324. },
  325. function() {
  326. $(this).animate({
  327. height: "100px"
  328. },
  329. 100).removeClass("on");
  330. $(this).find("img").stop(true, true).animate({
  331. "width": "100px",
  332. "height": "100px"
  333. });
  334. $(this).find("div").stop(true, true).animate({
  335. "width": "100px",
  336. "height": "100px"
  337. });
  338. $(this).find(".pTxt").stop(true, true).animate({
  339. "width": "0px",
  340. "height": "0px"
  341. });
  342. });
  343. })
  344. </script>
  345. <div style="text-align:center;clear:both">
  346. </div>
  347. </body>
  348. </html>


声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/120612
推荐阅读
相关标签
  

闽ICP备14008679号