浙江 杭州

jQuery炫酷蜂巢式六角形图片画廊特效

系统分类: 网页特效 - jquery插件 - jQuery界面效果 2017-03-23

人气576

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


jquery-hex-gallery是一款效果非常酷的jQueryCSS3蜂巢式六角形图片画廊特效插件。该图片画廊使用CSS3将图片制作为六角形,组成一个蜂巢的样子。你可以对图片进行分组展示,还可以像幻灯片一样切换图片。

使用方法

使用这个图片画廊插件需要引入jQuery、jquery.hex.gallery.js、jquery.lazyload.js和jquery.als.link-1.6.js文件,以及一个通用样式表style.css文件。

<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.hex.gallery.js" type="text/javascript"></script> 
<script src="js/jquery.lazyload.js" type="text/javascript"></script> 
<script src="js/jquery.als.link-1.6.js" type="text/javascript"></script>                
              
HTML结构和插件调用

直接在你需要插入图片画廊的地方调用下面的js代码即可。

<body>
    ...
         <script type="text/hex-gallery">
{
  "album" : [
      {
        "cover": {"title": "<p>Stephanie Dola</p>", "class": "hex-1", "img" : "img/xaykK2s.jpg"},
        "photo": [
          {"imgur": "img/yIoACHc.gif"},
          {"imgur": "img/uINck6K.gif"},
          {"imgur": "img/zOZJEex.gif"}
        ]
      },
      {
        "cover": {"title": "<p>Moe Moe</p>", "class": "hex-1", "img": "img/SOjLn66.jpg"},
        "photo": [
          {"imgur": "img/YSmWA3g.gif"},
          {"imgur": "img/6G4BDxU.gif"},
          {"imgur": "img/kuH4XVL.gif"},
          {"imgur": "img/0NemOhQ.gif"},
          {"imgur": "img/tedXr7Y.gif"},
          {"imgur": "img/5IHR8bQ.gif"}
        ]
      },
      {
        "cover": {"title": "<p>Chiyo Gekkan</p>", "class": "hex-1", "img": "img/FbZZuQC.png"},
        "photo": [
          {"imgur": "img/dCw8LFb.gif"},
          {"imgur": "img/ZtHGJYd.gif"},
          {"imgur": "img/4eZyFHp.gif"}
        ]
      },
      {
        "cover": {"title": "<p>Other</p>", "class": "hex-1", "img": "img/FbZZuQC.png"},
        "photo": [
          {"imgur": "img/vpKzynV.gif"}
        ]
      }
  ]
}
       </script>
     ...
</body>           
              

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

格式:zip 大小:640.29KB

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

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

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

所需G币:20

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

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

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