收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2360|回复: 1

[作品展示] 做了一个相片墙

[复制链接]
发表于 2013-5-21 09:58:32 | 显示全部楼层 |阅读模式
css3的相片墙, css代码比较多,大家可以去下面地址下载后观看效果!
  1. <div id="demo">
  2.     <div class="col">
  3.         <div class="big todos-thumb">
  4.         <p><img src="img/loader.gif" data-src="img/5969313944_e5d6d67b23_s.gif" alt="monaco see">
  5.         <span class="todos-thumb-span">monaco see</span>
  6.         </p>
  7.         </div>
  8.     </div><!-- col1 -->
  9.     <div class="col col1">
  10.         <div class="big todos-thumb">
  11.         <p><img src="img/loader.gif" data-src="img/5913489167_1e78858455_s.gif" alt="the flower">
  12.         <span class="todos-thumb-span">the flower</span>
  13.         </p>
  14.         </div>
  15.     </div><!-- col2 -->
  16.     <div class="col col2">
  17.         <div class="big todos-thumb">
  18.         <p><img src="img/loader.gif" data-src="img/5914033844_504a351fd4_m.gif" alt="Chapel Bridge">
  19.         <span class="todos-thumb-span">Chapel Bridge</span>
  20.         </p>
  21.         </div>
  22.     </div><!-- col3 -->
  23. </div><!-- demo -->
复制代码
  1. $(document).ready(function(){
  2.         $("#demo .col").mouseenter(function(){
  3.                 $(this).addClass("active");
  4.                 $('.active').siblings().css("opacity", "0.4"); //除了加载到.active样式以外都改变其opacity
  5.         });
  6.         $("#demo .col").mouseleave(function(){
  7.                 $(this).removeClass("active");
  8.                 $("#demo .col").css("opacity", "1");
  9.         });
  10. });
复制代码
下载地址
发表于 2013-7-1 10:18:51 | 显示全部楼层
下载下来看看
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-11-12 15:50 , Processed in 0.109099 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表