浙江 杭州

jQuery和CSS3推拉式隐藏侧边栏网格图片画廊特效

系统分类: 网页特效 - jquery插件 - jQuery图片展示/幻灯片 2017-03-23

人气568

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款效果非常炫酷的jQueryCSS3推拉式隐藏侧边栏网格图片画廊特效。这个图片画廊特效中所有缩略图以网格形式排列,当用户点击相应的缩略图后,高清大图从右边滑出,整个缩略图面板被向左推,右侧显示大图及图片的文字说明。

制作方法

HTML结构

这个图片画廊使用无序列表来制作,外部使用<section>来包裹,最外层使用<main>元素。

<main role="main" id="main">
  <section class="tiles-a">
    <ul>
      <li>
        <a class="gallery" href="#" style="background: url('http://i.imgur.com/J3gQPXH.jpg'); background-size: cover;" aria-controls="aside" aria-expanded="false">
          <div class="details visually-hidden">
            <img src="http://i.imgur.com/t5Nd1jj.jpg" alt="...">
            <div class="text-copy wrapper">
              <h3>Name Here</h3>
              <p>...</p>
            </div>
          </div>
        </a>
      </li>
      ......
    </ul>
  </section>
</main>         
              

右侧隐藏的滑动侧边栏使用的是<aside>元素,里面使用一个SVG来制作关闭按钮。

<aside role="complementary" id="aside" 
       aria-hidden="true" 
       aria-expanded="false"> 
  <a href="#" class="close">
    <img src="close.svg" alt="Close button">
      <span class="visually-hidden">Return to main content
      </span>
  </a>
  <div class="aside--details" tabindex="0" 
       aria-live="polite" 
       aria-atomic="true" 
       aria-label="Image details"> 
  </div>
</aside>                
              
CSS样式

这个网格图片画廊的CSS样式比较简单,其中使用媒体查询来控制图片的网格布局。其它代码相对简单,请参考下载文件。

@media (min-width: 640px) {
  .tiles-a li {
    float: left;
    width: 33.33%;
  }
}         
              
JAVASCRIPT

这个网格图片画廊的js代码中,所有的功能块都封装成了函数,showAside()是显示隐藏侧边栏,killAside()是关闭侧边栏。loadTileData()是为侧边栏加载数据。

// load data to aside
function loadTileData(target){
  var $this = $(target),
      itemHtml = $this.find(".details").html();
      $asideTarget.html(itemHtml);
      showAside();
}              
// show/hide aside
function showAside(){
  if(!$("html").hasClass(slideClass)){
    $("html").toggleClass(slideClass);
    $aside.attr("aria-hidden","false");
    focusCloseButton();
  }
}              
// kill aside
function killAside(){
  if($("html").hasClass(slideClass)){
    $("html").removeClass(slideClass);
    sendFocusBack();
    $aside.attr("aria-hidden","true");
    $tiles.attr("aria-expanded","false");
  }
}                
              

其它js代码请参考下载文件。

查看演示
下载资源:2
下载资源
错误提交:

格式:zip 大小:12.69KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1855.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery和CSS3推拉式隐藏侧边栏网格图片画廊特效

我当前G币余额:0 已下载次数:2

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

据说认真评论作品的以后都迅速成长为大神了(已有0 评论)